js面向对象

创建对象是一个非常重要的知识点，可以帮助我们更好的了解js底层的一些原理，在各种大牛写的代码里面都可以看到它的影子，接下来我们来了解一下6种创建对象的方法. (红宝书中一共提到了7种创建对象的方式,《JavaScript高级程序设计》)

1. 字面量， 最常用的方式， var obj1 ={};

2. js内置对象 var obj2 = new Object();

3. 工厂模式

   //使用第一种和第二种方式 创建多个对象的时候，会产生大量重复的代码，看到重复，就想到优化，函数封装
   function createPerson(name,age) {
     var o = {};
     o.name = name;
     o.age = age;
     o.sayName = function() {
       alert(this.name);//想知道this值的最好方式就是打印出来
     }
     return o;
   }
   //创建多个不同的对象就简单啦，代码不会重复，这是优点，缺点就是我们不知道返回的三个对象时什么类型，他们有什么联系？
   var person1 = createPerson('Jack', 18);
   var person2 = createPerson('Lucy', 23);
   var person3 = createPerson('Jim', 36);
   

   1. 构造函数模式

      function Person(name,age) {
        this.name = name;
        this.age = age;
        this.sayName = function() {
          alert(this.name);
        }
      }
      
      var person1 = new Person('Jack', 18);
      var person2 = new Person('Lucy', 23);
      var person3 = new Person('Jim', 36);
      
      //对比工厂模式，我们可以发现，
      //1.没有显示的在函数里面创建对象
      //2.直接将属性和方法赋值给了this，this的值是当前对象创建出来的实例，就是person123
      //3.没有return语句
      //4.用了个关键词new 来创建对象
      //5.规范：构造函数使用大写字母开头，非构造函数使用小写字母开头
      

   2. 原型创建对象模式

      //构造函数有缺点，每个对象里面都有公用的函数，每次创建一个实例都要方法重新创建一遍，如果方法过多，就会占用很多不必要的内存，于是出现了原型创建对象的模式
      function Person(){}
      Person.prototype={
      	name:"NIke",
      	age:11,
      	sayName:function(){
      		alert(this.name);
       	}
      };
      var person1 = new Person();
      person1.sayName();
      var person2 = new Person();
      person2.sayName();
      
      //优点，sayName方法共享了，所有的实例的sayName方法都指向同一个
      // 可以动态的添加原型对象的方法和属性，直接反映到对象实例上
      //缺点：使用原型创建的对象实例，person1，person2 可以共享原型上所有的属性和方法，缺点就是所有的属性和方法都是共享的，
      //所有的方法都是共享的，没有办法创建自己的属性和方法，也不能像构造函数那样传递参数
      

   3. 组合使用构造函数和原型模式

      //创建自定义类型的最常见的方式
      
      function Person(name,age) {
        this.name = name;
        this.age = age;
      }
      Person.prototype.sayName = function() {
        console.log(this.name)
      }
      var person1 = new Person('hanmeimei',24)
      person1.sayName()
      
      

构造函数和对象

这里的是一个大的类型----->宝马车 —> 宝马车里面的X6型号 -----> 我的X6

js继承的几种方式

//对应到程序里面， 所有的面向对象的语言的一个重要特性  继承
function Car(){
  this.lunzi="四个轮子";
  this.carDrive = function(){
    console.log("自定义最高层的构造函数继承");
    return "进入Car类的 carDrive函数里面"
  }
}

function BaomaCar1(){
    this.shuangShenSize = {length: '900mm',height:'300mm'};
    this.tianShiYan = true;
    this.myDrive = function(){}
}

function X6Type2(){
    this.zhouju = '4000mm';
    this.liubei = true;
    this.ziDongJiaShi = function(){}
}

function MyX6Car3(name, tou){
	this.xingShiZheng = name;
    this.touZhen = tou;
    this.dingZhiHua = '';
    this.piaoYi = function(){}
}

//暂时了解，有个印象，后面要学习到，非常重要
MyX6Car3.prototype = new X6Type2();
MyX6Car3.prototype.constructor = MyX6Car3;
MyX6Car3.prototype.__proto__ = new BaomaCar1();
MyX6Car3.prototype.__proto__.__proto__ = new Car();

var myCar = new MyX6Car3('张三',true);
console.log('myCar :', myCar.carDrive());




//ES6的继承
class A {}

class B extends A {
  constructor() {
    super();
  }
}

new的过程，重要，面试的时候会问到，工作中写代码时了解即可

 var obj = new Person();

//js内部处理过程, 工厂模式的影子
function gouZhao(){
    var o = {};
    o.__proto__ = Person.prototype;
    Person.call(o)  //动态改变构造函数里面的this值的指向
    return o;
}
var obj = gouZhao();