js 实现继承 ES5、ES6

ES5 实现继承

1、 首先实现一个父类

function Animal(legsNumber) {
    this.legsNumber = legsNumber;
}

Animal.prototype.kind = '动物';

2、然后再实现一个子类

function Dog(name) {
    this.name = name;
}

Dog.prototype.kind = '狗';

子类要想继承父类，也就是子类需要获取到父类的属性，并且子类的原型的 __proto__ 需要和父类的原型链接起来。

所以就需要下面着段代码：

Dog.prototype.__proto__ = Animal.prototype

但是这行代码被浏览器禁掉了，因为标准还没有出来之前，各个浏览器实现的方式不一样，也就是浏览器不一定有 __proto__ 这个属性。 所以需要借助 new 来实现相同的效果

let emptyAnimal = function () {};
emptyAnimal.prototype = Animal.prototype; // 这行代码相当于用 emptyAnimal 替换掉了 Animal 的函数体内容，这样就可以使用 new 去连接 Dog() 的原型和 emptyAnimal() 的原型，相当于连接了 Dog() 的原型和 Animal() 的原型
Dog.prototype = new emptyAnimal();

最后：

const dog1 = new Dog('大黄');
console.log(dog1.legsNumber) // 4

ES6

class Animal {
    constructor(legsNumber) {
        this.legsNumber = legsNumber
    }

    run() {
        console.log('run');
    }
}


class Dog extends Animal {
    constructor(name) {
        super(4);
        this.name = name
    }

    say() {
        console.log('hello', `${this.legsNumber}条腿，名字是${this.name}`)
    }
}


const dog1 = new Dog('大黄');
console.dir(dog1)
dog1.run()
dog1.say()