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

2022-01-24 00:00:00 class inheritance polymorphism javascript es6-class

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

Why do arrow functions take precedence over function declarations in JavaScript Classes?

例子:


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() 方法:

The parent work() method fires in this example :

这是父类上的 work()"

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

I just want to understand WHY the arrow function always takes precedence in JS Classes, especially in regards to Inheritance and Polymorphism.

推荐答案

跟做箭头函数没关系.它优先，因为它是 类字段.类字段被添加为实例的 own 属性，而方法被添加到 Child.prototype.work.即使你把它从箭头函数改成普通函数，它仍然会执行类字段.

It is nothing to do with being an arrow function. It is taking precedence because it's a class field. Class fields are added as an own property of the instance while methods are added to Child.prototype.work. Even if you change it from an arrow function to a regular function, it will still execute the class field.

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

When you access kid.work, the order in which the property will be looked is

  • 自己的属性，直接在kid对象下(可以在这里找到)
  • Child.prototype.work
  • Parent.prototype.work
  • 如果还没有找到，就会在Object.prototype
    • 里面找
  • own properties, directly under kid object (It is found here)
  • Child.prototype.work
  • Parent.prototype.work
  • If still not found, it will be looked inside 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)

相关文章