美文网首页
ES6语法总结

ES6语法总结

作者: constLy | 来源:发表于2017-07-14 20:03 被阅读0次

    摘要 阮一峰《 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语法总结

          本文链接:https://www.haomeiwen.com/subject/dcuohxtx.html