ES6特性详解-优快云博客

摘要阮一峰《 ECMAScript 6 入门》

1. Class

1.1 class的定义

// 定义一个Animal的类（构造函数）
class Animal{
  constructor(){
    this.type = 'animal';
  }
  says(say){
    console.log(this.type + ' says ' + say);      
  }  
}
let animal = new Animal();
animal.says('hello'); // animal says hello

class Cat extends Animal{
  constructor(){
    super();
    this.type = 'cat';
  }
}
let cat = new Cat();
cat.says('hello'); // cat says hello

上面的代码首先用class定义了一个”类”(构造函数)，可以看到里面有个constructor方法，这就是构造方法，而this则代表实例对象。简单的说，constructor里面的属性和方法是实例对象自己的，而constructor外定义的方法和属性则是所有实例对象所共享的。另外，方法之间不需要逗号分隔，加了会报错。

class之间是可以通过extends关键字实现继承，这比ES5通过修改原型而清晰和方便很多。上面定义了一个Cat类，该类通过extends关键字，继承了Animal的所有方法和属性。

super关键字，它代表父类的实例，（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建的实例会报错。这是因为子类没有自己的实例对象，而是继承父类的实例对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

ES6的继承机制，实质是先构建父类的实例对象this（所以必须要有super方法），然后再用子类的构造函数修改this。

ES6的类，完全可以看作构造函数的另一种写法。

class Animal{
  // ...
}
typeof Animal // "function"
Animale === Animal.prototype.constructor // true

上面的代码表明，类本身就是构造函数。

与ES5一样，实例的属性除非显示定义在本身（即定义在this上），否则都是定义在原型上。（即定义在class上）。

animal.hasOwnProperty('type'); // true
animal.hasOwnProperty('says'); // false
animal.__proto__.hasOwnProperty('says'); // true

1.2. class表达式

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

上面代码使用了表达式定义了一个类。需要特别指出的是，这个类的名字是MyClass而不是Me，Me只能在内部使用，代指当前类。

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

1.3. super关键字的详解（继承）

super这个关键字，既可以当做函数使用，也可以当做对象使用。这两种情况的使用完全不同。

第一种情况，super当做函数调用时，代表的是父类的构造函数。ES6要求，子类的构造函数必须执行一次super()函数。

class A {}
class B extends A{
  constructor(){
    super();
  }
}

上面代码中，子类B的构造函数中的super()，代表调用父类的构造函数。这是必须的，否则报错。
注意：super虽然代表了父类的构造函数A，但是返回的是子类的实例，即super内部的this指向B，因此super()在这里就相当于A.prototype.constructor.call(this)。

class A {
  constructor() {
    console.log(new.target.name);
  }
}
class B extends A {
  constructor() {
    super();
  }
}
new A() // A
new B() // B

上面代码中，new.target指向当前正在执行的函数。可以看到，在super()执行时，它指向的是子类B的构造函数，而不是父类A的构造函数。也就是说，super()内部的this指向B。

第二种情况，super作为对象时，在普通的方法中，指向父类的原型对象；在静态方法中，指向父类。

class A {
  p(){
    return 2;  
  }
}
class B extends A{
  constructor(){
    super();
    console.log(super.p()); // 2
  }
}

上面代码中，子类B中super.p()，就相当于一个对象使用。这时，super在普通方法中，指向A.prototype，super.p()就相当于A.prototype.p()。
这里需要注意，由于super指向父类的原型对象，所以定义在父类实例上的方法或属性，是无法通过super调用的。

class A {
  constructor() {
    this.p = 2;
  }
}

class B extends A {
  get m() {
    return super.p;
  }
}

let b = new B();
b.m // undefined

上面代码中，p是父类A实例的属性，super.p就引用不到它。
如果属性定义在父类的原型对象上，super就可以取到。

class A {
  constructor() {
    this.x = 1;
  }
}

class B extends A {
  constructor() {
    super();
    this.x = 2;
    super.x = 3;
    console.log(super.x); // undefined
    console.log(this.x); // 3
  }
}

let b = new B();

上面代码中，由于绑定子类的this，所以如果通过super对某个属性赋值，这时super就是this，赋值的属性会变成子类实例的属性。super.x赋值为3，这时等同于对this.x赋值为3。而当读取super.x的时候，读的是A.prototype.x，所以返回undefined。

如果super作为对象，用在静态方法之中，这时super将指向父类，而不是父类的原型对象。

class Parent {
  static myMethod(msg) {
    console.log('static', msg);
  }

  myMethod(msg) {
    console.log('instance', msg);
  }
}

class Child extends Parent {
  static myMethod(msg) {
    super.myMethod(msg);
  }

  myMethod(msg) {
    super.myMethod(msg);
  }
}

Child.myMethod(1); // static 1

var child = new Child();
child.myMethod(2); // instance 2

上面代码中，super在静态方法之中指向父类，在普通方法之中指向父类的原型对象。

2. 字符串的扩展

2.1 for of

for(let k of 'abc'){
  console.log(k); // a b c
}

2.2 includes()，startsWith()，endsWith()

传统上，JS之后indexof，可以用来确定一个字符串是否在另一个字符串中。ES6又提供了三种方法。

includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在源字符串的开头。
endsWith()：返回布尔值，表示参数字符串是否在源字符串的结尾。

这三个方法都支持第二个参数，表示开始搜索的位置。

var s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

上面代码表示，使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。