js基于原型和class的面向对象-继承

本文不讲原理，直接上实例代码

一、基于原型的类继承 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的类继承

JavaScrip从ES6开始正式引入关键字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()

参考

1. 对象的继承
2. 面向对象编程