Class的基本语法

文章编写参考 阮一峰《ECMAScript 6 入门》

1. 简介

在ES6之前要生成实例一般是通过构造函数

function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.toString = function () {
return "I am " + this.name
}
var p = new Person('Blue', 23)

JS的继承是基于原型的继承，和传统的面向对象语言有很大的差异。

ES6提供了更接近传统语言的类的写法，引入了Class这个概念，作为对象的模板。通过class关键字可以定义类。

Class只是提供了定义类的语法糖，他的绝大部分功能ES6都可以做到，新的class语法只是让对象原型的写法更加清晰，更像面向对象编程的语法而已。上面的代码用ES6的class改写成下面这样子

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
toString() {
return "I am " + this.name
}
}

上面代码中【constructor】也就是构造方法，构造函数中的this是指实例对象。Person 类除了构造方法还定义了一个toString方法。

【注意】定义“类”的方法时，前面【不需要加关键词function】，直接写方法名称和方法体就行。另外，【方法之间不需要用逗号分隔】，加了反而会报错。

ES6的类在使用的时候，也是使用new命令，这个和ES5没有任何的区别

var p = new Person('Blue', 23)

【构造函数的prototype属性在类上面依然存在，事实上，类的所有方法都是定义在类的prototype属性上的】

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
toString() {

}
toValue() {

}
}
//等同于
Person.prototype = {
constructor() { },
toString() { },
toValue() { },
};

【类的实例调用的方法其实就是调用的原型上的方法】

class Person {}
var p = new Person();
p.constructor===Person.prototype.constructor;
//true

上面代码中p是Person类的实例，它的constructor方法就是Person 类原型的constructor方法。

由于类的方法是定义在类的prototype对象上，所以类的新方法可以定义在类的prototype对象上。在对象的扩展中有一个Object.assign( )方法用于合并对象属性，那么我们可以用这个方法向类添加多个方法。

class Person { }

Object.assign(Person.prototype, {
toString() { },
toValue() { }
})

【prototype对象的constructor属性直接指向类本身】

class Person { }

Person.prototype.constructor === Person
//true

【类内部的所有方法都是不可枚举的】

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
toString() { }
toValue() { }
}
Object.keys(Person.prototype);
//[]

Object.getOwnPropertyNames(Person.prototype);
//[ 'constructor', 'toString', 'toValue' ]

在对象的扩展中，对象的属性可以使用表达式，类其实也是一个对象，所以在类中属性名称也可以使用表达式

let mth = 'toValue';
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
toString() { }
[mth]() { }
}

上面代码中mth就是一个表达式，依次来获取方法名称。

2. 严格模式

类和模块的内部，【默认就是严格模式】，所以不需要使用use strict指定运行模式。【只要你的代码写在类或模块之中，就只有严格模式可用】。

考虑到未来所有的代码，其实都是运行在模块之中，所以 ES6 实际上把整个语言升级到了严格模式。

3. constructor方法

constructor方法是类的默认方法，在类被new生成实例的时候，会自动调用该方法。一个类中必须有constructor方法，如果没有显示的定义constructor方法，一个空的constructor方法会被默认添加。

class Person {
toString() { }
}
//等同于
class Person {
constructor() {
}
toString() { }
}

【constructor方法默认返回实例对象（即this）】所以我们完全可以自定义返回另外一个对象；

class Person {
constructor() {
return Object.create(null);
}
}
new Person() instanceof Person
//false

上面代码中，我在构造函数中定义了返回一个全新的对象，产生的结果就是new出来的实例不是Person类的实例。

【类必须使用new来生成实例，也就是说constructor方法只能通过new自动调用】然而普通的构造函数则可以单独调用构造函数

class Person {
constructor() {
return Object.create(null);
}
}
Person();
// TypeError: Class constructor Person cannot be invoked without 'new'

4. 类的实例对象

生成类的实例方式只有一种，那就是通过new来生成，ES5也是如此。

class Person {
constructor() {
return Object.create(null);
}
}
var p = new Person();

【实例的属性除非显示的定义在实例的本身上（即定义在this对象上），否则都是定义在原型对象上（即定义在class上）】

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
toString() {

}
}
let p = new Person('Blue', 23);

p.hasOwnProperty("name");   //true

p.hasOwnProperty("age");   //true

p.hasOwnProperty("toString");   //false

p.__proto__.hasOwnProperty("toString")  //true

上面代码中，name和age属性是显示的定义在实例对象上的，toString方法则是定义在原型对象上的。

【所有的实例对象共享同一个原型对象】

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
toString() {

}
}
let p1 = new Person('Blue', 23);
let p2 = new Person('Crazy', 25);
Object.getPrototypeOf(p1) === Object.getPrototypeOf(p2);

上面代码通过Person类生成了两个不同的实例，但是他们的原型对象是全等的。既然如此，那么我们在原型上面动态添加属性或者方法也同时被所有的实例共享。

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
toString() {

}
}
let p1 = new Person('Blue', 23);
let p2 = new Person('Crazy', 25);

//往原型对象上添加方法
Object.assign(Object.getPrototypeOf(p1), {
toAge() {
console.log(this.age);
}
});

p1.toAge(); //23
p2.toAge(); //25

上面代码中，通过一个实例对象获取到原型对象并且添加一个方法后，所有实例都可以获得该方法。但是不建议这样子干，因为这会改变“类”的原始定义，影响到所有实例。

5. Class表达式

与函数一样，类也可以使用表达式的形式定义。

const MyClass = class Me {
getClassName() {
return Me.name
}
}

上面代码使用表达式定义了一个类。需要注意的是，这个【类的名字是MyClass而不是Me，Me只在 Class 的内部代码可用】，指代当前类。

let inst = new MyClass();
inst.getClassName() // Me
Me.name // ReferenceError: Me is not defined

上面代码表示，Me只在 Class 内部有定义。

如果类的内部没有使用的话，可以省略Me

const MyClass = class {
constructor(name) {
this.name = name;
}
getClassName() {
console.log(this.name);
}
}
let mc = new MyClass('Blue');
mc.getClassName();  //blue

下面是一个立即执行的类的实例

const person = new class {
constructor(name) {
this.name = name;
}
sayHi() {
console.log("I am ", this.name);
}
}('Blue');

person.sayHi(); //I am  Blue

6. 类不存在变量提升

ES6中的类不存在变量提升，这个跟ES5还是有很大区别的

let p = new Person('Blue');     //// 报错
class Person {
constructor(name) {
this.name = name;
}
sayHi() {
console.log("I am ", this.name);
}
}

上面代码，由于class不存在变量提升，所以new的时候会报错，当时Person还未定义

let People = class { };
class Person extends People{

}

上面的代码不会报错，构建Person类继承People的时候People类已经存在了；如果class存在变量提升，let是不存在变量提升的，那么以上代码就会报错，构造Person类的时候People还没有构建。

7. 私有方法

在构建类的时候，我们一些方法或者属性是在类的内部调用的，并不希望实例调用，所以我们需要创建私有方法。但是ES6并不支持类中方法的私有化，我们只能通过变通的方式来私有化方法或属性。

【命名标识法】

以前我们约定，名称前加“_”表示私有

class Person {
//公有方法
toString() { }
//私有方法
_toAge() { }
}

上面代码就通过变量名称来标识私有方法，但是这样做其实只是一个约定，并不保险。因为实例还是可以调用到这个所谓的私有方法。

【私有方法移出模块】

另一种方法就是索性将私有方法移出模块，因为模块内部的所有方法都是对外可见的。

class Person {
constructor(name) {
this.name = name;
}
sayHi(name) {
_sayHi.call(this, this.name);
}
}

function _sayHi(name) {
console.log("I am", name);
}

let p = new Person('Blue');
p.sayHi();  ////I am Blue

上面代码中，sayHi是公有的方法，方法内部调用模块外部的方法实现方法的私有化，虽然这样将方法移出模块，暴露在全局中，但是针对类来说确实实现了方法的私有化。

【利用Symbol定义私有属性】

因为Symbol的值是唯一的，所以可以用Symbol值作为属性名称实现私有，这时我个人比较推荐的一种方法。

let v = Symbol('v');
class Person {
constructor(name) {
this.name = name;
}
sayHi(name) {
console.log("I am", this.name);
}
[v]() {
console.log("私有方法");
}
}

上面代码中用Symbol值作为属性名，因为Symbol值唯一，所以在实例中是没法访问到的。

8. this指向问题

类的方法内部如果含有this，那么这个this指向该类的实例，但是如果将含this的方法拿出来单独使用，那很可能报错。

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHi(name) {
console.log("I am", this.name);
}
toAge() {
console.log(this.age);
}
}

let { sayHi } = Person;

sayHi();
//// TypeError: Cannot read property 'name' of undefined

上面代码，sayHi中的this默认指向Person的实例，但是解构出来单独使用时，this就指向了运行环境，但是该环境中并没有name属性，所以导致报错。

一个比较简单的解决方法是，在构造方法中绑定this，这样就不会找不到name了。

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
this.sayHi = this.sayHi.bind(this);
}
sayHi(name) {
console.log("I am", this.name);
}
toAge() {
console.log(this.age);
}
}

9. name属性

由于本质上，ES6 的类只是 ES5 的构造函数的一层包装，所以函数的许多特性都被Class继承，包括name属性。

class Point {}
Point.name // "Point"

【name属性总是返回紧跟在class关键字后面的类名】

10. Class的取值函数和存值函数

与 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'

上面代码中，prop属性有对应的存值函数和取值函数，因此赋值和读取行为都被自定义了。

存值函数和取值函数是设置在属性的 Descriptor 对象上的

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"
);

"get" in descriptor  // true
"set" in descriptor  // true

11. Class的静态方法

类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上【static关键字】，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

class Person {
static sayHi() {
console.log('Hello');
}
}
Person.sayHi();
//Hello

上面代码中sayHi方法被关键字static修饰，表示该方法为静态方法，只能在Person类上直接调用。如果在实例上调用静态方法，会抛出一个错误表示该方法不存在。因为【静态方法不被实例所继承】

【父类的静态方法，可以被子类继承】

class People {
static sayHi() {
console.log('Hello');
}
}
class Person extends People {

}
Person.sayHi();
//Hello

上面代码中，父类People有一个静态方法，子类Person继承了这个静态方法

【静态方法也是可以从super对象上调用的】

class People {
static sayHi() {
console.log('Hello');
}
}
class Person extends People {
static sayHello() {
super.sayHi();
}
}
Person.sayHello();

12. Class的静态属性和实例属性

静态属性指的是 Class 本身的属性，即Class.propName，而不是定义在实例对象（this）上的属性。

class Foo {
}

Foo.prop = 1;
Foo.prop // 1

上面的写法为Foo类定义了一个静态属性prop。

目前，只有这种写法可行，因为 ES6 明确规定，【Class 内部只有静态方法，没有静态属性】

// 以下两种写法都无效
class Foo {
// 写法一
prop: 2

// 写法二
static prop: 2
}

Foo.prop // undefined

13. new.target属性

new是从构造函数生成实例的命令。ES6 为new命令引入了一个new.target属性，该属性一般用在在构造函数之中，返回new命令作用于的那个构造函数。【如果构造函数不是通过new命令调用的，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。

class Rectangle {
constructor(length, width) {
console.log(new.target === Rectangle);
this.length = length;
this.width = width;
}
}

var obj = new Rectangle(3, 4); //// 输出 true

【注意】子类继承父类时，new.target会返回子类

class Rectangle {
constructor(length, width) {
console.log(new.target === Rectangle);
// ...
}
}

class Square extends Rectangle {
constructor(length) {
super(length, length);
}
}

var obj = new Square(3); // 输出 false

上面代码中，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);  // 正确

上面代码中，Shape类不能被实例化，只能用于继承。

注意，在函数外部，使用new.target会报错。