ES6-Class

发表于 |

Class Syntax in ES6

概述

在ES6中，可以通过Class来声明构造函数，可以认为Class是过去构造器写法的一种语法糖

1
2
3
class a {}
typeof a;    //"function"

声明语法

在Class中，依然存在prototype，依然是通过new关键字来声明一个实例

1
2
3
4
5
6
7
8
9
10
11
12
class Point {
    //constructor类似于之前的构造函数，实例变量在此声明
    //事实上constructor方法在prototype上，指向类本身，与ES5一致
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    //实例方法，此处是声明在prototype上,可以采用表达式作为函数名
    toString() {
        //......
    }
}

ES6不一致行为

  1. 在类内部(如上面的toString)定义的方法，在ES6中默认为不可枚举的，而ES5中prototype上的方法是可枚举的
1
2
3
4
//ES 6
Object.keys(Point.prototype);   // []
//ES 5
Object.keys(Point.prototype);   // ["toString"]

  1. 用Class声明的类必须使用new实例化，不能直接当作函数调用，否则报错

  2. 为了保证子类声明在父类之后，Class不存在变量提升

立即执行Class

1
2
3
4
5
6
7
8
let person = new class {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}('张三');

绑定实例方法上下文

实例方法执行时可能会丢失他指向的this(默认是该实例)

1
2
3
const logger = new Logger();
const { printName } = logger;
printName(); // TypeError: Cannot read property 'print' of undefined

解决方法有2:

  1. this.printName = this.printName.bind(this)
  2. 使用箭头函数，箭头函数捕获上下文