对象的继承

2017-11-22

摘要：冴羽的博客学习对象的继承

原型链继承

通过原型链继承时不可以使用字面量创建原型方法，因为这样会重写原型链

function Person() {
  this.friends = ["laowang", "xiaowang"]
}
function Child() { }
Child.prototype = new Person();
var child1 = new Child();
child1.friends.push("dagang");
console.log(child1.friends); // ["laowang", "xiaowang", "dagang"]
var child2 = new Child();
console.log(child2.friends); //["laowang", "xiaowang", "dagang"]

注意：
1.实例化子类 Child 时，无法向父类 Person 传参
2.所有实例共享同一个原型对象，因而一定要区分修改属性的主体是实例对象还是原型对象。一般使用等号 = 赋值是为实例自身添加或修改属性，实例添加的自身属性会比原型上的属性先查询到，可以遮盖原型上的同名属性、方法。但有时候修改的是原型上的属性，特别是引用类型的属性，比如上面调用的 push 方法，其修改的就是原型上的数据，这会导致所有实例共享的原型数据发生变化

借用构造函数（经典继承）

原理：在子类型构造函数的内部调用父类型构造函数。call、apply 方法可以实现（模拟实现call、applay、bind和new）

function Person(age) {
  this.friends = ["laowang", "xiaowang"];
  this.age = age
}
function Child(age) {
  Person.call(this, age);
}
var child3 = new Child(24);
child3.friends.push("dagang")
console.log(child3.friends); // ["laowang", "xiaowang", "dagang"]
console.log(child3.age); // 24
var child4 = new Child(99);
console.log(child4.friends); // ["laowang", "xiaowang"]
console.log(child4.age); // 99

注意：
1.引用类型的属性不会被所有实例共享
2.实例化子类 Child 时，可以向父类 Person 传参
3.方法都在构造函数中定义，每次创建实例都会创建一遍方法，每个方法都是一个独立的对象，这会出现大量功能重复的函数对象，浪费空间

组合继承

原型链继承 + 经典继承，原理：使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承

function Person(age) {
  this.age = age;
  this.friends = ["laowang", "xiaowang"]
}
Person.prototype.say = function () {
  console.log(this.sex)
}
function Child(sex, age) {
  Person.call(this, age) // 父类第二次被调用
  this.sex = sex
}
Child.prototype = new Person(); // 父类第一次被调用
var child5 = new Child("male", 25);
child5.friends.push("dagang");
child5.say() // male
console.log(child5.age); // 25
console.log(child5.friends); // ["laowang", "xiaowang", "dagang"]
var child6 = new Child("female", 24);
child6.say() // female
console.log(child6.age); // 24
console.log(child6.friends); // ["laowang", "xiaowang"]

注意：通过在原型上定义方法实现了函数复用，又保证每个实例都有自己的属性，是 js 中最常用的继承方式

原型式继承

借助原型基于已有的对象创建对象，同时不必因此自定义类型。是 Object.create 的模拟实现，或者直接使用 Object.create 方法。

function _create(o) {
  function F() {}
  F.prototype = o;
  return new F();
}
var person = {
  friends: ["xiaowang", "laowang"],
  name: "name"
}
var person1 = _create(person);
console.log(person1.friends); // ["xiaowang", "laowang"]
console.log(person1.name); // name
person1.name = "person1";
person1.friends.push("dagang");
console.log(person1.friends); // ["xiaowang", "laowang", "dagang"]
console.log(person1.name); // person1
var person2 = _create(person);
console.log(person2.friends); // ["xiaowang", "laowang", "dagang"]
console.log(person2.name); // name

注意：
1.原型上的属性会共享，修改属性时的表现与原型链继承相似，一定要区分修改属性的主体是实例对象还是原型对象。一般的赋值是修改实例对象，但引用类型属性的修改有可能是操作原型对象

寄生式继承

创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，再返回对象。整个过程就是封装了原型式继承，然后又给生成的实例添加属性、方法。

function _create(o) {
  var obj = Object.create(o);
  obj.say = function () {
    console.log("hi");
  }
  return obj;
}
var person = {
  name: "xiaowang",
  friends: [],
  add: function(name) {
    this.friends.push(name)
  }
}
var person3 = _create(person);
person3.say(); // hi
person3.name = "xiaogang";
console.log(person3.name) // xiaogang
person3.add("xiaohong");
var person4 = _create(person);
console.log(person4.name); // xiaowang
console.log(person4.friends); // ['xiaohong']

注意：
1.不能复用函数，每次创建对象都会创建一遍所有方法，造成空间浪费
2.修改属性时的表现与原型链继承相似，一定要区分修改属性的主体是实例对象还是原型对象。一般的赋值是修改实例对象，但引用类型属性的修改有可能是操作原型对象

寄生组合式继承

寄生组合式继承是实现基于类型继承的最有效方式。只会调用一次父类型，避免了在父类型原型上创建多余的属性，同时原型链还保持不变。其本质上是使用寄生式继承来继承父类型的原型，然后再将结果指定给子类型的原型。原本组合式继承的原型链是实例.__proto__ 指向父类.prototype，寄生组合式继承的原型链是实例.__proto__ 指向寄生中间对象.prototype，寄生中间对象.__proto__ 再指向父类.prototype，中间多了个寄生对象，这样修改子类的原型方法也不会影响到父类，因为中间还有一个寄生对象，子类修改原型属性其实是修改的寄生对象的属性。

function Parent(name) {
  this.name = name;
  this.friends = ["xiaowang", "laowang"];
}
Parent.prototype.say = function () {
  console.log(this.name);
}
function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}
// 注意与组合继承的区别
var F = function () { }
F.prototype = Parent.prototype;
Child.prototype = new F();
var child7 = new Child("xiaohong", 18);
console.log(child7)

blog12

封装一下：

function object(o) {
  function F() { }
  F.prototype = o;
  return new F();
}
function prototype(child, parent) {
  var prototype = object(parent.prototype);
  prototype.constructor = child;
  child.prototype = prototype;
}
prototype(Child, Parent);