ES6躬行记(20)——类

简介:   ES6正式将类(Class)的概念在语法层面标准化,今后不必再用构造函数模拟类的行为。而ES6引入的类本质上只是个语法糖(即代码更为简洁、语义更为清晰),其大部分功能(例如继承、封装和复用等)均可在ES5中实现,只不过现在能用更符合面向对象的语法来操作类。但诸如接口、protected修饰符等一些面向对象常用的语法,ES6没有给出相关标准。

一、创建


  在ES5时代,可以像下面这样模拟一个类,先声明一个构造函数,然后在其原型上定义共享的方法,最后与new运算符组合实例化一个类。

function People(name) {
  this.name = name;
}
People.prototype.getName = function () {
  return this.name;
};
var people = new People("strick");
people.getName();       //"strick"


  本节接下来的内容会与这个示例有一些关联。

1)类声明

  类的创建方式与函数类似,也有两种:类声明和类表达式。类声明必须包含名称和class关键字,下面也创建一个People类,其主体由一对花括号包裹,它的自有属性和方法都与前一个People类相同。注意,每个类有且只有一个构造函数:constructor(),如果没有显式的声明,那么会有一个空的构造函数以供调用。


class People {
  constructor(name) {
    this.name = name;
  }
  getName() {
    return this.name;
  }
}
var people = new People("strick");
people.getName();              //"strick"
typeof People;               //"function"
typeof People.prototype.getName;      //"function"


  在代码的最后,调用了两次typeof运算符,由于此处的People类相当于上一个示例模拟的People类,只不过写法不同,因此两次运算的计算结果都是“function”,这也从侧面再次印证ES6的类仅仅是个语法糖。

  虽然两种类非常相似,但是ES6中的类有其独有的特性,具体如下所列:

(1)类声明和即将要讲解的类表达式都不会被提升。

(2)类中的代码在执行时,会强制开启严格模式。

(3)类的所有方法都不可枚举,并且不能与new组合使用。

2)类表达式

  在类表达式中,名称是可选的,但class关键字依然是必需的。如果包含名称,那么叫做命名类表达式,反之,叫做匿名类表达式,如下所示。

var People = class {            //匿名类表达式
};
var People = class Man {        //命名类表达式
};

  命名类表达式中的名称只能在类的内部访问,如果在外部贸然使用,那么就会抛出未定义的错误。下面的例子演示了名称的特点和局限。


var People = class Man {
  getSelf() {
    typeof Man;                 //"function"
    Man.name;                   //"Man"
    new Man().getAge();         //28
  }
  getAge() {
    return 28;
  }
};
var people = new People();
people.getSelf();
People.name;                   //"Man"
Man.name;                      //Man未定义的错误


  在getSelf()方法中先将typeof运算符应用于Man,然后访问Man的name属性,最后调用其实例的getAge()方法。在命名类的外部分别访问People和Man的name属性,前者能得到预期的结果,而后者却会抛出错误。

  与函数表达式类似,类表达式也能立即执行,只是要像下面这样,先在class关键字之前加new,然后在类的主体后面跟一对圆括号,里面的参数会传递给构造函数。


var people = new class {
  constructor(name) {
    this.name = name;
  }
  getName() {
    return this.name;
  }
}("strick");
people.getName();          //"strick"


二、成员


  类的成员既可以是普通的原型方法或自有属性,还可以是有特殊功能的构造函数、生成器、静态方法和访问器属性等,并且成员名可以是表达式。

1)自有属性

  类中的自有属性可以作为this对象的属性,并且一般都会在构造函数中执行初始化,如下所示。

class People {
  constructor() {
    this.name = "strick";
  }
}

2)访问器属性

  在类中的访问器属性,其存取语法和ES5对象字面量中的相同,也需要get和set两个关键字,具体实现如下所示。


class People {
  get prop() {
    return `getter:${this.name}`;
  }
  set prop(value) {
    this.name = value;
  }
}
var people = new People();
people.prop = "strick";
console.log(people.prop);       //"getter:strick"


  访问器属性还有一个便捷的地方,就是它和原型方法一样,也能被子类继承。

3)计算成员名

  类中的成员名既可以是标识符,也可以是要计算的表达式(如下代码所示),其声明语法和ES5对象字面量中的相同,也需要用一对方括号包裹。


var method = "getAge";
class People {
  ["get" + "Name"]() {
    return "strick";
  }
  [method]() {
    return 28;
  }
}
var people = new People();
people.getName();            //"strick"
people.getAge();              //28


4)生成器

  只要在某个方法之前加上星号(*),那么这个方法就能变为生成器,注意观察下面代码中的getName()方法。关于生成器的具体用法可以参考第19篇


class People {
  *getName() {
    yield "strick";
  }
}
var people = new People(),
  iterator = people.getName();
iterator.next();               //{value: "strick", done: false}


  如果方法的名称是内置符号Symbol.iterator并且是一个生成器方法,那么就成功的为类创建了一个默认的迭代器,这也意味着类的实例能被for-of循环,具体实现可参考下面的代码。


class People {
  *[Symbol.iterator]() {
    for (const item of [1, 2]) {
      yield item;
    }
  }
}
var people = new People();
/********************
  1
  2
********************/
for(var value of people) {
  console.log(value);
}


5)静态方法

  ES6新增了static关键字,可把类中的方法(除了构造函数)定义成静态的。要调用静态方法只能通过类本身,而不是实例化的类,如下代码所示。除了方法之外,static关键字还适用于访问器属性。

class People {
  static getName() {
    return "strick";
  }
}
People.getName();           //"strick"

  虽然ES6明确提出了静态方法,但是没有将静态属性一并标准化。如果要使用静态属性,可以像下面这样用变通的方式定义。

People.age = 28;
相关文章
|
前端开发
每天3分钟,重学ES6-ES12(十三)不常用但却常问的生成器函数
每天3分钟,重学ES6-ES12(十三)不常用但却常问的生成器函数
76 0
|
前端开发 API
每天3分钟,重学ES6-ES12(十一)Promise的类方法
每天3分钟,重学ES6-ES12(十一)Promise的类方法
80 0
|
Web App开发 自然语言处理 JavaScript
细读 ES6 | let 真的会提升吗?
本将会从 ES5 中一些怪诞的行为出发,然后再到 ES6 中的 let、const 是否会“提升”的讨论。
166 0
细读 ES6 | let 真的会提升吗?
|
存储 JavaScript 前端开发
ES6躬行记(13)——类型化数组
  类型化数组(Typed Array)是一种处理二进制数据的特殊数组,它可像C语言那样直接操纵字节,不过得先用ArrayBuffer对象创建数组缓冲区(Array Buffer),再映射到指定格式的视图(view)之后,才能读写其中的数据。总共有两类视图,分别是特定类型的TypedArray和通用类型的DataView。在ES6引入类型化数组之后,大大提升了JavaScript数学运算的性能。
|
JSON 算法 数据格式
ES6躬行记(11)——对象
  在第5篇中,讲解了多个对象字面量的改进,本节将重点介绍两个新增的静态方法,以及对象属性的重复处理和枚举顺序。
ES6躬行记(21)——类的继承
  ES6的继承依然是基于原型的继承,但语法更为简洁清晰。通过一个extends关键字,就能描述两个类之间的继承关系(如下代码所示),在此关键字之前的Man是子类(即派生类),而在其之后的People是父类(即基类或超类)。
|
JavaScript 前端开发
ES6躬行记(14)——函数
  在前面的章节中,已陆陆续续介绍了ES6为改良函数而引入的几个新特性,本章将会继续讲解ES6对函数的其余改进,包括默认参数、元属性、块级函数和箭头函数等。
ES6躬行记(12)——数组
  ES6为数组添加了多个新方法,既对它的功能进行了强化,也消除了容易产生歧义的语法。
|
JavaScript 前端开发 Go
ES6躬行记(7)——代码模块化
  在ES6之前,由于ECMAScript不具备模块化管理的能力,因此往往需要借助第三方类库(例如遵守AMD规范的RequireJS或遵循CMD规范的SeaJS等)才能实现模块加载。而自从ES6引入了模块化标准后,就不需要再特地加载一次外部脚本了。模块化的语法不仅让JavaScript代码的组织变得更有条理,还包含封装、按需导出或导入等实用功能,可轻松应对日益复杂和庞大的前端工程。但有一点要注意,模块中的代码默认运行在严格模式中。
|
存储 自然语言处理 JavaScript
ES6躬行记(9)——字符串
  在介绍字符串之前,有必要先了解一点Unicode的基础知识,有助于理解ES6提供的新功能和新特性。