1. 90前端首页
  2. 前端开发
  3. JavaScript

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

 

继承对象

主要实现原理:通过原型链继承~~~~

所以先来了解下原型链

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;
  • 继承的原型链图

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

继承模式总结比较

继承模式优点缺点可以用instance或者isPrototypeOf判断类型吗
原型链基础Child.prototype = new Parent();重写了原型链继承了Parent的方法1、Parent类型的实例变成了Child类型的原型对象,如果Parent有引用类型比如Array的属性会被篡改 2、创建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);

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

  • 实现的本质是重写原型对象,代之以一个新类型的实例。因为重写了原型对象,所以给原型添加方法一定要放在替换原型的后面,如果先添加再替换,新添加的都被替换走了,所以永远也不会生效了。
     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));
  • 不能使用对象字面量创建原型方法。
    // yes
    Child.prototype = new Parent();
    // no。这样做新建了一个Object实例,而非Parent的实例,切断了与Parent的联系。
    Child.prototype = {
    };

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

  • 函数是特定环境中执行代码的对象,可以通过call和apply在新创建的对象上执行构造函数。
     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

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

  • 使用原型链实现对原型属性和方法的继承(复用);使用构造函数实现对实例属性的继承(副本)
    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

4、原型式继承

  • 借助原型基于已有的对象创建新对象,同时还不必因此创建自定义类型
    // 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方法,规范了原型式继承。

5、寄生式继承:创建一个仅用于封装继承过程的函数,在内部增强对象。

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\']

6、寄生组合式继承

  • 不必为了指定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

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000021584893

展开阅读全文

发表评论

登录后才能评论