ES6 Class 语法详解：从构造函数到静态方法

ES6 Class 语法概述

本文通过实例详细解析原生 JavaScript 中 ES6 里 Class（类）的具体用法，供读者参考学习。

ES6 中 Class 的写法示例如下。

class Point {
 constructor(x, y) {
  this.x = x;
  this.y = y;
 }
 toString() {
  return '(' + this.x + ', ' + this.y + ')';
 }
}

对比 ES5 的传统写法。

function Point(x, y) {
 this.x = x;
 this.y = y;
}
Point.prototype.toString = function () {
 return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);

两者对比分析。

总体而言，ES6 的 class 可视为一种语法糖，其大部分功能在 ES5 中均可实现。新的 class 写法仅使对象原型的定义更加清晰，更贴近面向对象编程的语法风格。上述代码若使用 ES6 的 class 进行改写，即表现为前文所示的第一种形式。

构造方法与实例定义

上述代码定义了一个类，其中包含一个 constructor 方法，该方法即为构造方法，而 this 关键字在此处代表实例对象。换言之，ES5 中的构造函数 Point 对应 ES6 中 Point 类的构造方法。

Point 类除构造方法外，还定义了一个 toString 方法。需注意，在定义类的方法时，无需添加 function 关键字，直接将函数定义放入即可。此外，方法之间无需使用逗号分隔，若添加逗号将会导致报错。

在实例化使用时，直接对类使用 new 命令，其用法与构造函数的使用方式完全一致。

class Bar {
 doStuff() {
  console.log('stuff');
 }
}
var b = new Bar();
b.doStuff() // "stuff"

这实际上是在调用原型上的方法。

| `class B {} let b = new B();

b.constructor === B.prototype.constructor // true`| |

在上述代码中，b 是 B 类的实例，其 constructor 方法即为 B 类原型的 constructor 方法。

constructor 方法详解

关于 constructor 方法。

constructor 方法是类的默认方法，通过 new 命令生成对象实例时会自动调用该方法。一个类必须包含 constructor 方法，若未显式定义，系统将默认添加一个空的 constructor 方法。

class Point {
}
// 等同于
class Point {
 constructor() {}
}

在上述代码中，定义了一个空的类 Point，JavaScript 引擎会自动为其添加一个空的 constructor 方法。

constructor 方法默认返回实例对象（即 this），但也可以指定返回另一个对象。

class Foo {
 constructor() {
  return Object.create(null);
 }
}
new Foo() instanceof Foo

静态方法与继承

关于静态方法。

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

class Foo {
 static classMethod() {
  return 'hello';
 }
}
Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod()

需注意，若静态方法中包含 this 关键字，该 this 指向的是类本身，而非实例。此外，父类的静态方法可以被子类继承。

class Foo {
 static classMethod() {
  return 'hello';
 }
}
class Bar extends Foo {
}
Bar.classMethod() // 'hello'

在上述代码中，父类 Foo 包含一个静态方法，子类 Bar 可以调用该方法。

静态方法同样可以通过 super 对象进行调用。

class Foo {
 static classMethod() {
  return 'hello';
 }
}
class Bar extends Foo {
 static classMethod() {
  return super.classMethod() + ', too';
 }
}
Bar.classMethod() /

感兴趣的用户可使用在线 HTML/CSS/JavaScript 代码运行工具：http://tools.jb51.net/code/HtmlJsRun 测试上述代码的运行效果。

如需了解更多 JavaScript 相关内容，可查看本站专题：《JavaScript 操作 DOM 技巧总结》、《JavaScript 页面元素操作技巧总结》、《JavaScript 事件相关操作与技巧大全》、《JavaScript 查找算法技巧总结》、《JavaScript 数据结构与算法技巧总结》、《JavaScript 遍历算法与技巧总结》及《JavaScript 错误与调试技巧总结》。

希望本文所述的 JavaScript 程序设计内容能对读者有所帮助。