ES2015 类 class 语法

时间:2023-03-09 04:16:43
ES2015 类 class 语法

在ES2015之前,定义类的方法只能通过原型链来模拟

function Animal(family,species) {
this.family = family;
this.species = species;
};
Animal.prototype.yell = function() {
console.log(this.family);
}
let dog = Animal('dogs','four feet');

而在ES2015中可以使用class关键字来定义类,使用constructor来定义类创建时所需的参数,直接定义函数来创建类方法:

class Animal {
constructor (family,species) {
this.family = family;
this.species = species;
};
yell () {// 等于Animal.prototype.yell = function(){}
return this.family;
}
} const dog = new Animal('dog','four feet');

在类定义中可以看到yell的方法没有使用键值对的方式,这也是ES6中新引入的对象字面量扩展,等同于:

const Animal= {
yell: function() {
return this.family;
}
}

类 + promise

class Point {
constructor (x, y) {
this.x = x;
this.y = y;
};
moveright(step) {
return new Promise(resolve => resolve({
x: this.x + step,
y: this.y
}))
}
}
const p = new Point(2,5);

定义一个点类,拥有moveright的方法,返回的使一个Promise,利用箭头函数调用resolve,使Promise状态转换到onFulfilled。

p.moveright(3)
.then(({x, y}) => console.log(`${x}, ${y}`));//5,5

这里的{x,y} 用了ES6的新语法解构,将返回的对象中的x和y键对应的值返回。

下面讲讲类的继承,在函数中的继承有很多种继承方式,具体的继承方式我会在我的博客中更新。

创建一个Point2D类

class Point2D {
constructor(x,y) {
this.x = x;
this.y = y;
}
toString() {
console.log('2d function');
return `${this.x},${this.y}`;
}
};

创建Point3D类并继承Point2D,核心关键字extends, super

class Point3D extends Point2D {
constructor(x,y,z) {
super(x,y);// 如果没有super,则在constructor中不能使用this,其他方法中可以。
this.z = z;
}
toString(){
super.toString();
return `${this.x},${this.y},${this.z}`;
}
};

这样的继承方式比使用function继承来的更为直接和方便。

最后测试:

const p = new Point3D(1,2,3)
p.toString()

输出为:

ES2015 类 class 语法

这样使用super便实现了对父类方法的继承。