ES6 super关键字

男娘i 2022-06-06 20:29 205阅读 0赞

我们知道，this关键字总是指向函数运行时所在的当前对象，ES6 又新增了另一个类似的关键字super，指向当前对象的原型对象。

上面代码中，对象obj的find方法之中，通过super.foo引用了原型对象proto的foo属性。

**注意**，super关键字表示原型对象时，只能用在对象的方法之中，用在其他地方都会报错。

> 对象的方法，是什么意思呢？  
> \- 目前，只有对象的 **方法的简写法** 可以让 JavaScript 引擎确认，定义的是*对象的方法*。

// 报错
    const obj = {
      foo: super.foo
    }
    
    // 报错
    const obj = {
      foo: () => super.foo
    }
    
    // 报错
    const obj = {
      foo: function () { 
        return super.foo
      }
    }

上面三种`super`的用法都会报错，因为对于 JavaScript 引擎来说，这里的 super 都没有用在对象的方法之中。第一种写法是super用在属性里面，第二种和第三种写法是 super 用在一个函数里面，然后赋值给foo属性。

JavaScript 引擎内部，`super.foo`等同于`Object.getPrototypeOf(this).foo`（属性的方式）或`Object.getPrototypeOf(this).foo.call(this)`（方法的方式）。

上面代码中，super.foo指向原型对象proto的foo方法，但是绑定的this却还是当前对象obj，因此输出的就是world。

下面是 extend 实现继承的例子，使用 super 访问父类：

class parentA {
        constructor() {
            this.id = "p_a" //这里的 this 动态指定的
        }
        foo() {
            console.log("Parent_a:" + this.id);
        }
    }
    parentA.prototype.id = "p_p_id";
    class childA extends parentA{
        constructor() {
            super();
            this.id = "c_a";
        }
        foo() {
            super.foo(); //super不能动态绑定，super在class声明的时候就定了
            console.log("Child_a:" + this.id + ":" + super.id);
        }
    }
    
    let c = new childA();
    c.foo();
    //Parent_a:c_a
    //Child_a:c_a:p_p_id