ES5 定義構造函數(shù)

通過構造函數(shù)加屬性，通過原型加方法：

function MathHandle(x, y) {
    this.x = x;
    this.y = y;
}

MathHandle.prototype.add = function() {
    return this.x + this.y;
}

var m = new MathHandle(1, 2);
console.log(m.add());   // 3

ES6 Class語法

class MathHandle {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
        
    add() {
        return this.x + this.y;
    }
}

var m = new MathHandle(1, 2);
console.log(m.add());   // 3

class 實際上是語法糖，編譯后就是ES5中的構造函數(shù)：

typeof MathHandle;  // function
MathHandle === MathHandle.prototype.constructor;    // true
m.__proto__ === MathHandle.prototype  // true

實例的隱式原型 = 構造函數(shù)的顯式原型

ES5 繼承

將低級構造函數(shù)的原型賦值為高級構造函數(shù)的實例來實現(xiàn)繼承：

// 動物
function Animal() {
    this.eat = function () {
        alert('Animal eat')
    }
}

// 狗
function Dog() {
    this.bark = function () {
        alert('Dog bark')
    }
}

// 綁定原型，實現(xiàn)繼承
Dog.prototype = new Animal()

var hashiqi = new Dog()
hashiqi.bark()
hashiqi.eat()

ES6 class 繼承

通過 extends 關鍵字和 super 方法實現(xiàn)繼承：

class Animal {
    constructor(name) {
        this.name = name;
    }
    eat() {
        console.log(`${this.name} eat`);
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name);
        this.name = name;
    }
    say() {
         console.log(`${this.name} say`);
    }
}

const hashiqi = new Dog("哈士奇");
hashiqi.eat();
hashiqi.say();

本質還是語法糖，使用 prototype。