javascript - 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)