class
简介
基本上,ES6 的class
可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class
写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
类的数据类型就是函数,类本身就指向构造函数
事实上,类的所有方法都定义在类的prototype
属性上面。
class Point {
constructor() {
// ...
}
toString() {
// ...
}
// 方法与方法之间不需要逗号分隔,加了会报错。
toValue() {
// ...
}
}
// 等同于
Point.prototype = {
constructor() {},
toString() {},
toValue() {},
};
因此,在类的实例上面调用方法,其实就是调用原型上的方法。
prototype
对象的constructor()
属性,直接指向“类”的本身
类的内部所有定义的方法,都是不可枚举的,但如果直接在原型对象上添加方法是可以被枚举的。
基本用法
constructor 方法
constructor()
方法是类的默认方法,通过new
命令生成对象实例时,自动调用该方法。
一个类必须有constructor()
方法,如果没有显式定义,一个空的constructor()
方法会被默认添加。
(类似于其他高级语言的构造函数)
constructor()
方法默认返回实例对象(即this
),完全可以指定返回另外一个对象。
与 ES5 一样,实例的属性除非显式定义在其本身(即定义在this
对象上),否则都是定义在原型上(即定义在class
上)。
与 ES5 一样,类的所有实例共享一个原型对象
取值函数和存值函数
与 ES5 一样,在“类”的内部可以使用get
和set
关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。
class MyClass {
constructor() {
// ...
}
get prop() {
return 'getter';
}
set prop(value) {
console.log('setter: '+value);
}
}
let inst = new MyClass();
inst.prop = 123;
// setter: 123
inst.prop
// 'getter'
存值函数和取值函数是设置在属性的 Descriptor 对象上的。
属性表达式
类的属性名,可以采用表达式。
let methodName = 'getArea';
class Square {
constructor(length) {
// ...
}
[methodName]() { // 这里用了表达式 就等于 GetArea(){}
// ...
}
}
Class 表达式
与函数一样,类也可以使用表达式的形式定义
const MyClass = class Me {
getClassName() {
return Me.name;
}
};
let inst = new MyClass();
inst.getClassName() // Me
Me.name // ReferenceError: Me is not defined
上面代码使用表达式定义了一个类。需要注意的是,这个类的名字是Me
,但是Me
只在 Class 的内部可用,指代当前类。在 Class 外部,这个类只能用MyClass
引用。
如果类的内部没用到的话,可以省略Me
const MyClass = class { /* ... */ };
采用 Class 表达式,可以写出立即执行的 Class。
let person = new class {
constructor(name) {
this.name = name;
}
sayName() {
console.log(this.name);
}
}('张三');
person.sayName(); // "张三"
实例属性的新写法
实例属性除了定义在constructor()
方法里面的this
上面,也可以定义在类的最顶层。
class IncreasingCounter {
_count = 0; // 实例属性定义在类的头部
get value() {
console.log('Getting the current value!');
return this._count;
}
increment() {
this._count++;
}
}
// 这种新写法的好处是,所有实例对象自身的属性都定义在类的头部,看上去比较整齐,一眼就能看出这个类有哪些实例属性。
注意点
-
严格模式
类和模块的内部,默认就是严格模式,所以不需要使用
use strict
指定运行模式。只要你的代码写在类或模块之中,就只有严格模式可用。考虑到未来所有的代码,其实都是运行在模块之中,所以 ES6 实际上把整个语言升级到了严格模式。 -
不存在提升
类不存在变量提升(hoist),这一点与 ES5 完全不同。
new Foo(); // ReferenceError class Foo {}
这种规定的原因与下文要提到的继承有关,必须保证子类在父类之后定义。
-
name 属性
由于本质上,ES6 的类只是 ES5 的构造函数的一层包装,所以函数的许多特性都被
Class
继承,包括name
属性。class Point {} Point.name // "Point"
-
Generator 方法
class Foo { constructor(...args) { this.args = args; } * [Symbol.iterator]() { // 返回一个 该类 的默认遍历器, for of会自动调用这个遍历器 for (let arg of this.args) { yield arg; } } } for (let x of new Foo('hello', 'world')) { console.log(x); } // hello // world
-
this 指向
类的方法内部如果含有
this
,它默认指向类的实例。但是,必须非常小心,一旦单独使用该方法,很可能报错。class Logger { printName(name = 'there') { this.print(`Hello ${name}`); } print(text) { console.log(text); } } const logger = new Logger(); const { printName } = logger; printName(); // TypeError: Cannot read property 'print' of undefined
上面代码中,
printName
方法中的this
,默认指向Logger
类的实例。但是,如果将这个方法提取出来单独使用,this
会指向该方法运行时所在的环境(由于 class 内部是严格模式,所以 this 实际指向的是undefined
),从而导致找不到print
方法而报错。解决方法
- 在构造方法中绑定
this
class Logger { constructor() { this.printName = this.printName.bind(this); } // ... }
-
使用箭头函数
class Obj { constructor() { this.getThis = () => this; } } const myObj = new Obj(); myObj.getThis() === myObj // true
-
使用 Proxy
- 在构造方法中绑定
静态方法和静态属性
静态方法
类相当于实例的原型,所有在类中定义的方法,都会被实例继承
如果在一个方法前,加上static
关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。
静态方法可以与非静态方法重名
如果在实例上调用静态方法,会抛出一个错误,表示不存在该方法
父类的静态方法,可以被子类继承
静态方法还可以从super
对象上调用的。
注意,如果静态方法包含this
关键字,这个this
指的是类,而不是实例。
静态属性
静态属性指的是 Class 本身的属性,即Class.propName
,而不是定义在实例对象(this
)上的属性。
class Foo {
}
Foo.prop = 1; // 为 类 定义了一个 静态属性 prop
Foo.prop // 1
目前,只有这种写法可行,因为 ES6 明确规定,Class 内部只有静态方法,没有静态属性。现在有一个提案提供了类的静态属性,写法是在实例属性的前面,加上static
关键字。
// 老写法
class Foo {
// ...
}
Foo.prop = 1;
// 新写法
class Foo {
static prop = 1;
}
静态块
静态属性的一个问题是,它的初始化要么写在类的外部,要么写在constructor()
方法里面。
ES2022 引入了 静态块(static block),允许在类的内部设置一个代码块,在类生成时运行一次,主要作用是对静态属性进行初始化。
class C {
static x = 1;
static {
this.x; // 1 静态块内部可以使用this
// 或者
C.x; // 1
}
}
除了静态属性的初始化,静态块还有一个作用,就是将私有属性与类的外部代码分享。
let getX;
export class C {
#x = 1;
static {
getX = obj => obj.#x;
}
}
console.log(getX(new C())); // 1
私有方法和私有属性
私有方法
-
在命名上 加以区分
class Widget { // 公有方法 foo (baz) { this._bar(baz); } // 私有方法 _bar(baz) { return this.snaf = baz; } // ... }
以
_
线来区分,私有公有 -
将私有方法移出类,因为类内部的所有方法都是对外可见的
class Widget { foo (baz) { bar.call(this, baz); } // ... } function bar(baz) { return this.snaf = baz; }
-
利用
Symbol
值的唯一性,将私有方法的名字命名为一个Symbol
值const bar = Symbol('bar'); const snaf = Symbol('snaf'); export default class myClass{ // 公有方法 foo(baz) { this[bar](baz); } // 私有方法 [bar](baz) { return this[snaf] = baz; } // ... };
目前,有一个提案,为class
加了私有属性。方法是在属性名之前,使用#
表示
私有属性
-
class IncreasingCounter { #count = 0; get value() { console.log('Getting the current value!'); return this.#count; } increment() { this.#count++; } }
上面代码中,
#count
就是私有属性,只能在类的内部使用(this.#count
)。如果在类的外部使用,就会报错。由于井号
#
是属性名的一部分,使用时必须带有#
一起使用,所以#x
和x
是两个不同的属性 -
这种写法不仅可以写私有属性,还可以用来写私有方法
-
私有属性不限于从
this
引用,只要是在类的内部,实例也可以引用私有属性
in 运算符
-
try...catch
结构可以用来判断是否存在某个私有属性 但很麻烦,因此 V8 引入了 in 运算符 -
in
也可以跟this
一起配合使用#prop in this
-
注意,判断私有属性时,
in
只能用在定义该私有属性的类的内部 -
子类从父类继承的私有属性,也可以使用
in
运算符来判断注意,
in
运算符对于Object.create()
、Object.setPrototypeOf
形成的继承,是无效的,因为这种继承不会传递私有属性
new.target 属性
new
是从构造函数生成实例对象的命令。ES6 为new
命令引入了一个new.target
属性,该属性一般用在构造函数之中,返回new
命令作用于的那个构造函数。如果构造函数不是通过new
命令或Reflect.construct()
调用的,new.target
会返回undefined
,因此这个属性可以用来确定构造函数是怎么调用的。
function Person(name) {
if (new.target !== undefined) {
this.name = name;
} else {
throw new Error('必须使用 new 命令生成实例');
}
}
// 另一种写法
function Person(name) {
if (new.target === Person) {
this.name = name;
} else {
throw new Error('必须使用 new 命令生成实例');
}
}
var person = new Person('张三'); // 正确
var notAPerson = Person.call(person, '张三'); // 报错
上面代码确保构造函数只能通过new
命令调用。
Class 内部调用new.target
,返回当前 Class。
需要注意的是,子类继承父类时,new.target
会返回子类。
利用这个特点,可以写出不能独立使用、必须继承后才能使用的类。
class Shape {
constructor() {
if (new.target === Shape) {
throw new Error('本类不能实例化');
}
}
}
class Rectangle extends Shape {
constructor(length, width) {
super();
// ...
}
}
var x = new Shape(); // 报错
var y = new Rectangle(3, 4); // 正确
注意,在函数外部,使用new.target
会报错。
class 继承
基本用法
Class 通过 extends 来实现继承
class Point {
}
class ColorPoint extends Point {
}
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // 调用父类的constructor(x, y)
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); // 调用父类的toString()
}
}
super关键字,表示父类的构造函数,用来新建父类的 this 对象
子类必须在constructor
方法中调用super
方法,否则新建实例时会报错。这是因为子类自己的this
对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用super
方法,子类就得不到this
对象。
ES5 的继承,实质是先创造子类的实例对象this
,然后再将父类的方法添加到this
上面(Parent.apply(this)
)。ES6 的继承机制完全不同,实质是先将父类实例对象的属性和方法,加到this
上面(所以必须先调用super
方法),然后再用子类的构造函数修改this
。
如果子类没有定义constructor
方法,这个方法会被默认添加,代码如下。也就是说,不管有没有显式定义,任何一个子类都有constructor
方法。
new 出来的 子类对象实例,也是父类对象的实例
最后,父类的静态方法,也会被子类继承
Object.getPrototypeof()
Object.getPrototypeOf
方法可以用来从子类上获取父类
因此,可以使用这个方法判断,一个类是否继承了另一个类
super 关键字
super
这个关键字,既可以当作函数使用,也可以当作对象使用。在这两种情况下,它的用法完全不同。
-
作为函数调用时,代表父类的构造函数
ES6 要求,子类的构造函数必须执行一次
super
函数。class A {} class B extends A { constructor() { super(); } }
注意,
super
虽然代表了父类A
的构造函数,但是返回的是子类B
的实例,即super
内部的this
指的是B
的实例,因此super()
在这里相当于A.prototype.constructor.call(this)
。作为函数时,
super()
只能用在子类的构造函数之中,用在其他地方就会报错 -
作为对象时,在普通方法中,指向父类的原型对象,在静态方法中指向父类
class A { p() { return 2; } } class B extends A { constructor() { super(); console.log(super.p()); // 2 } } let b = new B();
上面代码中,子类
B
当中的super.p()
,就是将super
当作一个对象使用。这时,super
在普通方法之中,指向A.prototype
,所以super.p()
就相当于A.prototype.p()
。这里需要注意,由于
super
指向父类的原型对象,所以定义在父类实例上的方法或属性,是无法通过super
调用的。ES6 规定,在子类普通方法中通过
super
调用父类的方法时,方法内部的this
指向当前的子类实例。最后,由于对象总是继承其他对象的,所以可以在任意一个对象中,使用
super
关键字。
类型的 prototype 属性 和 __proto__ 属性
Class 作为构造函数的语法糖,同时有prototype
属性和__proto__
属性,因此同时存在两条继承链。
- 子类的 __proto__ 表示构造函数的继承,总是指向父类
- 子类 prototype 的 __proto__ 属性,表示方法的继承, 总是指向父类的 prototype 属性 父类的原型
这两条继承链,可以这样理解:
作为一个对象,子类(B
)的原型(__proto__
属性)是父类(A
);
作为一个构造函数,子类(B
)的原型对象(prototype
属性)是父类的原型对象(prototype
属性)的实例
extends
关键字后面可以跟多种类型的值
class B extends A {
}
上面代码的A
,只要是一个有prototype
属性的函数,就能被B
继承。由于函数都有prototype
属性(除了Function.prototype
函数),因此A
可以是任意函数。
两种特殊情况
-
子类继承 Object 类
即 A 为 Object
此时,B 就是 Object 的复制,B 的实例就是 Object 的实例
-
不存在任何继承
此时,B 就是 一个普通函数,但是 B 调用后 返回一个空对象(object实例),所以 B的实例的 __proto__ 指向 Object.prototype
实例的 __proto__ 属性
子类的原型的原型,是父类的原型
因此,通过子类实例的__proto__.__proto__
属性,可以修改父类实例的行为。
原生构造函数的继承
原生构造函数是指语言内置的构造函数,通常用来生成数据结构。ECMAScript 的原生构造函数大致有下面这些。
- Boolean()
- Number()
- String()
- Array()
- Date()
- Function()
- RegExp()
- Error()
- Object()
以前,这些原生构造函数是无法继承的,比如,不能自己定义一个Array
的子类。
ES6 允许继承原生构造函数定义子类,因为 ES6 是先新建父类的实例对象this
,然后再用子类的构造函数修饰this
,使得父类的所有行为都可以继承。
class MyArray extends Array {
constructor(...args) {
super(...args);
}
}
var arr = new MyArray();
arr[0] = 12;
arr.length // 1
arr.length = 0;
arr[0] // undefined
继承 原生构造函数 Array
extends
关键字不仅可以用来继承类,还可以用来继承原生的构造函数。因此可以在原生数据结构的基础上,定义自己的数据结构
Mixin模式的实现 即多重继承
Mixin 指的是多个对象合成一个新的对象,新对象具有各个组成成员的接口。它的最简单实现如下。
const a = {
a: 'a'
};
const b = {
b: 'b'
};
const c = {...a, ...b}; // {a: 'a', b: 'b'}
c
对象是a
对象和b
对象的合成,具有两者的接口。
function mix(...mixins) {
class Mix {
constructor() {
for (let mixin of mixins) {
copyProperties(this, new mixin()); // 拷贝实例属性
}
}
}
for (let mixin of mixins) {
copyProperties(Mix, mixin); // 拷贝静态属性
copyProperties(Mix.prototype, mixin.prototype); // 拷贝原型属性
}
return Mix;
}
function copyProperties(target, source) {
for (let key of Reflect.ownKeys(source)) {
if ( key !== 'constructor'
&& key !== 'prototype'
&& key !== 'name'
) {
let desc = Object.getOwnPropertyDescriptor(source, key);
Object.defineProperty(target, key, desc);
}
}
}
上面代码的mix
函数,可以将多个对象合成为一个类。使用的时候,只要继承这个类即可。
class DistributedEdit extends mix(Loggable, Serializable) {
// ...
}
总结
本文主要介绍了ES6新增的继承语法糖class以及其继承。