基本的类声明
类声明以 class 关键字开始，其后是类的名称；剩余部分的语法看起来就像对象字面量中的
方法简写，并且在方法之间不需要使用逗号。
class PersonClass {
// 等价于 PersonType 构造器
constructor(name) {
this.name = name;
}
// 等价于 PersonType.prototype.sayName
sayName() {
console.log(this.name);
}
}
let person = new PersonClass("Nicholas");
person.sayName(); // 输出 "Nicholas"
console.log(person instanceof PersonClass); // true
console.log(person instanceof Object); // true
console.log(typeof PersonClass); // "function"
console.log(typeof PersonClass.prototype.sayName); // "function"
为何要使用类的语法?
类与自定义类型之间有相似性较高，但也要记住一些重要的区别：
- 类声明不会被提升，这与函数定义不同。类声明的行为与 let 相似，因此在程序的执行
到达声明处之前，类会存在于暂时性死区内。 - 类声明中的所有代码会自动运行在严格模式下，并且也无法退出严格模式。
- 类的所有方法都是不可枚举的，这是对于自定义类型的显著变化，后者必须用
Object.defineProperty() 才能将方法改变为不可枚举。 - 类的所有方法内部都没有 [[Construct]] ，因此使用 new 来调用它们会抛出错误。
- 调用类构造器时不使用 new ，会抛出错误。
- 试图在类的方法内部重写类名，会抛出错误。
类表达式
类与函数有相似之处，即它们都有两种形式：声明与表达式。函数声明与类声明都以适当的
关键词为起始（分别是 function 与 class ），随后是标识符（即函数名或类名）。函数具
有一种表达式形式，无须在 function 后面使用标识符；类似的，类也有不需要标识符的表
达式形式。类表达式被设计用于变量声明，或可作为参数传递给函数。
基本的类表达式
let PersonClass = class {
// 等价于 PersonType 构造器
constructor(name) {
this.name = name;
}
// 等价于 PersonType.prototype.sayName
sayName() {
console.log(this.name);
}
};
let person = new PersonClass("Nicholas");
person.sayName(); // 输出 "Nicholas"
console.log(person instanceof PersonClass); // true
console.log(person instanceof Object); // true
console.log(typeof PersonClass); // "function"
console.log(typeof PersonClass.prototype.sayName); // "function"
类表达式不需要在 class 关键字后使用标识符。除了语法差异，类表达式的功能等价于类声明。
具名类表达式
在class 关键字后添加标识符，即具名类表达式
作为一级公民的类
在编程中，能被当作值来使用的就称为一级公民（ first-class citizen ），意味着它能作为参
数传给函数、能作为函数返回值、能用来给变量赋值。
ES6 延续了传统，让类同样成为一级公民。这就使得类可以被多种方式所使用。例如，它能
作为参数传入函数：
function createObject(classDef) {
return new classDef();
}
let obj = createObject(class {
sayHi() {
console.log("Hi!");
}
});
obj.sayHi(); // "H
访问器属性
自有属性需要在类构造器中创建，而类还允许你在原型上定义访问器属性。为了创建一个
getter ，要使用 get 关键字，并要与后方标识符之间留出空格；创建 setter 用相同方式，只
是要换用 set 关键字。例如：
class CustomHTMLElement {
constructor(element) {
this.element = element;
}
get html() {
return this.element.innerHTML;
}
set html(value) {
this.element.innerHTML = value;
}
}
var descriptor = Object.getOwnPropertyDescriptor(CustomHTMLElement.prototype, "html");
console.log("get" in descriptor); // true
console.log("set" in descriptor); // true
console.log(descriptor.enumerable); // false
需计算的成员名
对象字面量与类之间的相似点还不仅前面那些。类方法与类访问器属性也都能使用需计算的
名称。语法相同于对象字面量中的需计算名称：无须使用标识符，而是用方括号来包裹一个
表达式。例如：
let methodName = "sayName";
class PersonClass {
constructor(name) {
this.name = name;
}
[methodName]() {
console.log(this.name);
}
}
let me = new PersonClass("Nicholas");
me.sayName();
生成器方法
同函数生成器一样
静态成员
只要在方法与访问器属性的名称前添加正式的 static 标注。即构成类的静态方法
class PersonClass {
constructor(name) {
this.name = name;
}
// 等价于 PersonType.prototype.sayName
sayName() {
console.log(this.name);
}
// 等价于 PersonType.create
static create(name) {
return new PersonClass(name);
}
}
let person = PersonClass.create("Nicholas");
静态成员不能用实例来访问，你始终需要直接用类自身来访问它们。
继承
使用派生类进行继承
使用extends 关键字来指定当前类所需要继承的函数即可实现类的继承。而如果想要访问继承基类的构造器则需要调用super()
class Rectangle {
constructor(length, width) {
this.length = length;
this.width = width;
}
getArea() {
return this.length * this.width;
}
}
class Square extends Rectangle {
constructor(length) {
// 与 Rectangle.call(this, length, length) 相同
super(length, length);
}
}
var square = new Square(3);
console.log(square.getArea()); // 9
console.log(square instanceof Square); // true
console.log(square instanceof Rectangle); // true
继承了其他类的类被称为派生类（ derived classes ）。如果派生类指定了构造器，就需要
使用 super() ，否则会造成错误。若你选择不使用构造器， super() 方法会被自动调用，
并会使用创建新实例时提供的所有参数。
使用 super() 时需牢记以下几点：
- 你只能在派生类中使用 super() 。若尝试在非派生的类（即：没有使用 extends
关键字的类）或函数中使用它，就会抛出错误。- 在构造器中，你必须在访问 this 之前调用 super() 。由于 super() 负责初始化
this ，因此试图先访问 this 自然就会造成错误。- 唯一能避免调用 super() 的办法，是从类构造器中返回一个对象。
从表达式中派生类
在 ES6 中派生类的最强大能力，或许就是能够从表达式中派生类。只要一个表达式能够返回
一个具有 [[Construct]] 属性以及原型的函数，你就可以对其使用 extends 实现继承。
继承内置对象
在 ES6 基于类的继承中， this 的值会先被基类（ Array ）创建，随后才被派生类的构造
器（ MyArray ）所修改。结果是 this 初始就拥有作为基类的内置对象的所有功能，并能正
确接收与之关联的所有功能。
class MyArray extends Array {
// 空代码块
}
var colors = new MyArray();
colors[0] = "red";
console.log(colors.length); // 1
colors.length = 0;
console.log(colors[0]); // undefined
MyArray 直接继承了 Array ，因此工作方式与正规数组一致。与数值索引属性的互动更新
了 length 属性，而操纵 length 属性也能更新索引属性。这意味着你既能适当地继承
Array 来创建你自己的派生数组类，也同样能继承其他的内置对象。伴随着这些附加功能，
ES6 与派生类型有效解决了从内置类型进行派生这最后的特殊情况，不过这种情况仍然值得
继续探索。
Symbol.species 属性
继承内置对象一个有趣的方面是：任意能返回内置对象实例的方法，在派生类上却会自动返
回派生类的实例。因此，若你拥有一个继承了 Array 的派生类 MyArray ，诸如 slice() 之
类的方法都会返回 MyArray 的实例。例如：
class MyArray extends Array {
// 空代码块
}
let items = new MyArray(1, 2, 3, 4),
subitems = items.slice(1, 3);
console.log(items instanceof MyArray); // true
console.log(subitems instanceof MyArray); // true
在此代码中， slice() 方法返回了 MyArray 的一个实例。 slice() 方法是从 Array 上继
承的，原本应当返回 Array 的一个实例。而 Symbol.species 属性在后台造成了这种变化。
Symbol.species 知名符号被用于定义一个能返回函数的静态访问器属性。每当类实例的方法
（构造器除外）必须创建一个实例时，前面返回的函数就被用为新实例的构造器。下列内置
类型都定义了 Symbol.species ：
- Array
- ArrayBuffer
- Map
- Promise
- RegExp
- Set
- 类型化数组
以上每个类型都拥有默认的 Symbol.species 属性，其返回值为 this ，意味着该属性总是
会返回自身的构造器函数。若你准备在一个自定义类上实现此功能，代码就像这样：
// 几个内置类型使用 species 的方式类似于此
class MyClass {
static get [Symbol.species]() {
return this;
}
constructor(value) {
this.value = value;
}
clone() {
return new this.constructor[Symbol.species](this.value);
}
}
在类构造器中使用 new.target
与判断函数是被如何被调用的一样。
class Rectangle {
constructor(length, width) {
console.log(new.target === Rectangle);
this.length = length;
this.width = width;
}
}
class Square extends Rectangle {
constructor(length) {
super(length, length)
}
}
// new.target 就是 Square
var obj = new Square(3); // 输出 fals
总结
ES6 的类让 JS 中的继承变得更简单，因此对于你已从其他语言学习到的类知识，你无须将其
丢弃。 ES6 的类起初是作为 ES5 传统继承模型的语法糖，但添加了许多特性来减少错误。
ES6 的类配合原型继承来工作，在类的原型上定义了非静态的方法，而静态的方法最终则被
绑定在类构造器自身上。类的所有方法初始都是不可枚举的，这更契合了内置对象的行为，
后者的方法默认情况下通常都不可枚举。此外，类构造器被调用时不能缺少 new ，确保了不
能意外地将类作为函数来调用。
基于类的继承允许你从另一个类、函数或表达式上派生新的类。这种能力意味着你可以调用
一个函数来判断需要继承的正确基类，也允许你使用混入或其他不同的组合模式来创建一个
新类。新的继承方式让继承内置对象（例如数组）也变为可能，并且其工作符合预期。
你可以在类构造器内部使用 new.target ，以便根据类如何被调用来做出不同的行为。最常
用的就是创建一个抽象基类，直接实例化它会抛出错误，但它仍然允许被其他类所继承。
总之，类是 JS 的一项新特性，它提供了更简洁的语法与更好的功能，通过安全一致的方式来
自定义一个对象类型。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
