javascript - 'this' 是如何引用父类的？

Question

我正在尝试了解继承在 JavaScript 中的工作原理。我对“this”关键字的行为方式感到很困惑。

我提供了我试图理解的显示类关系的实际代码。

class AAA {
  xxx() {
    return 2;
  }

  yyy() {
    return 2;
  }

  zzz() {
    return this.xxx() / 2;
  }
}

class BBB extends AAA {
  xxx() {
    return super.xxx() * 2;
  }
}

class CCC extends BBB {
  yyy() {
    return super.yyy() + this.xxx();
  }
  www() {
    return this.xxx() - this.zzz();
  }
}

class DDD extends AAA {
  yyy() {
    return super.yyy() + this.xxx();
  }
  www() {
    return this.zzz() * this.yyy();
  }
}

let c = new CCC();

console.log(c.www()); // 2

首先我会根据自己的理解进行说明。如果我错了，请纠正我。此外，如果您不介意，为了简单起见，我们同意“->”的意思是“指代”。

1 c.www() -> CCC.www()
2 CCC.www() -> return this.xxx() - this.zzz()
3     this.xxx() -> BBB.xxx()
4         BBB.xxx() -> return super.xxx() * 2
5             super.xxx() -> AAA.xxx()
                4
6     this.zzz() -> AAA.zzz()
7        AAA.zzz() -> return this.xxx() / 2
8            this.xxx() -> BBB.xxx()
9                BBB.xxx() -> return super.xxx() * 2
10                   super.xxx() -> AAA.xxx()
                        2
// 4 - 2 = 2

如果我解释的是正确的。那么第2行，this.xxx()和this.zzz()是如何引用父类的呢？另外在第 7 行，this.xxx() 是如何引用 BBB 类的？

Answer 1

所有 JavaScript 对象都有一个原型(prototype)。您可以将其视为指向另一个对象的隐藏链接(或可见，具体取决于您的环境)，以解析对未直接在对象本身上定义的任何属性(包括函数)的引用。

我发现类语法(实际上只是糖)暗示了基于类的继承，从而混淆了隐藏在背后的真实机制。

虽然老了，但我仍然觉得这个解释是最好的解释之一:
http://sporto.github.io/blog/2013/02/22/a-plain-english-guide-to-javascript-prototypes/

我还会阅读 Eric Elliot 撰写的关于继承的任何文章。