在JavaScriptClass中，super不能访问属性，但是可以修改属性？

Question

super属性无法访问，但可以修改？

super 代表什么？有人说是prototype？我知道Class的功能在对象的原型里，但是为什么super.name ='Lucy';可以修改对象实例的属性呢？

class a {
  name = 'jack';
  speak() {
    console.log(this.name);
  }
}

class b extends a {
  count() {
    super.name = 'Lucy';
    console.log(super.name) // undefined
    super.speak();
  }
}

new b().count(); // Lucy

Answer 1

当 prop 在父级原型上定义时，分配给 super.prop 很有用，而不是当它被定义为实例属性时，就像代码中 name 的情况一样。意识到赋值 name = 'jack' 发生在由 new b 创建的实例上，而不是发生在其他对象上。

因此，当您执行 super.name = 'Lucy' 时，您所做的只是 this.name = 'Lucy'。当您在该赋值后查询 super.name 时，此更改不可见，因为这将扫描父级的原型链，而不是实例对象。并且在该原型链上的任何地方都没有定义 name...

super.name 在用于 lookup 和 assignment 时的行为方式之间的区别是特定的：for (non-setter) assignment, 它与在 this 上赋值没有区别，而对于 lookup (包括 setter lookup），它会跳过 this 并在父级的原型链中开始查找。

super.prop 语法的强大功能仅在您必须处理已在原型上创建的方法时才会显现出来。

为了证明这一点，让我们将 name 定义为原型上的 getter/setter 函数：

class A {
  _name = 'jack';
  speak() {
    console.log(this.name);
  }
  get name() {
      return this._name;
  }
  set name(name) {
      return this._name = name + " (A)";
  }
}

class B extends A {
  count() {
    super.name = 'Lucy'; // This will not call the setter of B.prototype, but of A.prototype
    super.speak();
  }
  get name() {
      return this._name;
  }
  set name(name) {
      return this._name + " (B)";
  }
}

new B().count(); // Lucy (A)

注意这里super.name首先被识别为上层原型链中的一个函数，因此赋值就变成了一个函数调用。如果它是属性修改赋值，它会发生在 this.

请参阅

中对规范在这方面的详细分析

Answer 2

super关键字用于访问和更新父class变量、方法、属性等，调用父class的构造函数。但是 super 不是可以直接在子 class.

中使用的对象

super(arguments);  // calls the parent constructor (only inside the constructor)
super.parentMethod(arguments);  // calls a parent method

class a {
  name = 'jack';
  speak() {
    console.log(this.name);
  }
}

class b extends a {
  count() {
    this.name = 'Lucy';
    console.log(this.name) // will not be undefined, you already have access to parent class property using this keyword
    super.speak();
  }
}

new b().count(); // Lucy

在JavaScriptClass中，super不能访问属性，但是可以修改属性？

In JavaScript Class, super cannot access attributes, but can modify attributes?

javascript

es6-class