类方法不会覆盖类字段

Question

非常奇怪的行为。为什么以下日志＆＃34; A.fn＆＃34; ，下一行＆＃34; B.fn＆＃34; 甚至不均匀跑？ 以下代码中究竟发生了什么？

我使用的是 Babel stage-2 ，这是在大多数React项目中使用的。

class A {
    fn = () => {
        console.log("A.fn");
    }
}

class B extends A {
    fn() {
        super.fn();
        console.log('B.fn')
    }
}

new B().fn(); // why this logs "A.fn" only, while "B.fn" isn't logged?

Answer 1

  

我可以确切地知道以下代码中发生了什么吗？

公共类字段相当于：

class A {
  constructor() {
    this.fn = () =>  console.log("A.fn");
  }
}

即。 fn是在实例本身中定义的，而在使用方法语法时，该方法在原型（B.prototype.fn）上定义。让我们记录B的实例：

第一个fn是在构造函数中创建的，第二个是定义为B的类方法。因为fn是在实例上定义的，即在原型链中是“更高”，所以阴影 B.prototype.fn，意味着永远不会调用B.prototype.fn。

这就是原型链的工作原理！

以下是一个更简单的例子：

const proto = {fn() { console.log('proto'); }};
const obj = Object.create(proto);
obj.fn = () => console.log('instance');
obj.fn();