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而不是MeMe只能在内部使用,代指当前类。

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.prototypesuper.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个位置直到字符串结束。

你可能感兴趣的:(ES6语法总结)