ECMAScript 6 新增的类Class:类语句(class)和类表达式(class expression)

 2015年12月04日    48     声明


JavaScript不同传统的面向对象语言,传统面向对象语言基于类或接口继承,而JavaScript只能基于原型继承。为了弥补这一缺点,ECMAScript 6中新增了类(Class),通过class关键字,你可以实现一个基于原型的继承。class可以认为是对象的模板,它只是一种语法糖,其本质上还是原型链继承。

  1. classclass表达式
  2. class语句的使用
  3. class expression类表达式的使用


1. classclass表达式

// 类语法结构
class name [extends] {
  // 类体
}

// 类表达式语法结构
var MyClass = class [className] [extends] {
  // 类体
};

class语句与class表达式都只能在严格模式下运行,class表达式可以省略类名,而class语句则不能省略。与函数声明不同,class声明没有作用域的提升。

class表达式与函数表达式语法结构类似,都可以是命名的也可以是匿名的。如果类表达式是命名的,这个名字只能在类体内部才能访问到。


2. class语句的使用

定义一个名为Site的基类,然后定义一个继承自Site类的子类Itbilu。 在下面的例子,定义了一个名为Polygon的类,然后定义了一个继承于Polygon的类 Square。注意到在构造器使用的 super(),supper()只能在构造器中使用,super函数一定要在this可以使用之前调用。

// 定义基类
class Site {
  // 基类的构造函数
  constructor(domain, host) {
    this.name = 'Site';
    this.domain = domain;
    this.host = host;
  }
}

// 定义子类
class Itbilu extends Site {
  // 子类的构造函数
  constructor(host) {
    // 调用基类的构造函数进行基类的初始化
    super('itbilu.com', host);
    this.name = 'IT笔录';
  }
}

// 创建类实例
var itbilu = new Itbilu('127.0.0.1');

console.log(itbilu.name);    //IT笔录
console.log(itbilu.domain);  //itbilu.com
console.log(itbilu.host);    //127.0.0.1

class语句中,constructor构造函数只能在实例化时通过new关键字实例化,而在子类中对父类进行实例化时,只能在constructor构造函数中调用父类的构造函数super进行父类的初始化,而且super只能在使用this之前调用。


3. class expression类表达式的使用

函数表达式类似,也可以将一个类语句赋值给一个变量,然后可以通过变量名来访问这个类语句<

var Site = class {
  constructor() {}
  name() {
    return "itbilu.com";
  }
};

var instance = new Site();
instance.name(); // "itbilu.com"