JavaScript继承

98 阅读1分钟

基于原型的继承

1、父类

// 父类构造方法
function Animal(name) {
    // 属性
    this.name = name
}

// 父类方法
Animal.prototype.echoName = function () {
    console.log(this.name);
}

2、子类

// 子类构造方法
function Dog(name, age) {
    // 调用父类构造函数
    Animal.call(this, name)
    this.age = age
}

// 子类继承父类的原型
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// 子类方法
Dog.prototype.sayHello = function () {
    console.log(this.name, this.age);
}

3、实例化

// 实例化父类
var animal = new Animal('Tom')
animal.echoName()

// 实例化子类
var dog = new Dog('Tom', 23)
dog.echoName()
dog.sayHello()

基于class的继承

1、父类

class Animal {
    // 构造方法
    constructor(name) {
        // 属性
        this.name = name
    }

    // 父类方法
    echoName() {
        console.log(this.name);
    }
}

2、子类

class Dog extends Animal {
    // 构造方法
    constructor(name, age) {
        // 调用父类构造函数
        super(name)
        this.age = age
    }
    sayHello() {
        console.log(this.name, this.age);
    }
}

3、实例化

// 实例化父类
var animal = new Animal('Tom')
animal.echoName()

// 实例化子类
var dog = new Dog('Tom', 23)
dog.echoName()
dog.sayHello()