在 JavaScript 类中使用箭头函数的继承和多态

Question

为什么在 JavaScript 类中箭头函数优先于函数声明？

例子：

class Parent {

    work = () => {
        console.log('This is work() on the Parent class');
    }
}

class Child extends Parent {

    work() {
        console.log("This is work() on the Child class ");
    }

}

const kid = new Child();

kid.work();

在这个例子中触发了父 work() 方法：

“这是父类上的 work()”

我只是想了解为什么箭头函数在 JS 类中总是优先，尤其是在继承和多态方面。

Answer 1

这与箭头函数无关。它优先，因为它是class field。类字段被添加为实例的自己的属性，而方法被添加到Child.prototype.work。即使你把它从箭头函数改成普通函数，它仍然会执行类字段。

当你访问kid.work时，查看属性的顺序是

• 自己的属性，直接在kid对象下（可以在这里找到）
• Child.prototype.work
• Parent.prototype.work
• 如果还没有找到，会在Object.prototype里面找

class Parent {
  // doesn't matter if it an arrow function or not
  // prop = <something> is a class field
  work = function() {
    console.log('This is work() on the Parent class');
  }
}

class Child extends Parent {
  // this goes on Child.prototype not on the instance of Child
  work() {
    console.log("This is work() on the Child class ");
  }
}

const kid = new Child();

// true 
console.log( kid.hasOwnProperty("work") )

// true
console.log( Child.prototype.hasOwnProperty("work") )

// false 
// because work inside Parent is added to each instance
console.log( Parent.prototype.hasOwnProperty("work") )

kid.work();

// How to force the Child method
Child.prototype.work.call(kid)