1. 创建 class
    1. class declarations
    2. class expression
  2. constructor
  3. 公有属性/方法
  4. 静态属性/方法
  5. 私有属性/方法
  6. super 关键字
  7. class 的本质
    1. 子类继承
  8. 一些坑
  9. 参考

class

Es6 开始引入了 class 关键字,其本质是基于构造函数和原型链继承的语法糖.

创建 class

有两种方法创建 class, class declartions(类声明) 和 class expression(类表达式).

class declarations

1
class Foo {}

class declarations 必须有类名,否则会报错 SyntaxError.

1
class {} // SyntaxError: Unexpected token {

和 let const 一样, class 不会被提升到作用域顶部, 也会形成 temporal dead zone(暂时性死区, 就是没创建前不能用).

1
2
console.log(Foo); // ReferenceError: Foo is not defined
class Foo {}

因为 temporal dead zone 的影响, 未声明 class 前就用 typeof 的话会报错.

1
typeof Foo; // "undefined"
1
2
typeof Foo; // ReferenceError: Foo is not defined
class Foo {}

class 内默认为 strict mode(严格模式)

1
2
3
4
5
6
class Foo {
constructor() {
i = 1;
}
}
new Foo(); // ReferenceError: i is not defined

class expression

1
2
3
let Foo = class {};
// or
let Bar = class Foo {};

class expression 可以没有类名. 如果有类名, 则这个类名只能在类中使用,不能在类外面使用.

1
2
3
4
5
6
7
8
let Foo = class Bar {
static printBar() {
console.log(Bar);
}
};
Foo.printBar(); // class Bar { ...
// 访问不到
console.log(Bar); // ReferenceError: Bar is not defined

const 和 let 声明的 class 不会被提升到作用域顶部.

1
2
console.log(Foo); // ReferenceError: Foo is not defined
let Foo = class {};

但如果用了 var, class expression 会被提升.

1
2
console.log(Foo); // undefined
var Foo = class {};

constructor

constrcutor 方法是 class 内的特有方法, 用于初始化对象.

1
2
3
4
5
6
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}

等价于

1
2
3
4
5
6
7
8
9
function Person(name, age) {
if (!(this instanceof Person)) {
throw TypeError(
"TypeError: Class constructor Foo cannot be invoked without 'new'"
);
}
this.name = name;
this.age = age;
}

当用 new 关键字调用 Person 时,会自动执行内部的 constructor 函数,然后返回一个对象.

1
2
let anna = new Person("anna", 18); // Person {name: "anna", age: 18}
console.log(anna.name);

公有属性/方法

属性:

1
2
3
4
5
6
7
8
9
10
11
class T {
foo = 1
}

// 等价于

class T {
constructor() {
this.foo = 1
}
}

方法

1
2
3
4
5
6
7
8
9
10
11
class T {
bar() {}
}

// 注意,公共方法绑定在 class 的 prototype 属性上, 不能等价于如下实现:

class T {
constructor() {
this.bar = function () {}// 绑定在实例对象上
}
}

静态属性/方法

静态属性/方法可以直接在 class 上调用,但不能在 class 的实例上调用.

1
2
3
4
5
6
7
8
class T {
static staticProperty = 1;
static staticMethod() {
return this.staticProperty;
}
}

console.log(T.staticMethod()); // 1

私有属性/方法只能通过 .propName 的形式访问, 不能通过 [propName] 的形式访问.

1
2
3
4
5
6
7
8
9
10
11
class T {
// 私有属性
#privateProperty = 1;
// 私有方法
get() {
return this['#privateProperty'];
}
}

t = new T();
console.log(t.get()); // undefined

私有属性/方法

当前私有属性/方法位于 Stage-3 阶段,需 配合 Babel 才能在浏览器环境中使用.
也可以在 node.js(>13.2.0) 中用 harmony 参数开启私有方法的支持.

1
node --harmony index.js

私有属性/方法只能在 class 的内部调用,在外面调用会报错.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class T {
// 私有属性
#privateProperty = 1;
// 私有方法
#privateMethod() {
return this.#privateProperty;
}
getPrivatePorperty() {
return this.#privateMethod();
}
}

t = new T();
console.log(t.getPrivatePorperty()); // 1
// 在 class 外调用私有属性会报错
console.log(t.#privateProperty) // SyntaxError: Private field '#privateProperty' must be declared in an enclosing class

super 关键字

super 关键字有两种调用方式:
1 super() 相当于调用父类的 constructor, 只能在子类的 constructor 中使用.在其他方法中这样用时会报错.
2 super.propName or super["propName"] 访问父类 prototype 属性上的方法(例外: 在静态方法中调用时指向父类自身)

例1:
在子类的 constructor 中调用 super

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Parent {
constructor(foo, bar) {
this.foo = foo;
this.bar = bar;
}
}

class Child extends Parent {
constructor(foo, bar) {
super(foo, bar);
}
}

new Child(1, 2);

例2:
用 super 把父类的方法绑定到子类实例上.

1
2
3
4
5
6
7
8
9
class Parent {
foo() {}
}

class Child extends Parent {
bar = super.foo;
}

new Child(); // Child {bar: ƒ}

如果子类中有 constructor 方法,则需要在 constructor 中手动调用 super. 在子类的 constructor 调用 super 之前,不可以访问 this.

正确的例子:

1
2
3
4
5
6
7
8
9
class Parent {}

class Child extends Parent {
constructor() {
super();
}
}

new Child();

错误的例子, 在调用 super 前访问了 this.

1
2
3
4
5
6
7
8
9
10
class Parent {}

class Child extends Parent {
constructor() {
console.log(this);
super();
}
}

new Child(); // ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

错误的例子, 没有调用 super

1
2
3
4
5
6
7
class Parent {}

class Child extends Parent {
constructor() {}
}

new Child(); // ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

没有 constructor 方法的话, 相当于默认自动在 constructor 调用了 super.

1
2
3
class Parent {}

class Child extends Parent {}

注意: super 是个关键字, 而非函数内的属性.不可以用如下方式调用 super

1
2
3
4
5
6
7
8
9
10
class Parent { }

class Child extends Parent {
constructor() {
super()
console.log(super) // SyntaxError: 'super' keyword unexpected here
}
}

let ci = new Child();

在子类的方法内调用 super 上的方法时, 调用的是父类对象的 prototype 属性上的方法(以下称: 方法 a).但此时方法 a 内的 this 指向子类实例.

constructor 内调用 super

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
class Parent {
constractor() {
this.name = "p";
}
// 调用的是这个
printName() {
console.log("parent function");
// 但是这个 this 会指向子类实例
console.log(this.name); // c
}
}

class Child extends Parent {
constructor() {
super();
this.name = "c";
super.printName(); // parent function // c
}
// 这个不会被调用
printName() {
console.log("child function");
console.log(this.name);
}
}

let ci = new Child();

普通方法内调用 super 方法, 和 constructor 一样.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
class Parent {
constractor() {
this.name = "p";
}
// 调用的是这个
printName() {
console.log("parent function");
// 但是这个 this 会指向子类实例
console.log(this.name); // c
}
}

class Child extends Parent {
constructor() {
super();
this.name = "c";
}
// 这个不会被调用
printName() {
console.log("child function");
console.log(this.name);
}
s() {
super.printName(); // parent function // c
}
}

let ci = new Child();
ci.s();

静态方法内的 super 指向父类对象, 所以没法访问到 prototype 上的方法(没找到时会去 __proto__ 上接着找). 但此时方法内的 this 指向子类对象.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class Parent {
name = "p";
static printName() {
console.log("parent function"); // parent function
console.log(this.name); // Child
}
}

class Child extends Parent {
name = "c";
static printName() {
console.log("child function");
console.log(this.name);
}
static s() {
super.printName();
}
}

Child.s();

class 的本质

class 是构造函数的语法糖,本质上也是个对象.

1
2
class T {}
console.log(typeof T); // function

和构造函数一样,class 也可以通过在 contructor 中返回一个对象,取代原本的 this.

1
2
3
4
5
6
7
8
9
10
11
12
class T{
constructor(){
this.foo = 1;
return {foo: 2};
}
getFoo() {
return this.foo
};
}
t = new T();
console.log(t.foo) // 2
t.getFoo // TypeError: t.getFoo is not a function

class 内的静态属性/方法(static 开头)绑在 class 对象上, 而普通方法绑在 class 对象的 prototype 属性上.

1
2
3
4
5
class T {
static foo() {}
bar() {}
}
console.dir(T);

158t785s45.PNG

相当于:

1
2
3
function T() {}
T.foo = function() {};
T.prototype.bar = function() {};

class 中的普通属性和私有属性绑定在 class 生成的实例对象(以下称为: 对象 a)上, 对象 a 可以通过 __proto__ 访问 class 的 prototype 属性,因此可以通过 对象 a 调用 class 的普通方法,但不能通过 对象 a 调用 class 的静态方法.

1
2
3
4
5
6
7
8
9
10
class T {
foo = 1;
#bar = 2;
getFoo() {
return this.foo;
}
}
const t = new T();
console.log(t); // T {foo: 1, #bar: 2}
t.__proto__; // {constructor: ƒ, getFoo: ƒ}

32b22e04.png

子类继承

通过子类生成实例时,父类和子类上的对象都会绑定在新生成实例对象上.

1
2
3
4
5
6
7
8
9
10
class Parent {
name = "p";
foo = "bar";
}

class Child extends Parent {
name = "c";
}
t = new Child();
console.log(t); // {name: "c", foo: "bar"}

相当于:

1
2
3
4
5
6
7
8
9
10
11
12
function Parent() {
this.name = "p";
this.foo = "bar";
}
function Child() {
Parent.call(this);
this.name = "c";
}
Object.setPrototypeOf(Child, Parent);
Object.setPrototypeOf(Child.prototype, Parent.prototype);
t = new Child();
console.log(t); // {name: "c", foo: "bar"}

子类实例 的方法绑定在 __proto__ 上, 也就是子类的 prototype 属性上.
子类的 prototype.__proto__ 属性指向父类的 prototype, 从而实现了方法的继承.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class Parent {
name() {
console.log("p");
}
foo() {}
}

class Child extends Parent {
name() {
console.log("c");
}
}
t = new Child();
t.__proto__.name(); // c
t.__proto__.__proto__.name(); // p

t.__proto__ === Child.prototype; // true
Child.prototype.__proto__ === Parent.prototype; // true
Child.__proto__ === Parent; // true

164d3695.png

相当于

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Parent() {}
Parent.prototype.name = function() {
console.log("p");
};
Parent.prototype.foo = function() {};

function Child() {}
Child.prototype.name = function() {
console.log("c");
};
Object.setPrototypeOf(Child, Parent);
Object.setPrototypeOf(Child.prototype, Parent.prototype);
t = new Child();
t.__proto__.name(); // c
t.__proto__.__proto__.name(); // p

t.__proto__ === Child.prototype; // true
Child.prototype.__proto__ === Parent.prototype; // true
Child.__proto__ === Parent; // true

一些坑

1 foo = 1 相当于 this.foo = 1.直接对 foo 取值会报错,不要把 class 的大括号内部当成函数的作用域.

1
2
3
4
5
class T {
foo = 1;
bar = `${foo}`;
}
t = new T(); // ReferenceError: foo is not defined

解决办法:

1
2
3
4
5
class T {
foo = 1;
bar = `${this.foo}`;
}
t = new T(); // {foo: 1, bar: "1"}

这就产生了一些歧义, 当 this 在等式左边的时候相当于 this.this .而在右边的时候还是 this 本身.

1
2
3
4
5
6
class T {
a = 0;
this = 1;
b = this.a;
}
t = new T(); // {a: 0, this: 1, b: 0};

2 当 name 是普通属性时, printName 中的 this 指向子类实例, this.name 值为 "child".

1
2
3
4
5
6
7
8
9
10
11
12
class Parent {
name = "parent";
printName() {
console.log(this.name);
}
}
class Child extends Parent {
name = "child";
}
c = new Child()
console.log(c.name); // child
console.log(c.printName()); // child

但是当 name 是私有属性时, printName 中的 this 还是指向子类实例, 但是获取到的 this.#name 却是父类上的.

1
2
3
4
5
6
7
8
9
10
11
12
class Parent {
#name = "parent";
printName() {
console.log(this); // child
console.log(this.#name); // parent
}
}
class Child extends Parent {
#name = "child";
}
c = new Child();
console.log(c.printName());

3 父类/子类的属性都绑定在实例对象上,方法绑定在类的 prototype 上.因此子类的方法可能会被父类的同名属性覆盖掉.
给子类加方法的时候一定要确保父类里没有同名的属性.

1
2
3
4
5
6
7
8
9
10
11
class Parent {
name = "parent"; // 这个 name 在实例对象上
}
class Child extends Parent {
#name = "child";
get name() { // 这个 name 在 prototype 上
return this.#name;
}
}
c = new Child();
console.log(c.name); // parent

158d885.PNG

同理, 父类上的方法也可能被子类的属性覆盖.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Parent {
#num = 0;
get num() { // 这个 name 在 prototype 上, 被子类的 num 覆盖了
return this.#num;
}
add(x) {
this.#num += x;
}
}
class Child extends Parent {
num = 5;
}
c = new Child();
console.log(c.num); // 5
c.add(1);
console.log(c.num); // 5
console.log(c) // Child {num: 5, #num: 1}

4 TypeScript 也有两个类似私有领域(#)的关键字: private protected, 和 # 的区别如下:
1 protected: 如果子类上有就用子类上的,否则用父类上的.
2 private: ts 不允许在子类上创建同名的 private,否则会报错.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class Parent {
protected foo = 'parent foo';
private bar = 'parent bar';
getFoo() {
return this.foo;
}
getBar() {
return this.bar;
}
}
class Child extends Parent {
protected foo = 'child parent';
// private bar = 'child bar'; // error: Class 'Child' incorrectly extends base class 'Parent'.
}

let p = new Parent();
console.log(p.getFoo()); // parent foo
console.log(p.getBar()); // parent bar
let c = new Child();
console.log(c.getFoo()); // child parent
console.log(c.getBar()); // parent bar

参考

Public and private class fields · V8
ES6 入门教程
Classes - JavaScript | MDN
ES6的子类有没有自己的this? - 知乎