javascript高级程序设计---6继承

时间 2020-01-15

原文原文链接

继承对象

主要实现原理：经过原型链继承~~~~

因此先来了解下原型链app

Child.prototype.__proto__ === Parent.prototype;
Child.__proto__ === Parent;

Parent是Function的实例。

Parent.__proto__ === Function.prototype;
Function.prototype.__proto__ === Object.prototype;

全部函数的默认原型都是Object的实例。

Parent.prototype.__proto__ === Object.prototype;
Object.prototype.__proto__ === null;

继承的原型链图

继承模式总结比较

继承模式	优势	缺点	能够用instance或者isPrototypeOf判断类型吗
原型链基础	Child.prototype = new Parent();重写了原型链继承了Parent的方法	一、Parent类型的实例变成了Child类型的原型对象，若是Parent有引用类型好比Array的属性会被篡改二、建立Child类型的实例时，不能向Parent的构造函数传参	能够
借用构造函数（伪造对象或经典继承）	解决了引用属性共享和不可传参	没法复用函数	能够
组合继承（伪经典继承）	结合了原型链和构造模式，最经常使用	老是会调用两次超类型构造函数	能够
原型式继承	简单轻量，不复杂，适合简单需求	会共享引用类型的值，篡改	不能够
寄生式继承	替代不是自定义和构造函数的状况	不能函数复用	不能够
寄生组合式继承	最理想的继承范式		能够

0、类式继承的方案

class Parent {
  constructor(name){
    this.name = name;
  }

  static sayHello() {
    console.log('hello');
  }
  sayName() {
    console.log(`my name is ${this.name}`);
    return this.name;
  }
}

class Child extends Parent {
  constructor (name, age) {
    super(name);
    this.age = age;
  }
  sayAge() {
    console.log(`my age is ${this.age}`);
    return this.age;
  }
}

let parent = new Parent('Parent');
let child = new Child('Child', 18);

console.log(parent);
console.log(child);

console.log(child.__proto__ === Child.prototype);
console.log(Child.prototype.constructor === Child);
console.log(Child.prototype.__proto__ === Parent.prototype); // 继承的原理1

console.log(Parent.prototype.constructor === Parent);
console.log(Parent.prototype.__proto__ === Object.prototype);
console.log(Object.prototype.__proto__ === null);


console.log(Child.__proto__ === Parent); // 继承的原理2
console.log(Parent.__proto__ === Function.prototype);
console.log(Function.prototype.__proto__ === Object.prototype);
console.log(Object.prototype.__proto__ === null);

一、经过原型链实现继承---实现继承的主要方法。基本思想：让一个引用类型继承另外一个引用类型的属性和方法。

实现的本质是重写原型对象，代之以一个新类型的实例。由于重写了原型对象，因此给原型添加方法必定要放在替换原型的后面，若是先添加再替换，新添加的都被替换走了，因此永远也不会生效了。函数

function Parent () {
   this.parentProperty = true;
 }
 Parent.prototype.getParentProperty = function () {
   console.log(`parent's ${this.parentProperty}`);
 }

 function Child() {
   this.childProperty = false;
 }

 Child.prototype = new Parent(); // 本质---重写原型对象

 Child.prototype.getChildProperty = function () {
   console.log(`child's${this.childProperty}`);
 }

 const parentInstance = new Parent();
 console.log(parentInstance.constructor); // Parent{}  

 const childInstance = new Child();
 console.log(childInstance.constructor); // Parent{} 致使childInstance的constructor指向Parent
 childInstance.getParentProperty(); // parent's true

肯定原型和实例的关系

// 法一：instanceof
 console.log(childInstance instanceof Child);
 console.log(childInstance instanceof Parent);
 console.log(childInstance instanceof Object);
// 法二：isPrototypeOf
 console.log(Child.prototype.isPrototypeOf(childInstance));
 console.log(Parent.prototype.isPrototypeOf(childInstance));
 console.log(Object.prototype.isPrototypeOf(childInstance));

不能使用对象字面量建立原型方法。this

// yes
Child.prototype = new Parent();
// no。这样作新建了一个Object实例，而非Parent的实例，切断了与Parent的联系。
Child.prototype = {
};

二、借用构造函数：在Child类型构造函数的内部调用Parent类型构造函数。

函数是特定环境中执行代码的对象，能够经过call和apply在新建立的对象上执行构造函数。spa

function Parent (name) {
   this.colors = ['red', 'green'];
   this.name = name;
   this.age = 99;
 }

 function Child(name){
   // 继承了Parent
   Parent.call(this, name);

   // 添加Child的属性，必定要在调用Parent的后面，否则会被Parent构造函数重写属性（若是正好存在）
   this.age = 29;
 }

 const childInstance1 = new Child('tom');
 const childInstance2 = new Child('jack');

 childInstance1.colors.push('white');

 console.log(childInstance1.colors); // ['red', 'green', 'white']
 console.log(childInstance2.colors); // ['red', 'green']

 console.log(childInstance1.name); // tom
 console.log(childInstance2.name); // jack

 console.log(childInstance1.age); // 29
 console.log(childInstance2.age); // 29

 console.log(childInstance2 instanceof Child); // true
 console.log(childInstance2 instanceof Parent); // false
 console.log(childInstance2 instanceof Object); // true

三、组合继承：组合使用原型链和构造函数模式

使用原型链实现对原型属性和方法的继承（复用）；使用构造函数实现对实例属性的继承（副本）prototype

function Parent (name) {
 this.colors = ['red', 'green'];
 this.name = name;
}

Parent.prototype.getParentName = function () {
 console.log(this.name);
}

function Child(name, age){
 // 构造函数继承属性
 Parent.call(this, name);

 this.age = age;
}

// 使用原型链继承方法
Child.prototype = new Parent();
Child.prototype.constructor = Child;

Child.prototype.getChildAge = function () {
 console.log(this.age);
}

const childInstance1 = new Child('tom', 29);
const childInstance2 = new Child('jack', 18);

childInstance1.colors.push('white');

console.log(childInstance1.colors); // ['red', 'green', 'white']
console.log(childInstance2.colors); // ['red', 'green']
childInstance1.getParentName(); // 'tom'
childInstance2.getParentName(); // 'jack'

childInstance1.getChildAge(); // 29
childInstance2.getChildAge(); // 18

console.log(childInstance2 instanceof Child); // true
console.log(childInstance2 instanceof Parent); // true
console.log(childInstance2 instanceof Object); // true

四、原型式继承

借助原型基于已有的对象建立新对象，同时还没必要所以建立自定义类型code

// object对传入其中的对象进行了一次浅复制
 function object (o) {
   function F() {}
   F.prototype = o;
   return new F();
 }

 const person = {
   name: 'tom',
   friends: ['a', 'b', 'c']
 };

 const anotherPerson = object(person);

 anotherPerson.name = 'huahua';
 anotherPerson.friends.push('d');
 const onePerson = object(person);

 console.log(person.friends); // ['a', 'b', 'c', 'd']
 console.log(anotherPerson.friends); // ['a', 'b', 'c', 'd']
 console.log(onePerson.friends); // ['a', 'b', 'c', 'd']

ECMAScript5新增了Object.create方法，规范了原型式继承。

五、寄生式继承：建立一个仅用于封装继承过程的函数，在内部加强对象。

function createAnother(original) {
   const clone = object(original);

   clone.sayHi = function () {
     console.log('hi');
   }

   return clone;
 }

 const person = {
   name: 'tom',
   friends: ['a', 'b', 'c']
 };

 const anotherPerson = createAnother(person);
 anotherPerson.sayHi();

 anotherPerson.friends.push('e');

 console.log(anotherPerson.friends); // ['a', 'b', 'c', 'e']
 console.log(person.friends); // ['a', 'b', 'c', 'e']

六、寄生组合式继承

没必要为了指定Child类型的原型而调用Parent类型的构造函数，须要的只是Parent原型的一个副本。

// object对传入其中的对象进行了一次浅复制
  function object (o) {
    function F() {}
    F.prototype = o;
    return new F();
  }

  function inheritPrototype (Sub, Super) {
    const prototype = object(Super.prototype); // 建立对象
    prototype.constructor = Sub; // 加强对象
    Sub.prototype = prototype; // 指定对象
  }

  function Parent (name) {
    this.name = name;
    this.colors= ['a', 'b', 'c'];
  }

  Parent.prototype.getParentName = function () {
    console.log(this.name);
  }

  function Child (name, age) {
    // 继承属性
    Parent.call(this, name);

    this.age = age;
  }

  // 继承方法
  inheritPrototype(Child, Parent);

  Child.prototype.getChildAge = function () {
    console.log(this.age);
  }

  const childInstance1 = new Child('tom', 29);
  const childInstance2 = new Child('jack', 18);

  childInstance1.colors.push('white');

  console.log(childInstance1.colors); // ["a", "b", "c", "white"]
  console.log(childInstance2.colors); // ["a", "b", "c"]
  childInstance1.getParentName(); // 'tom'
  childInstance2.getParentName(); // 'jack'

  childInstance1.getChildAge(); // 29
  childInstance2.getChildAge(); // 18

  console.log(childInstance2 instanceof Child); // true
  console.log(childInstance2 instanceof Parent); // true
  console.log(childInstance2 instanceof Object); // true