概述
在es6之前,大家一般使用构造函数去生成实例对象,在es6发布后,大家可以选择使用class来的方式来定义一个类,同样也可以使用new关键字去生成这个类的实例对象。今天我们来分析一下es5中function方法和es6中使用class类定义时的差别对比。
写法区别
function 写法
function Foo(a,b){
//实例属性
this.a = a;
this.b =b;
}
//实例方法
Foo.protoType.add = function(){
return this.a+this.b
}
//静态属性(不会被实例继承,可以被子类继承或者super调用)
Foo.staticAttr = 1;
//静态方法 (function中没有静态方法的说法,此为模拟实现)
Foo.classStaticMethod() {
return 'hello static method';
}
class写法
class Foo {
//实例属性1
foo = "new write type"
constructor(a,b) {
//实例属性2
this.a = a;
this.b =b;
}
//实例方法
add(){
return this.a+this.foo
}
//静态属性(不会被实例继承,可以被子类继承或者super调用)
static staticAttr = 1;
//静态方法 (不会被实例继承,可以被子类继承或者super调用
static classStaticMethod() {
return 'hello static method';
}
//私有属性 (只能在类中使用,不会被继承)
#priAttr = 'this is a private attr';
//私有方法 (只能在类中使用,不会被继承)
#priAttrMethod(){
consolo.log('this is a private attr;')
}
}
当我们使用new 创建一个实例对象的时候, class中的构造函数constructor会立刻执行,函数中function Foo()函数会被立即执行。
类的本质
类本质上就是一个函数。
typeof Foo // 'function'
类原型对象的构造函数指向类本身
Foo === Foo.prototype.constructor //true
类实例对象的构造函数指向类本身
foo.constructor === Foo === Foo.prototype.constructor //true