ES6 拾遗(8)

Class的基本用法

1. class表达式

直接通过class定义肯定没有错

class也可以使用表达式的形式定义, 类似函数

下面的代码中, 这个类的名字是MyPoint而不是Point, Point只在class内部的代码可用, 代指当前类

2. 类不存在变量提升,需要在定义之后才能使用

3. this的指向

类的方法内部如果含有this, 它将默认指向类的实例. 但是必须非常小心, 一旦单独使用该方法, 很可能会报错

const MyPoint = class Point{

  hello(){

    this.sayName("Lizhe");

  }

  sayName(name){

    console.log(name)

  }

};

let p = new MyPoint();

p.hello();

如果将方法hello单独导出并且使用会出现错误, 原因在于此时this的指向发生了改变, 所以此时的this不包含sayName

一个比较简单的解决方案是在构造函数中使用bind

4. setter 和 getter

ES6 明确规定, class内部只有静态方法, 没有静态属性

const MyPoint = class Point{

 

  get myname() {

    console.log("getter:"+this._myname)

    return this._myname;

  }

  set myname(value) {

    console.log("setter:"+value)

    this._myname = value;

  }

};

 

var p = new MyPoint();

p.myname = "Lizhe"

p.myname

下面这个例子更清晰一些, myname是变量, setMyName和getMyName均为方法,
不过比较奇葩的是set方法的调用是通过等号传参
get方法的调用不需要调用符()

Class的继承

class可以通过extends关键字实现继承

super在这里表示构造函数, 用来新建父类的this对象

子类必需在constructor方法中调用super方法, 否则新建实例时会报错, 这是因为子类没有自己的this对象, 而是继承父类中的this对象, 然后对其进行加工
如果不调用super方法, 子类就得不到this对象

super关键字

super这个关键字既可以当做函数使用, 也可以当做对象使用. 在这两种情况下, 它的用法完全不同

1. 第一种情况, super作为函数调用时, 代表父类的构造函数. ES6 要求, 子类的构造函数必需执行一次super函数
作为函数时, super() 只能用在子类的构造函数之中, 用在其他地方就会报错

2. 第二种情况, super作为对象时在普通方法中指向父类的原型对象; 在静态方法中指向父类
由于super指向父类的原型对象, 所以定义在父类实例上的方法或属性是无法通过super调用的