JS继承总结（小白友好篇）

继承的本质： 子类继承父类的属性和方法。（目的是让子类的实例能够调取父类的属性和方法。）

ES5中的继承

• 原型继承

  • 原理： 让父类中的属性和方法在子类实例的原型链上

    CHILD.prototype = new PARENT()

    CHILD.prototype.constrctor = CHILD

  • 特色：

    • 不像其余语言同样的继承（其余语言的继承是拷贝继承，会把父类的属性和方法拷贝到子类中，供子类调取使用），它是把父类的实例放在子类实例的原型链上，实例想调取这些方法，是基于__proro__原型链查找机制完成的。
    • 子类能够重写父类上的方法，会致使父类其余的实例也会收到影响。
    • 父类中私有或者公有的属性方法，最后都会变成子类中公有方法。

// 原型链继承举🌰
// 父类
function Parent(x) {
    this.x = x
} 
Parent.prototye.getX = function() {
    console.log(this.x)
}
// 子类
function Child(y) {
    this.y = y
}
// 继承
Child.prototype = new Parent('y') // 子类的原型指向父类的实例
Child.prototype.constrctor = Child // 保证子类构造函数的完整性
Child.prototype.getY = function() {
    console.log(this.y)
}
const child = new Child('x')
child.y // y 成功访问子类属性
child.x // x 成功访问父类属性
child.getX() // x 成功调用父类方法
child.getY() // y 成功调用子类自己方法

// 子类能够经过 CHILD.prototype.__proto__修改父类,并对父类的其余实例形成影响
Child.prototype.__proto__.other = function () {
    console.log('other')
}
const parent = new Parent(200)
parent.other() // other
复制代码

• CALL继承
  • 原理：
    • 在CHILD方法中把PARENT方法看成普通函数来执行，让PARENT中的this指向CHILD的实例，至关于给CHILD实例是设置了不少私有的属性和方法
  • 特色：
    • 只能继承父类私有的属性和方法（由于是把PARENT看成普通函数执行，和其原型上的属性和方法没有关系）
    • 父类私有变为子类私有

// CALL继承举🌰
// 父类
function Parent(x) {
    this.x = x
    this.thisGetX = function () {
        console.log(this.x)
    }
}
Parent.prototype.getX = function () {
    console.log(this.x)
}
// 子类
function Child(y) {
    // this => Child的实例
    Parent.call(this, 200)
    this.y = y
}
Child.prototype.getY = function () {
    console.log(this.y)
}

const child = new Child(100)
console.log(child.x) // 成功访问父类属性
child.getX() // 报错 没法访问父类原型链上的属性和方法
复制代码

• 寄生组合继承
  • 原理： CALL继承+蕾相似原型继承
  • 特色：
    • 父类私有和公有的属性、方法分别是子类实例的共同和私有方法（推荐）

// 寄生组合继承举🌰
// 父类
function Parent(x) {
    this.x = x
    this.thisGetX = function () {
        console.log(this.x)
    }
}
Parent.prototype.getX = function () {
    console.log(this.x)
}

// 子类
function Child(y) {
    // this => Child的实例
    Parent.call(this, 200)
    this.y = y
}

// Object.create => 建立一个空对象，让空对象__proto__指向 Parent.prototype
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child
const child = new Child(100)
console.log(child.x) // 成功访问父类属性
child.getX() // 报错 没法访问父类原型链上的属性和方法

// 实现object.create方法
function create(obj) {
    function Fn() Fn.prototype = obj return new Fn() } 复制代码

ES6中的继承

• class
  • 原理： class CHILD extends Parent {} => CHILD.prototype._ proto_ = PARENT.prototype
  • 特色：
    • 子类继承父类能够不屑constructor,一旦写了，constructor内的第一句话必须是super(), super() 的做用相似call继承。

// 父类
// ES6中基于class创造出来的类不能看成普通函数执行、不容许重定向原型的指向
class Parent {
    constructor(x) {
        this.x = x
    }
    getX() {
        console.log(this.x)
    }
}
// 子类
// class Child {
// constructor(y) {
// this.y = y
// }
// getY() {
// console.log(this.y)
// }
// }
// ES6中的继承 
class Child extends Parent {
    constructor(y) {
        super(200)
        this.y = y
    }
    getY() {
        console.log(this.y)
    }
}
const child = new Child(100)
console.log(child.x) // 成功访问父类属性
child.getX() // 成功调用父类方法
复制代码