《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最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

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

优缺点

catchonme

引用和评论

关于HTTP连接和请求资源

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

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