ES6 类class

JavaScript语言的传统方法是通过构造函数，定义并生成新对象，

prototype属性使您有能力向对象添加属性和方法。

下面是通过传统的方式创建和使用对象的案列:

function MatHandle(x, y){
    this.x = x
    this.y = y
}
MatHandle.prototype.add = function(){
    return this.x + this.y
}
var m = new MatHandle(1, 2) 
m.add() //3

ES6引入了Class（类）这个概念,作为对象的模板,通过class关键字,可以定义类。

基本上ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,

新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

上面的代码用ES6的“类”改写,就是下面这样:

class MatHandle{
    constructor(x, y){
        this.x = x
        this.y = y
    }
    add(){
        return this.x + this.y
    }
}
const m = new MatHandle(1, 2)
m.add() //3

上面代码定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。

console.log(typeof MatHandle) //function
//这个类本身就等于ES5的函数(function)
console.log(MatHandle.prototype.constructor === MatHandle) //true
//类中的prototype.constructor的原型 就等于 MatHandle 类的本身
console.log(m.__proto__ === MatHandle.prototype) //true
//实例化的M 隐式原型(__proto__) 就等于 类的显示原型prototype

//综合上述的结果 证明了ES6中的class 相对于 ES5中的构造函数是一个语法糖

ES6 类class

推荐阅读更多精彩内容