javascript 继承

• es5继承

function Food() {
    this.type = 'food食物'
}

Food.prototype.getType = function () {
    return this.type
}

function Vegetables(name) {
    this.name = name
}

Vegetables.prototype = new Food()
const tomato = new Vegetables('tomato')
console.log(tomato.getType())

• es6 的继承

class Parent {
    // 在parent的构造函数中添加的任意属性，都会添加到子类的constructor上
    constructor(name) {
        this.name = name
    }
    getName() {
        return this.name
    }
    static getNames() {
        return this.name
    }
}

class child extends Parent {
    constructor(name, age) {
        super(name)
        this.age = age
    }
}

const newChild = new child('wanghui', 25)
console.log(newChild, newChild.name, newChild.getName())
console.log(newChild instanceof child, newChild instanceof Parent) // 使用继承父类的子类创建的实例，既是父类的实例，也是子类的实例
console.log(child.getNames()) // 子类也可以继承父类的静态方法

// Object.getPrototypeOf() 获得指定对象的原型
console.log(Object.getPrototypeOf(child) === Parent)

• super 作为对象和函数使用

/**
 * 1. 作为函数使用
 * @description {代表父类的构造函数constructor，super作为子类继承传递的参数和父类constructor传递的参数是一样的}
 * 规定在子类中必需写super()函数,没有参数可以不传递参数，调用super()之后，才可以在下边使用this
 * super() 函数只能在constructor构造函数中调用，在其他地方调用会报错
 * 
 */

/**
 * 2. 做为对象使用
 * 在普通方法中，指向的是父类的原型对象
 * 在静态方法中，指向的是父类
 */

class Father {
    constructor() {
        this.type = '爸爸'
    }
    getName() {
        return this.type
    }
}

Father.getType = () => {
    return 'I am father'
}

class Son extends Father {
    constructor() {
        super()
        this.type = '儿子'
        // console.log('1111', super.getName())
    }
    getFatherName() {
        console.log('2222', super.getName())
    }
    static getFatherType() {
        console.log('3333', super.getType())
    }
    sonPrint() {
        super.getName()
    }
}

const S = new Son()
// S.getFatherName()
// Son.getFatherType()
// console.log(S.sonPrint())

/**
 * @description {es6 的类和 es5 的构造函数在实现继承的机制上是存在差异的}
 * 1. es5的继承是先创建子构造函数的this,然后在将父类的方法、属性添加到this上
 * 2. es6的类是先从父类取到实例对象this,然后在调用super函数之后，将子类的属性和方法添加到this上
 */