ES5之前的构造函数

function MathHandle(x, y) {this.x = xthis.y = y}MathHandle.prototype.add = function () {return this.x + this.y}var m = new MathHandle(1, 2)typeof MathHandle // 'function'MathHandle.prototype.constructor === MathHandle // truem.__proto__ === MathHandle.prototype // true

 

ES6  class重写

class MathHandle {    constructor(x, y) {        this.x = x        this.y = y    }    add() {        return this.x + this.y    }}const m = new MathHandle(1, 2)console.log(typeof MathHandle)  // 'function'console.log(MathHandle.prototype.constructor === MathHandle)  // trueconsole.log(m.__proto__ === MathHandle.prototype)  // true

从以上可以看出ES6的class只是ES5构造函数的语法糖

---

ES5简单继承实现

// 动物function Animal() {    this.eat = function () {        alert('Animal eat')    }}// 狗function Dog() {    this.bark = function () {        alert('Dog bark')    }}// 绑定原型，实现继承Dog.prototype = new Animal()var hashiqi = new Dog()hashiqi.bark()hashiqi.eat()

ES6继承的实现

class Animal {    constructor(name) {        this.name = name    }    eat() {        alert(this.name + ' eat')    }}class Dog extends Animal {    constructor(name) {        super(name)   // 注意 ！！！        this.name = name    }    say() {        alert(this.name + ' say')    }}const dog = new Dog('哈士奇')dog.say()//哈士奇saydog.eat()//哈士奇eat

---

Class 在语法上更加贴合面向对象的写法

Class 实现继承更加易读、易理解

更易于写 java 等后端语言的使用

本质还是语法糖，使用 prototype

 2019-05-09