javascript - 类方法不会覆盖类字段

Question

非常奇怪的行为。为什么下面的日志仅“A.fn”，下一行“B.fn”甚至不运行？下面的代码究竟发生了什么？

我使用的是 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

Can I know exactly what's happening in this following code?

公共(public)类字段相当于:

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

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

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

这就是原型(prototype)链的工作原理!

这是一个具有相同问题的更简单的示例:

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