ES6 Class
和 ES5 的对比和基本说明
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
};
const p = new Point(1, 2);
// 使用 class 之后
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
const p = new Point(1, 2);
上面的代码中定义了一个“类” 类名是 Point。constructor 是它的方法体。所以 p.constructor === Point.prototype.constructor
Class 基本语法
class Point {
toString() {
...
}
toValue() {
...
}
toKeys() {
...
}
// ES7 中的写法 ES6 不支持
name = "ccc"
}
var const = new Point(1, 2);
// 等同于
Point.prototype = {
toString(){},
toValue(){},
toKeys(){}
}
上面的 class 里面定义了一个 toString() 方法，在 Point 里面写的方法会直接写在原型上。在 ES6 在 class 里面直接赋值会报错，在 ES7 中不会。
静态方法
在前面加上 static 关键字，该方法不会被实例继承，只能使用。这种就叫静态方法
class Fun {
// 在前面加上 static 关键字，该方法不会被实例继承,只能使用
static name (){
return 'MyFun';
}
}
Fun.name(); // 'MyFun'
let fun = new Fun();
fun.name();
// TypeError: fun.name is not a function
上面的代码中，name 方法前有 static 关键字，表示 name 是一个静态方法，可以 Fun.name() 调用，而不是在 fun 调用。
继承和 super
class Fun {
static name (){
return 'MyFun';
}
}
class Box extends Fun {
}
Box.name() // 'MyFun'
上面代码中，Fun 有一个静态方法，Box 继承 Fun 之后可以调用这个方法。
可以使用 super，调用父类的静态方法。
class Fun {
static name (){
return 'MyFun';
}
}
class Box extends Fun {
static name () {
console.log(super.name() + ', ccc')
}
}
Box.name() // 'MyFun,ccc'
ES7 Class 的新特性
- static prop = xxx; 静态属性
- property = xxx; 私有属性
- @decortor 装饰器
静态属性和私有属性
我在上面文章说了，在 ES7 中可以直接 static prop = xxx 写静态属性，也可以 myName = 'ccc' 写私有属性
class Fun {
static name = 'ccc'; // 静态属性
constructor(){
this.keyValue = ''
}
myName = 'ccc'; // 私有属性
getCount(){
console.log('发送请求')
}
}
var fun = new Fun()
