JavaScript 高级程序设计（第3版）笔记——chapter6：面向对象的程序设计

一.创建对象

• 工厂模式。使用简单的函数创建对象，为对象添加属性和方法，然后返回对象。【问题：没有解决对象识别问题】

•  1 function createPerson(name, age) {
   2     var o = new Object();
   3     o.name = name;
   4     o.age = age;
   5     o.sayName = function() {
   6         console.log(this.name);
   7     }
   8     return o;
   9 }
  10 
  11 var p1 = createPerson("p1", "10");
  12 p1.sayName(); //p1
  13 console.log(p1 instanceof Object); //true
  14 console.log(p1 instanceof createPerson); //false

   

• 构造函数模式。可以创建自定义引用类型，可以像创建内置对象实例一样使用new操作符。缺点：每个成员都无法得到复用。

•  1 function Person(name, age) {
   2     this.name = name;
   3     this.age = age;
   4     this.sayName = function() {
   5         console.log(this.name);
   6     }
   7 }
   8 var p2 = new Person("p2", 11);
   9 p2.sayName(); //p2
  10 console.log(p2 instanceof Object); //true
  11 console.log(p2 instanceof Person); //true

   

• 原型模式。使用构造函数的prototype属性来指定那些应该共享的属性和方法。

•  1 function person(name) {
   2 }
   3 person.prototype.name = "person";
   4 person.prototype.sayName = function() {
   5     console.log(this.name);
   6 }
   7 var p3 = new person();
   8 var p4 = new person();
   9 p3.sayName();//person
  10 console.log(p3.sayName == p4.sayName);//true

   

• 组合使用构造函数模式和原型模式。使用构造函数定义实例属性，而使用原型定义共享的属性和方法。

•  1 function p(name) {
   2     this.name = name;
   3 }
   4 p.prototype.sayName = function() {
   5     console.log(this.name);
   6 }
   7 var p5 = new p("p5");
   8 var p6 = new p("p6");
   9 p5.sayName();//p5
  10 p6.sayName(); //p6
  11 console.log(p5 instanceof Object); //true
  12 console.log(p5 instanceof p); //true
  13 console.log(p5.constructor instanceof Function);//true
  

 

二.继承

•  通过原型链继承。
• 注意点1：使用字面量添加新方法会重写原型链。

function SuperType() {
    this.property = true;
}

SuperType.prototype.getSuperValue = function() {
    return this.property;
}

function SubType() {
    this.subproperty = false;
}

//继承了SuperType
SubType.prototype = new SuperType();

//使用字面量添加新方法，会导致上一行代码无效。因为这样重写了原型链
SubType.prototype = {
    getSubValue : function() {
        return this.property;
    },

    someOtherMethod : function() {
        return false;
    }
};

var instance = new SubType();
console.log(instance.getSuperValue()); //error

• 注意点二：包含引用类型值的原型属性会被所有实例共享。

• function SuperType() {
      this.colors = [1,2,3];
  }
  
  function SubType() {
  }
  
  SubType.prototype =  new SuperType();
  var instance1 = new SubType();
  instance1.colors.push(4);
  console.log(instance1.colors); //[ 1, 2, 3, 4 ]
  
  var instance2 = new SubType();
  console.log(instance2.colors); //[ 1, 2, 3, 4 ]

   

• 借用构造函数。在子类型构造函数的内部调用超类型构造函数。

• function SuperType() {
      this.colors = [1,2,3];
  }
  
  function SubType() {
      SuperType.call(this);
  }
  
  SubType.prototype =  new SuperType();
  var instance1 = new SubType();
  instance1.colors.push(4);
  console.log(instance1.colors); //[ 1, 2, 3, 4 ]
  
  var instance2 = new SubType();
  console.log(instance2.colors); //[ 1, 2, 3]
  /*在新的SubType对象上执行SuperType()函数中定义的所有对象初始化代码。所以，SubType的每个实例就会具有自己的colors属性的副本了。*/
  

   

• 组合继承。使用原型链实现对原型属性和方法的继承。而通过借用构造函数来实现对实例属性的继承。这样，即通过在原型上定义方法实现了函数复用，又能够保证每个实例都有它自己的属性。

• function Super(name) {
      this.name = name;
      this.num = [1,2,3];
  }
  
  Super.prototype.SayName = function() {
      console.log(this.name);
  };
  
  function sub(name, age) {
      //继承属性
      Super.call(this, name);
      this.age = age;
  }
  //继承方法
  sub.prototype = new Super();
  sub.prototype.constructor = sub;
  sub.prototype.SayAge = function() {
      console.log(this.age);
  }
  
  var i1 = new sub("i1", 29);
  i1.num.push(4);
  console.log(i1.num);//[ 1, 2, 3, 4 ]
  i1.SayAge(); //29
  i1.SayName(); //i1
  
  var i2 = new sub("i2", 27);
  console.log(i2.num); //[ 1, 2, 3]
  i2.SayAge(); //27
  i2.SayName(); //i2