ES6 super关键字-蒲公英云

ES6 super关键字

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

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

let prop = {
    name: "zhang"
};
const a = {
    find(){ //对象的方法
        return super.name; 
    }
};
Object.setPrototypeOf(a, prop);
console.log(
    a.find() //zhang
);

上面代码中，对象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)（方法的方式）。

const proto = {
  x: 'hello',
  foo() {
    console.log(this.x);
  },
};
const obj = {
  x: 'world',
  foo() {
    super.foo();
  }
}
Object.setPrototypeOf(obj, proto);
obj.foo() // "world"

上面代码中，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