开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第2天,点击查看活动详情
ES6新特性-class
今天继续来学习ES6的新特性:class关键字,它用于实现部分类似面向对象编程的特性。
但他本质上还是个function,class关键字是个语法糖,只是为了简化对象原型的写法,他还是通过原形链和语法糖来实现的。
基本用法
class Student {
}
let student = new Student()
console.log(student) // Student
大致用法与我们所常用的面向对象语言没有什么区别。
构造方法
当我们使用new关键字时,会默认调用类中的constructor方法,即构造方法,当没有显性创建constructor时,会默认创建一个空参数的构造方法。
class Student {
constructor(name,age) {
this.name = name
this.age =age
}
}
let student = new Student("Tom",18)
console.log(student.name,student.age)
不过需要注意,与其他语言不同的是,类中同时只能有一个constructor方法存在,当定义多个构造方法时会出现以下错误。这也可以理解,因为本质上他还是个方法,当出现方法重载时,JS并不知道选择哪一个。
Uncaught SyntaxError: A class may only have one constructor
当一个类存在父类时,在构造方法需要显性调用super关键字,来调用父类的constructor方法。
需要注意,ES6并不会对变量进行提升,即浏览器是按顺序加载代码的,因此子类必须在父类后面声明、先声明类才能创建对应的对象。
class People {
}
class Student extends People{
constructor(name,age) {
super()
this.name = name
this.age =age
}
constructor(name) {
}
}
同时在子类构造方法中,必须要先调用super方法才能使用this关键字,否则会抛出一个错误
Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor...
静态方法
在class类中方法的定义就无需function关键字,当我们对方法加上static关键字时,该方法就变成了静态方法。
静态方法只能被类本身调用,需要注意对象是无法调用的,这与大多数其他面向对象语言的静态方法不一致
class Student {
static say() {
return 'hello';
}
}
Student.classMethod() // 'hello'
var student = new Student();
student.say()
// TypeError: student.say is not a function
get和set函数
在class中可以使用get和set关键字,对属性添加进行读取和存储操作函数,用于拦截属性得读取和存储的行为。
class People {
get name(){
return "Tom"
}
set name(value){
console.log(value)
}
}
people = new People()
console.log( people.name ); // Tom
people.name = "Jerry"; // Jerry