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中的构造函数是一个语法糖