本人起初是Java开发出身,对于Java的类、继承等比较熟悉,在接触js的时候,对这门语言的原型、原型链始终不能很好的理解,ES6中类的出现,让我更好的对js的类实现和类继承有了更深的体会。(因为长得像啊)
- Class基本语法
构造函数:
JavaScript的传统方法是通过构造函数定义来生成对象的。
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.toString(){
return this.name + ":" + this.age
}
这种写法让我写惯了Java的人略微不适应,再看下ES6 Class的写法。
Class Person{
constructor(name,age){
this.name = name
this.age = age
}
toString(){
return this.name + ":" +this.age
}
}
这个写法就比较适应了,ES6的class可以看做是一种语法糖,相对传统的写法,只是换了一种形式而已,但更贴近与面向对象编程。
constructor是类的构造函数。
typeof Person //function
Person === Person.prototype.constructor //true
以上表明,类的数据类型就是函数,而类的本身就是指向自己的构造函数。
实例对象:
let person = Person('PanC',15) //error
let person = new Person('PanC',15) //success
生成一个对象的实例需要使用new命令。
无变量提升:
const person = new Person() //先使用
Class Person{} //后定义
上述写法是错误的,Class是不存在变量提升的,这与ES5是有差别的。
继承:
Class Man extends Person {
constructor(name,age,gender){
super(name,age) //必须先调用父类的构造函数!
this.gender = gender
}
toString(){
return super.toString() + ":" + this.gender
}
}
类的继承使用extends命令,需要注意的是,必须先使用super()调用父类的构造函数,否则会报错。
静态方法和静态属性:
Class Person{
static gender = 'male' //静态属性,这种写法ES6不支持,但Bable转码器已支持
constructor(name,age){
this.name = name
this.age = age
}
static toString(){ //静态方法
return 'abc'
}
}
Person.hight = '185cm' //静态属性,ES6只支持这种写法
Person.toString() // abc
Person.gender // male
Person.hight // 185cm
ES6明确指出类是只有静态方法,没有静态属性。