《javascript高级程序设计》 继承实现方式

这篇本来应该是作为写JS 面向对象的前奏，只是作为《javascript高级程序设计》继承一章的笔记

原型链

code 实现

function SuperType() {
  this.colors = ['red','blue', 'green'];
}
function SubType() {
}
SubType.prototype = new SuperType();
var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors); // ['red','blue', 'green','black']

var instance2 = new SubType();
console.log(instance2.colors); // ['red','blue', 'green','black']

var instance = new SuperType();
console.log(instance.colors); // ['red','blue', 'green']

使用原型链来实现继承，原型实际上会变成另一个类型的实例，于是，原先的实例属性，会变成现在的原型属性了
在创建子类的实例时，不能向父类的构造函数中传递参数

借用构造函数

code 实现继承

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

var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors); // ["red", "blue", "green", "black"]

var instance2 = new SubType();
console.log(instance2.colors); // ["red", "blue", "green"]

var instance = new SuperType();
console.log(instance.colors); // ['red','blue', 'green']

同样也可以实现参数的传递

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

var instance = new SubType();
console.log(instance.name); // jack
console.log(instance.age); // 29

如果仅仅是借用构造函数，那么将无法避免构造函数模式存在的问题--方法都在构造函数中定义，因此，函数复用也就无从谈起了。而且，在超类型的原型中定义的方法，对子类而言也是不可见的，结果所有类型都只能使用构造函数模式。

组合继承

将原型链和借用构造函数的技术组合到一块，从而发回二者之长的一种继承模式。其背后的思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，即通过在原型上定义方法实现了函数复用，又能够保证每个实例都有它自己的属性。

code 实现

function SuperType(name) {
  this.name = name;
  this.colors = ['red','blue','green'];
}
SuperType.prototype.sayName = function() {
  console.log(this.name);
};
function SubType(name, age) {
  SuperType.call(this, name);
  this.age = age;
};

SubType.prototype = new SuperType();
SubType.prototype.sayAge = function(){
  console.log(this.age);
};

var instance1 = new SubType("jack", 29);
instance1.colors.push("black");
console.log(instance1.colors); //["red", "blue", "green", "black"]
instance1.sayName(); // jack
instance1.sayAge(); // 29

var instance2 = new SubType("allen", 23);
console.log(instance2.colors); // ["red", "blue", "green"]
instance2.sayName(); //allen
instance2.sayAge(); // 23

instanceOf和isPrototypeOf 也能够用于识别基于组合继承创建的对象

原型式继承
- 没有严格意义上的构造函数，通过借助原型，可以基于已有的对象创建新对象，同时还不必因此创建自定义类型
```
function object(o){
  function F(){};
  F.prototype = o;
  return new F();
}
```
在object() 函数内部，先创建了一个临时性的构造函数，然后将传入的对象作为这个构造函数的原型，最后返回这个临时类型的一个新实例。从本质上将，object() 对传入其中的对象执行了一次浅复制
```
function object(o) {
    function F() {};
    F.prototype = o;
    return new F();
}

var person = {
    name:'jack',
    friends:['allen','lucy','van']
}

var anotherPerson = object(person);
anotherPerson.name = 'bob';
anotherPerson.friends.push('steve');

var yetAnotherPerson = object(person);
yetAnotherPerson.name = 'linda';
yetAnotherPerson.friends.push('shelly')

console.log(person.friends); //["allen", "lucy", "van", "steve", "shelly"]
```
这种原型式继承，要求你必须有一个对象可以作为另一个对象的基础。如果有这么一个对象的话，可以把他传递给object() 函数，然后再根据具体需求对得到的对象加以修饰即可。

ECMAScript5 通过Object.create() 方法规范花了原型式继承。这个方法接受两个参数：一个用作新对象原型的对象和（可选的）一个为新对象定义额外属性的对象。在传入一个参数的情况下，Object,create() 与object() 函数方法的行为相同

在没有必要创建构造函数，而只是想让一个对象与另一个对象保持类似的情况下，原型式继承是完全可以胜任的。不过，包含引用类型值的属性始终都会共享响应的值，就像使用原型模式一样
寄生式继承
- 寄生式继承是与原型式继承紧密相关的一种思路。寄生式继承的思路与寄生构造函数和工厂模式类似，即创建一个仅用于封装继承过程的函数，该函数在内部已某种方式来增强对象，最后再像真的是它做了所有工作一样返回对象。
```
function createAnother(original){
  var clone = object(original); // 通过调用 object() 函数创建一个新对象
  clone.sayHi = function(){  // 以某种方式来增强对象
    alert("hi");
  };
  return clone; // 返回这个对象
}
```
- 在主要考虑对象而不是自定义类型和构造函数的情况下，寄生式继承也是一种有用的模式。前面示范继承模式时使用的object() 函数不是必需的；任何能够返回新对象的函数都使用与此模式。
寄生组合式继承
- 组合继承是JavaScript 最常用的继承模式；不过也有自己的不足。组合继承最大的问题就是无论什么情况下，都会调用两次父类的构造函数：一次是在创建子类原型的时候，另一次是在子类构造函数内部。
子类最终会包含父类对象的全部实例属性，但我们不得不在调用子类构造函数时重写这些属性。
```
function SuperType(name) {
    this.name = name;
    this.colors = ['red','blue','green'];
}

SuperType.prototype.sayName = function(){
    console.log(this.name);
}

function SubType(name, age) {
    SuperType.call(this, name); // 第二次调用 SuperType()
    this.age = age;
}

SubType.prototype = new SuperType(); // 第一次调用 SuperType()
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
    console.log(this.age);
};
```
第一次调用SuperType 构造函数时，SubType.prototype会得到两个属性：name 和colors，他们都是SuperType 的实例属性，只不过现在位于SubType 的原型中。当调用SubType 构造函数时，又会调用一次SuperType 构造函数，这一次又在新对象上创建了实例属性name 和colors。于是，这两个属性就屏蔽了原型中的两个同名属性。

所谓寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。其背后的基本思路是：不必为了指定子类的原型而调用父类的构造函数，我们所需要的无非就是父类原型的一个副本而已。本质上，就是使用寄生式继承来继承父类型的原型，然后再将结果指定给子类的原型。寄生组合式继承的基本模式如下
```
function inheritPrototype(subType, superType) {
  var prototype = object(superType.prototype);
  prototype.constructor = subType;
  subType.prototype = prototype;
}
```
第一步是创建父类原型的一个副本，第二步是为创建的副本添加constructor 属性，从而弥补因重写原型而失去的默认的constructor 属性。第三步是将新创建的对象（即副本）赋值给子类的原型。
```
function SuperType(name) {
    this.name = name;
    this.colors = ['red','blue','green'];
}

SuperType.prototype.sayName = function(){
    console.log(this.name);
}

function SubType(name, age) {
    SuperType.call(this, name); // 第二次调用 SuperType()
    this.age = age;
}

inheritPrototype(SubType, SuperType)
SubType.prototype.sayAge = function() {
    console.log(this.age);
};
```
这个例子的高效率体现在它只调用了一次SuperType 构造函数，并且因此避免了在SubType.prototype 上创建不必要的、多余的属性。于此同时，原型链还能保持不变；因此，还能够正常使用instanceof 和isPrototypeOf() 。开发人员普遍认为寄生组合继承是引用类型最理想的继承范式。

优缺点

原型链会修改父类的属性，在创建子类的实例时，不能向父类的构造函数中传递参数
借用构造函数，则没有继承
组合继承（原型继承+借用构造函数）组合继承最大的问题就是无论什么情况下，都会调用两次父类的构造函数：一次是在创建子类原型的时候，另一次是在子类构造函数内部。
原型式继承，要求你必须有一个对象可以作为另一个对象的基础，
包含引用类型值的属性始终都会共享响应的值，就像使用原型模式一样
寄生式继承
在主要考虑对象而不是自定义类型和构造函数的情况下，寄生式继承也是一种有用的模式
寄生组合式继承（这是最成熟的方法，也是现在库实现的方法）
第一步是创建父类原型的一个副本，第二步是为创建的副本添加constructor 属性，从而弥补因重写原型而失去的默认的constructor 属性。第三步是将新创建的对象（即副本）赋值给子类的原型。

JS面向对象系列

《javascript高级程序设计》继承实现方式

优缺点

catchonme

引用和评论

关于HTTP连接和请求资源

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

《javascript高级程序设计》 继承实现方式

优缺点

catchonme

引用和评论

关于HTTP连接和请求资源

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

《javascript高级程序设计》继承实现方式