类定义

定义类的方式有两种：类声明和类表达式。

// 类声明

class Person {}

// 类表达式

const Animal = class {};

与函数表达式类似，类表达式在它们被求值前也不能引用。不过，与函数定义不同的是，虽然函数声明可以提升，但类定义不能：

A() // Cannot access 'A' before initialization

const A = ()=> {console.lop('A')}

console.log(ClassExpression); // undefined

const ClassExpression = class {};

另一个跟函数声明不同的地方是，函数受函数作用域限制，而类受块作用域限制：

{

function FunctionDeclaration() {}

class ClassDeclaration {}

}

console.log(FunctionDeclaration); // FunctionDeclaration() {}

console.log(ClassDeclaration); // ReferenceError: ClassDeclaration is not defined

类的构成

类可以包含构造函数方法、实例方法、获取函数、设置函数和静态类方法，但这些都不是必需的。空的类定义照样有效。默认情况下，类定义中的代码都在严格模式下执行。

类构造函数

constructor 关键字用于在类定义块内部创建类的构造函数。方法名 constructor 会告诉解释器在使用 new 操作符创建类的新实例时，应该调用这个函数。构造函数的定义不是必需的，不定义构造函数相当于将构造函数定义为空函数。

实例化

使用 new 操作符实例化 Person 的操作等于使用 new 调用其构造函数。唯一可感知的不同之处就是，JavaScript 解释器知道使用 new 和类意味着应该使用 constructor 函数进行实例化。使用 new 调用类的构造函数会执行如下操作。

在内存中创建一个新对象。
这个新对象内部的[[Prototype]]指针被赋值为构造函数的 prototype 属性。
构造函数内部的 this 被赋值为这个新对象（即 this 指向新对象）。
执行构造函数内部的代码（给新对象添加属性）。
如果构造函数返回非空对象，则返回该对象；否则，返回刚创建的新对象。

class Person {

constructor(name) {

console.log(arguments.length);

this.name = name || null;

}

}

let p1 = new Person; // 0

console.log(p1.name); // null

let p2 = new Person(); // 0

console.log(p2.name); // null

let p3 = new Person('Jake'); // 1

console.log(p3.name); // Jake

默认情况下，类构造函数会在执行之后返回this对象，如果返回的不是this对象而是其他对象，则不会通过instanceof操作符检测出跟类有关联，因为这个对象的原型指针没有被修改。

class Person {

constructor(override) {

this.foo = 'foo';

if (override) {

return {

bar: 'bar'

};

}

}

}

let p1 = new Person(),

p2 = new Person(true);

console.log(p1); // Person{ foo: 'foo' }

console.log(p1 instanceof Person); // true

console.log(p2); // { bar: 'bar' }

console.log(p2 instanceof Person); // false

类构造函数与构造函数的主要区别是，调用类构造函必须使用new，构造函数不用new则会以全局this作为内部对象调用。

把类当成特殊函数

ECMAScript中没有正式的类这个类型，通过typeof操作符会表示它是一个函数。

class Person {}

console.log(Person); // class Person {}

console.log(typeof Person); // function

实例、原型和类成员

类的语法可以非常方便地定义应该存在于实例上的成员、应该存在于原型上的成员，以及应该存在于类本身的成员。

实例成员

每个实例都对应一个唯一的成员对象，这意味着所有成员都不会在原型上共享：

class Person {

constructor()

// 这个例子先使用对象包装类型定义一个字符串

// 为的是在下面测试两个对象的相等性

this.name = new String('Jack');

this.sayName = () => console.log(this.name);

this.nicknames = ['Jake', 'J-Dog']

}

}

let p1 = new Person(),

p2 = new Person();

p1.sayName(); // Jack

p2.sayName(); // Jack

console.log(p1.name === p2.name); // false

console.log(p1.sayName === p2.sayName); // false

console.log(p1.nicknames === p2.nicknames); // false

p1.name = p1.nicknames[0];

p2.name = p2.nicknames[1];

p1.sayName(); // Jake

p2.sayName(); // J-Dog

原型方法与访问器

为了在实例间共享方法，类定义语法把在类块中定义的方法作为原型方法。

class Person {

constructor() {

// 添加到 this 的所有内容都会存在于不同的实例上

this.locate = () => console.log('instance');

}

// 在类块中定义的所有内容都会定义在类的原型上

locate() {

console.log('prototype');

}

}

let p = new Person();

p.locate(); // instance

Person.prototype.locate(); // prototype

可以把方法定义在类构造函数中或者类块中，但不能在类块中给原型添加原始值或对象作为成员数据：

class Person {

name: 'Jake'

}

// Uncaught SyntaxError: Unexpected token

类定义也支持获取和设置访问器。语法与行为跟普通对象一样：

class Person {

set name(newName) {

this.name_ = newName;

}

get name() {

return this.name_;

}

}

let p = new Person();

p.name = 'Jake';

console.log(p.name); // Jake

静态类方法

可以在类上定义静态方法。这些方法通常用于执行不特定于实例的操作，也不要求存在类的实例。

静态方法只能在当前类上调用，不能被该类的实例对象调用。父类的静态方法可以被子类继承。

class Person {

constructor() {

// 添加到 this 的所有内容都会存在于不同的实例上

this.locate = () => console.log('instance', this);

}

// 定义在类的原型对象上

locate() {

console.log('prototype', this);

}

// 定义在类本身上

static locate() {

console.log('class', this);

}

}

let p = new Person();

p.locate(); // instance, Person {}

Person.prototype.locate(); // prototype, {constructor: ... }

Person.locate(); // class, class Person {}

非函数原型和类成员

虽然类定义并不显式支持在原型或类上添加成员数据，但在类定义外部，可以手动添加：

sayName() {

console.log(`${Person.greeting} ${this.name}`);

}

}

// 在类上定义数据成员

Person.greeting = 'My name is';

// 在原型上定义数据成员

Person.prototype.name = 'Jake';

let p = new Person();

p.sayName(); // My name is Jake

迭代器与生成器

类定义语法支持在原型和类本身上定义生成器方法：

class Person {

// 在原型上定义生成器方法

*createNicknameIterator() {

yield 'Jack';

yield 'Jake';

yield 'J-Dog';

}

// 在类上定义生成器方法

static *createJobIterator() {

yield 'Butcher';

yield 'Baker';

yield 'Candlestick maker';

}

}

let jobIter = Person.createJobIterator();

console.log(jobIter.next().value); // Butcher

console.log(jobIter.next().value); // Baker

console.log(jobIter.next().value); // Candlestick maker

let p = new Person();

let nicknameIter = p.createNicknameIterator();

console.log(nicknameIter.next().value); // Jack

console.log(nicknameIter.next().value); // Jake

console.log(nicknameIter.next().value); // J-Dog

因为支持生成器方法，所以可以通过添加一个默认的迭代器，把类实例变成可迭代对象：

class Person {

constructor() {

this.nicknames = ['Jack', 'Jake', 'J-Dog'];

}

*[Symbol.iterator]() {

yield *this.nicknames.entries();

}

}

let p = new Person();

for (let [idx, nickname] of p) {

console.log(nickname);

}

// Jack

// Jake

// J-Dog

也可以只返回迭代器实例：

class Person {

constructor() {

this.nicknames = ['Jack', 'Jake', 'J-Dog'];

}

[Symbol.iterator]() {

return this.nicknames.entries();

}

}

let p = new Person();

for (let [idx, nickname] of p) {

console.log(nickname);

}

// Jack

// Jake

// J-Dog

继承

类继承使用的是新语法，但背后依旧使用的是原型链。

继承基础

支持单继承，使用extends 关键字就可以继承任何拥有[[Construct]]和原型的对象。

class Vehicle {}

// 继承类

class Bus extends Vehicle {}

let b = new Bus();

console.log(b instanceof Bus); // true

console.log(b instanceof Vehicle); // true

function Person() {}

// 继承普通构造函数

class Engineer extends Person {}

let e = new Engineer();

console.log(e instanceof Engineer); // true

console.log(e instanceof Person); // true

构造函数、HomeObject和super()

派生类的方法可以通过 super 关键字引用它们的原型。这个关键字只能在派生类中使用，而且仅限于类构造函数、实例方法和静态方法内部。在类构造函数中使用 super 可以调用父类构造函数。

class Vehicle {

constructor() {

this.hasEngine = true;

}

}

class Bus extends Vehicle {

constructor() {

// 不要在调用 super()之前引用 this，否则会抛出 ReferenceError

super(); // 相当于 super.constructor()

console.log(this instanceof Vehicle); // true

console.log(this); // Bus { hasEngine: true }

}

}

new Bus();

在静态方法中可以通过 super 调用继承的类上定义的静态方法：

class Vehicle {

static identify() {

console.log('vehicle');

}

}

class Bus extends Vehicle {

static identify() {

super.identify();

}

}

Bus.identify(); // vehicle

使用super时有几个需要注意的地方：

super只能在派生类构造函数和静态方法中使用。
不能单独使用super关键字，要么用它调用构造函数，要么用它引用静态方法。
调用super()会调用父类构造函数，并将返回的实例赋值给this。
super()的行为如同调用构造函数，如果需要给父类构造函数传参，则需要手动传入。
如果没有定义类构造函数，在实例化派生类时会调用 super()，而且会传入所有传给派生类的参数。
在类构造函数中，不能在调用 super()之前引用 this。
如果在派生类中显式定义了构造函数，则要么必须在其中调用 super()，要么必须在其中返回一个对象。

抽象基类

本身不被实例化，可供其他类继承的就是抽象基类。通过实例化时检测new.target是不是抽象基类，可以阻止抽象基类实例化：

// 抽象基类

class Vehicle {

constructor() {

console.log(new.target);

if (new.target === Vehicle) {

throw new Error('Vehicle cannot be directly instantiated');

}

}

}

// 派生类

class Bus extends Vehicle {}

new Bus(); // class Bus {}

new Vehicle(); // class Vehicle {}

// Error: Vehicle cannot be directly instantiated

另外，通过在抽象基类构造函数中进行检查，可以要求派生类必须定义某个方法。因为原型方法在调用类构造函数之前就已经存在了，所以可以通过 this 关键字来检查相应的方法：

// 抽象基类

class Vehicle {

constructor() {

if (new.target === Vehicle) {

throw new Error('Vehicle cannot be directly instantiated');

}

if (!this.foo) {

throw new Error('Inheriting class must define foo()');

}

console.log('success!');

}

}

// 派生类

class Bus extends Vehicle {

foo() {}

}

// 派生类

class Van extends Vehicle {}

new Bus(); // success!

new Van(); // Error: Inheriting class must define foo()

继承内置类型

ES6 类为继承内置引用类型提供了顺畅的机制，开发者可以方便地扩展内置类型：

class SuperArray extends Array {

shuffle() {

// 洗牌算法

for (let i = this.length - 1; i > 0; i--) {

const j = Math.floor(Math.random() * (i + 1));

[this[i], this[j]] = [this[j], this[i]];

}

}

}

let a = new SuperArray(1, 2, 3, 4, 5);

console.log(a instanceof Array); // true

console.log(a instanceof SuperArray); // true

有些内置类型的方法会返回新实例。默认情况下，返回实例的类型与原始实例的类型是一致的：

class SuperArray extends Array {}

let a1 = new SuperArray(1, 2, 3, 4, 5);

let a2 = a1.filter(x => !!(x%2))

console.log(a1); // [1, 2, 3, 4, 5]

console.log(a2); // [1, 3, 5]

console.log(a1 instanceof SuperArray); // true

console.log(a2 instanceof SuperArray); // true

如果想覆盖这个默认行为，则可以覆盖 Symbol.species 访问器，这个访问器决定在创建返回的实例时使用的类：

class SuperArray extends Array {

static get [Symbol.species]() {

return Array;

}

}

let a1 = new SuperArray(1, 2, 3, 4, 5);

let a2 = a1.filter(x => !!(x%2))

console.log(a1); // [1, 2, 3, 4, 5]

console.log(a2); // [1, 3, 5]

console.log(a1 instanceof SuperArray); // true

console.log(a2 instanceof SuperArray); // false

类混入

把不同类的行为集中到一个类是一种常见的 JavaScript 模式。虽然 ES6 没有显式支持多类继承，但通过现有特性可以轻松地模拟这种行为。

注意 Object.assign()方法是为了混入对象行为而设计的。只有在需要混入类的行为时才有必要自己实现混入表达式。如果只是需要混入多个对象的属性，那么使用Object.assign()就可以了。

在下面的代码片段中，extends 关键字后面是一个 JavaScript 表达式。任何可以解析为一个类或一个构造函数的表达式都是有效的。这个表达式会在求值类定义时被求值：

class Vehicle {}

function getParentClass() {

console.log('evaluated expression');

return Vehicle;

}

class Bus extends getParentClass() {}

// 可求值的表达式

混入模式可以通过在一个表达式中连缀多个混入元素来实现，这个表达式最终会解析为一个可以被继承的类。如果 Person 类需要组合 A、B、C，则需要某种机制实现 B 继承 A，C 继承 B，而 Person再继承 C，从而把 A、B、C 组合到这个超类中。实现这种模式有不同的策略。一个策略是定义一组“可嵌套”的函数，每个函数分别接收一个超类作为参数，而将混入类定义为这个参数的子类，并返回这个类。这些组合函数可以连缀调用，最终组合成超类表达式：

class Vehicle {}

let FooMixin = (Superclass) => class extends Superclass {

foo() {

console.log('foo');

}

};

let BarMixin = (Superclass) => class extends Superclass {

bar() {

console.log('bar');

}

};

let BazMixin = (Superclass) => class extends Superclass {

baz() {

console.log('baz');

}

};

class Bus extends FooMixin(BarMixin(BazMixin(Vehicle))) {}

let b = new Bus();

b.foo(); // foo

b.bar(); // bar

b.baz(); // baz

通过写一个辅助函数，可以把嵌套调用展开：

class Vehicle {}

let FooMixin = (Superclass) => class extends Superclass {

foo() {

console.log('foo');

}

};

let BarMixin = (Superclass) => class extends Superclass {

bar() {

console.log('bar');

}

};

let BazMixin = (Superclass) => class extends Superclass {

baz() {

console.log('baz');

}

};

function mix(BaseClass, ...Mixins) {

return Mixins.reduce((accumulator, current) => current(accumulator), BaseClass);

}

class Bus extends mix(Vehicle, FooMixin, BarMixin, BazMixin) {}

let b = new Bus();

b.foo(); // foo

b.bar(); // bar

b.baz(); // baz

注意：很多 JavaScript 框架（特别是 React）已经抛弃混入模式，转向了组合模式（把方法提取到独立的类和辅助对象中，然后把它们组合起来，但不使用继承）。这反映了那个众所周知的软件设计原则：“组合胜过继承（composition over inheritance）。”这个设计原则被很多人遵循，在代码设计中能提供极大的灵活性。

组合胜过继承的理解

继承的问题：

继承是面向对象编程中的一种机制，通过它，一个类可以继承另一个类的属性和方法。然而，继承有以下几个问题：

紧耦合：子类依赖于父类的实现，这使得子类和父类之间高度耦合，修改父类可能会导致子类的变化。
层次复杂：随着继承层次的增加，代码变得难以理解和维护。
单继承限制：在一些编程语言（包括 JavaScript）中，一个类只能继承一个父类，这限制了代码复用的灵活性。

组合的优点：

组合通过将对象或函数组合在一起，创建新的行为和功能，避免了继承的缺点。以下是组合的几个优点：

松耦合：通过组合对象，减少了对象之间的依赖，使得代码更易于维护和扩展。
更高的灵活性：组合可以在运行时动态地组合对象，使得系统更具灵活性。
代码复用：通过组合，可以复用已有的功能模块，而不需要依赖复杂的继承层次结构。

在 React 中的应用

在 React 中，组合胜过继承的原则被广泛应用。以下是几个例子：

高阶组件（HOC）

高阶组件是一个函数，接受一个组件并返回一个新的组件。它可以用于添加行为或属性到现有组件中，而无需修改组件本身。

function withLogging(WrappedComponent) {

return class extends React.Component {

componentDidMount() {

console.log('Component mounted');

}

render() {

return <WrappedComponent {...this.props} />;

}

};

}

Render Props

Render Props 是一种通过一个函数将行为注入到子组件的方法。这种模式允许在多个组件之间共享行为，而不需要通过继承。

class MouseTracker extends React.Component {

state = { x: 0, y: 0 };

handleMouseMove = event => {

this.setState({ x: event.clientX, y: event.clientY });

};

render() {

return (

{this.props.render(this.state)}

</div>

);

}

}

// 使用 render props

<MouseTracker render={({ x, y }) => <h1>The mouse position is ({x}, {y})</h1>} />;

Hooks

React Hooks 是函数，可以让你在函数组件中使用 state 和其他 React 特性。通过 Hooks，可以将逻辑提取到独立的函数中，然后在组件中组合使用这些函数。

function useMousePosition() {

const [position, setPosition] = useState({ x: 0, y: 0 });

useEffect(() => {

const handleMouseMove = event => {

setPosition({ x: event.clientX, y: event.clientY });

};

window.addEventListener('mousemove', handleMouseMove);

return () => {

window.removeEventListener('mousemove', handleMouseMove);

};

}, []);

return position;

}

function App() {

const { x, y } = useMousePosition();

return <h1>The mouse position is ({x}, {y})</h1>;

}

总结

通过组合而非继承，可以创建更加灵活、可维护和可扩展的代码结构。在现代 JavaScript 开发中，特别是使用像 React 这样的框架时，组合胜过继承的原则帮助开发者创建更健壮的应用。

原文：JavaScript高级程序设计(第四版)