【javsScript】对象创建的不同方式、原生js实现对象继承

对象的创建模式

• Object构造函数模式

  var obj = {};
  obj.name = 'Tom'
  obj.setName = function(name){this.name=name}
  

• 对象字面量模式

  var obj = {
    name : 'Tom',
    setName : function(name){this.name = name}
  }
  

• 构造函数模式

  function Person(name, age) {
    this.name = name;
    this.age = age;
    this.setName = function(name){this.name=name;};
  }
  new Person('tom', 12);
  

• 构造函数+原型的组合模式

  function Person(name, age) {
    this.name = name;
    this.age = age;
  }
  Person.prototype.setName = function(name){this.name=name;};//统一保存方法
  new Person('tom', 12);
  

继承模式

• 原型链继承 : 得到方法

  function Parent(){}
  Parent.prototype.test = function(){};
  function Child(){}
  Child.prototype = new Parent(); // 子类型的原型指向父类型实例
  Child.prototype.constructor = Child
  var child = new Child(); //有test()
  

  Child.prototype.constructor = Child
  

  注：这句话实现的是修改正确的构造函数，如下所示

  
  function Parent() { }
  
  function Child() { }
  
  // 子类型的原型指向父类型实例
  Child.prototype = new Parent(); 
  //constructor属性是只存在于实例对象的原型对象中的属性，其指向了该实例对象的构造函数
  Child.prototype.constructor = Child; 
  
  var child = new Child(); 
  var p2=new Parent();
  
  console.log(p2==Child.prototype);//false，说明p2于child实例对象的原型对象无关！
  console.log(p2.constructor);//Parent
  console.log(Child.prototype.constructor);//Child
  console.log(child.constructor);//Child
  
  

• 借用构造函数 : 得到属性（使用不到继承，这是假的实现继承的方法）

  function Parent(xxx){this.xxx = xxx}
  Parent.prototype.test = function(){};
  function Child(xxx,yyy){
      Parent.call(this, xxx);//借用构造函数   this.Parent(xxx)
  }
  var child = new Child('a', 'b');  //child.xxx为'a', 但child没有test()
  

• 组合

  function Parent(xxx){this.xxx = xxx}
  Parent.prototype.test = function(){};
  function Child(xxx,yyy){
      Parent.call(this, xxx);//借用构造函数   this.Parent(xxx)
  }
  Child.prototype = new Parent(); //得到test()
  var child = new Child(); //child.xxx为'a', 也有test()
  

• new一个对象背后做了些什么?

  • 创建一个空对象
  • 给对象设置__proto__, 值为构造函数对象的prototype属性值 this.proto = Fn.prototype
  • 执行构造函数体(给对象添加属性/方法)