继承

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.引用类型的属性被所有实例共享
2.实例化子类Child时，无法向父类Person传参

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

原理：在子类型构造函数的内部调用父类型构造函数。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的模拟实现

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.包含引用类型的属性值会共享
2.修改person1.name时，是给person1添加新的name属性，而非覆盖person的name属性

寄生式继承

创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，再返回对象

function _create(o) {
  var obj = Object.create(o);
  obj.say = function () {
    console.log("hi");
  }
  return obj;
}
var person = {
  name: "xiaowang"
}
var person3 = _create(person);
person3.say() // hi

注意：每次创建对象都会创建一次方法

寄生组合式继承

寄生组合式继承是实现基于类型继承的最有效方式。只会调用一次父类型，避免了在父类型原型上创建多余的属性，同时原型链还保持不变。其本质上是使用寄生式继承来继承父类型的原型，然后再将结果指定给子类型的原型

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);