ES5 构造函数的写法:
function Point(x, y) {
this.x = x;
this.y = y;
}
ES6 引入了 Class(类),通过class
关键字,可以定义类。
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
这里,ES6 的 Point 类的构造方法对应前面 ES5 的构造函数 Point,代码中的 constructor
是构造方法。
关于 constructor
constructor
是类的默认方法,通过new
命令生成对象实例时,自动调用该方法。 一个类必须有constructor
方法,如果没有显式定义,一个空的constructor
方法会被默认添加: class Point { } // 等同于 class Point { constructor() {} }
生成类的实例与 ES5 一样,也是用 new
命令。
但构造函数的实例不用 new 也可以执行,而类必须用 new,否则会报错:
class Point {
// ...
}
// 报错
var point = Point(2, 3);
// 正确
var point = new Point(2, 3);
class Parent{
constructor(lastName='Liu'){
this.lastName=lastName;
}
}
class Child extends Parent{
}
console.log(new Child());
// 输出结果
class Parent{
constructor(lastName='Liu'){
this.lastName=lastName;
}
}
class Child extends Parent{
constructor(lastName){
super(lastName);
}
}
console.log(new Child('Chen'));
// 输出结果
与 ES5 一样,在“类”的内部可以使用 get 和 set 关键字,对某个属性设置取值函数和存值函数,拦截该属性的存取行为
class Parent{
constructor(name='Winnie'){
this.name=name;
}
get longName(){
return 'Liu'+this.name;
}
}
let getterName=new Parent();
console.log(getterName.longName); // LiuWinnie
class Parent{
constructor(name='Winnie'){
this.name=name;
}
get longName(){
return 'Liu'+this.name;
}
set longName(value){
this.name=value;
}
}
let setterName=new Parent();
setterName.longName='Honey';
console.log(setterName.longName); // LiuHoney
类相当于实例的原型,所有在类中定义的方法,都会被实例继承。
但如果在一个方法前加上 static 关键字,则该方法不会被实例继承,而是直接通过类来调用,这种方法称为静态方法。
class Parent{
static tell(){
console.log('hello');
}
tell(){
console.log('world');
}
}
Parent.tell(); // hello
以上代码还可以看出静态方法可以与非静态方法重名
class Parent {
}
Parent.lastName = 'Liu';
console.log(Parent.lastName); // Liu
上面代码为 Parent 类定义了一个静态属性 lastName