ES6基本的语法(八) Class

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()