面向对象的 js 之对象创建与继承

创建对象

1. 工厂模式

function createPerson(name, age){
    var o = new Object();
    o.name = name;
    o.age = age;
    return o;
}
// 使用
var p1 = createPerson('zph', 18);

这样做就找不到原型关系了，没有解决对象识别问题。

2. 构造函数

function Person(name, age){
    this.name = name;
    this.age = age;
    this.showName = function(){ return this.name; };
}
// 使用
var p1 = new Person('zph', 18);
var p2 = new Person('zhh', 14);

解决了对象识别问题，但多个对象实例不能共享相同的方法，冗余。

3. 原型模式

function Person(){
}
Person.prototype.name = '';
Person.prototype.age= 0;
// 使用
var p1 = new Person();
var p2 = new Person();

所有对象实例共享属性和方法，可能导致数据出错。

4. 组合模式（组合使用构造函数和原型模式）

function Person(){
    this.name = '';
    thia.age = 0;
}
Person.prototype.showName = function() { return this.name; };
// 使用
var p1 = new Person();
var p2 = new Person();

目前最流行的方式。

5. 动态原型模式

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;

    if (typeof this.showName != "function"){
        Person.prototype.showName = function(){ return this.name; };
    }
}

仅第一次初始原型。

6. 寄生构造函数模式

function Person(name, age){
    var o = new Object();
    o.name = name;
    o.age = age;
    return o;
}
// 使用
var p1 = new Person('zph', 18);

与工厂函数唯一的不同，是使用了new操作符，这会导致创建两次对象。

7. 稳妥构造函数模式

function createPerson(name, age){
    var o = new Object();

    var _name = name;
    var _age = age;

    o.showName = function() { return _name; };
    return o;
}
// 使用
var p1 = createPerson('zph', 18);

只可以通过指定方法获取相应的值，安全。

继承

1. 原型链继承

function Animal() {
      this.name = 'Animal';
}
Animal.prototype.showName = function () { return this.name; };
// 继承
function Cat () {
      this.name = 'Cat';
}
Cat.prototype = new Animal();

引用类型会被共享。

2. 借用构造函数继承

function SuperType(){
      this.colors = ["red", "blue", "green"];
}
function SubType(){  
      //继承了SuperType
      SuperType.call(this);
}

这就又没办法复用函数了，另外也失去了继承关系，由于没有原型链 ，无法识别 SubType 是 SuperType 的子类。。。

3. 组合继承（原型链和构造函数组合）

function SuperType(name){
      this.name = name;
      this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
      alert(this.name);
};
function SubType(name, age){  
      // 继承属性
      SuperType.call(this, name);
      // 自身属性
      this.age = age;
}
// 继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;

为了继承属性和共享方法，两次调用了 SuperType，同时对象自身和原型链都会保存一份属性，造成数据冗余。

4. 原型式继承

function object(o){
      function F(){}
      F.prototype = o;
      return new F();
}
// 使用
var p1 = {
      name: "Nicholas",
      friends: ["Shelby", "Court", "Van"]
};
// 基于已有的 p1 创建新对象 p2
var p2 = object(p1);

基于已有的对象创建新对象，ES5 将这种原型式继承规范化为 Object.create()

5. 寄生式继承

function createAnother(original){
      var clone = Object(original);    // 通过调用函数创建一个新对象
      clone.sayHi = function(){        // 增强这个对象
        alert("hi");
      };
      return clone;                    // 返回这个对象
}
var person = {
      name: "Nicholas",
      friends: ["Shelby", "Court", "Van"]
};
// 使用
var anotherPerson = createAnother(person);

也是基于已有的对象创建新对象。（这里的 Object() 函数调用有疑问，见下）

6. 寄生组合式继承（通过借用构造函数来继承属性，通过原型链的混成形式来继承方法）

function inheritPrototype(subType, superType){
      var prototype = Object(superType.prototype);       //创建对象
      prototype.constructor = subType;                   //增强对象
      subType.prototype = prototype;                     //指定对象
}
// 使用
function SuperType(name){
      this.name = name;
      this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
      alert(this.name);
};
// 子类
function SubType(name, age){  
      SuperType.call(this, name);
      this.age = age;
}
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function(){
      alert(this.age);
};

以上是高程上的摘抄（有少量改动），其中寄生组合式继承略有疑问，不知道是不是高程写错了，这样的方式破坏了原型链，因为：

      Object(superType.prototype) === superType.prototype  // true

Object(someObject) 是类型转换，而不是创建对象，我想这里是一个翻译错误，这里的 Object() 应该是指上文的 object() 函数，对应 Obect.create()，已在图灵社区提交勘误，待续。

最后，记录下自己的继承实现方式：

function object(o){    // ES5 中 Object.create() 的 polyfill 函数，两者效果一致
      function F(){}
      F.prototype = o;
      return new F();
}

function inheritPrototype(subType, superType){
      subType.prototype = object(superType.prototype);     // 指定对象原型，或使用 ES5 的 Object.create()
      subType.prototype.constructor = subType;             // 修正构造函数
}

function SuperType(name){
      this.name = name;
      this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
      alert(this.name);
};

function SubType(name, age){  
      SuperType.call(this, name);
      this.age = age;
}

inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function(){
      alert(this.age);
};