继承方法

构造函数/原型/实例的关系

每一个构造函数都有一个原型对象
原型对象都包含一个指向构造函数的指针
实例都包含一个指向原型对象的内部指针
  1. 借助构造函数实现继承
function Parent() {
    this.name = "Parent";
}
Parent.prototype.say = function () {
    console.log('hi');
};
function Child() {
    Parent.call(this);
    this.type = "Child";
}
new Child().say();    //not a function
重点:用call()、apply()将父类构造函数引入子类函数(在子类函数中做了父类函数的自执行(复制))
特点:a.只继承了父类构造函数的属性,没有继承父类原型的属性
      b.解决了原型链继承缺点1、2、3
      c.可以继承多个构造函数属性(call多个)
      d.在子实例中可向父实例传参
缺点:a.只能继承父类构造函数的属性
      b.无法实现构造函数的复用
      c.每个新实例都有父类构造函数的副本
  1. 借助原型链实现继承(弥补构造函数实现继承不足)
function Parent() {
    this.name = "Parent1";
    this.list = [1, 2, 3]
}
function Child() {
    this.type = "Child1";
}
Child.prototype = new Parent();
var c1 = new Child();
var c2 = new Child();
console.log(c1.list);   //[1,2,3]
c2.list.push(5);
console.log(c1.list);   //[1,2,3,5]
重点:让新实例的原型等于父类的实例
特点:实例可以继承的属性有:实例的构造函数的属性、父类构造函数属相、父类的原型属性。
缺点:a.新实例无法向父类构造函数传参
      b.继承单一
      c.所有新实例都会共享父类实例的属性(原型上的属性是共享的,一个实例修改了原型属性,另一个实例的原型属性也会被修改)
继承方法_第1张图片
借助原型链
  1. 组合方式(组合原型链和借用构造函数继承,常用)
function Parent() {
    this.name = "Parent";
    this.list = [1, 2, 3];
}
function Child() {
    Parent.call(this);    //借用构造函数模式
    this.type = "Child";
}
Child.prototype = new Parent();   //原型链继承
Child.prototype.constructor = Child;
var c3 = new Child();
var c4 = new Child();
console.log(c3.list);
c4.list.push(5);
console.log(c3.list);
重点:结合两种模式的优点,传参和复用
特点:可以继承父类原型链上的属性,可以传参,可复用。  
     每个新实例引入的构造函数属性都是私有的。
缺点:调用两次父类构造函数,子类的构造函数会代替原型上的那个父类构造函数。
  1. 组合式优化1
function Parent5() {
    this.name = "Parent";
    this.list = [1, 2, 3];
}
function Child5() {
    Parent5.call(this);    
    this.type = "Child";
}
Child5.prototype = Parent5.prototype;
var c7 = new Child5();
var c8 = new Child5();
c7.list.push(4);
console.log(c7 instanceof Child5, c7 instanceof Parent5);     //true true
console.log(c7.constructor);      //Parent5
缺点:无法区分一个对象是直接由它的子类实例化的,还是它的父类实例化的
继承方法_第2张图片
组合优化1
  1. 组合式优化2(常用)
    寄生:在函数内返回对象然后调用
    组合:函数的原型等于另一个实例;在函数中用call和call引入另一个构造函数,可传参。
function Parent5() {
    this.name = "Parent";
    this.list = [1, 2, 3];
}
function Child5() {
    Parent5.call(this);    //组合
    this.type = "Child";
}
Child5.prototype = Object.create(Parent5.prototype);     //寄生
Child5.prototype.constructor = Child5; 
var c7 = new Child5();
var c8 = new Child5();
c7.list.push(4);
console.log(c7 instanceof Child5, c8 instanceof Parent5);     //true true
console.log(c7.constructor);      //Child5
重点:修复了组合继承的问题
继承方法_第3张图片
组合优化2

你可能感兴趣的:(继承方法)