javascript - ES6 - 使用 import 语句在类上声明原型(prototype)方法

Question

我正在使用 ES6 类。我希望能够做到这一点:

function Car(color) {
  this.color = color;
};

Car.prototype.getColor = require('./getColor');

其中 get color 是导出函数。即我希望能够从外部文件导入函数并将其设置为 ES6 类上的原型(prototype)方法。这就是我正在讨论的语法:

class Car {
  constructor(color) {
    this.color = color;
  }

  getColor() {} // I want to import this function from './getColor', as above
}

这可行吗？

Answer 1

您仍然可以在 class 上附加方法' 原型(prototype);毕竟，类只是“函数对象”的语法糖，“函数对象”是使用函数构造对象的旧方法。

既然您想使用 ES6，我将使用 ES6 导入。

使用原型(prototype)，花费最少的精力:

import getColor from 'path/to/module';

class Car {
    ...
}

Car.prototype.getColor = getColor;

如您所见，如果您选择的话，您仍然可以使用原型(prototype)属性来附加方法。

<小时/>

在类的方法中调用模块:

或者，如果您不想使用原型(prototype)属性，您可以随时让您的方法从模块返回函数:

import getColor from 'path/to/module';

class Car {
    getColor () {
        return getColor.call(this);
    }
}

<小时/>

使用 setter/getter

您也可以采取一些技巧，使用“getter”以不同的方式实现此目的。

import getColor from 'path/to/module';

class Car {
    get getColor () { return getColor.bind(this) }
}

然后您只需调用 myInstanceOfCar.getColor()

即可使用它

或者以更语义化的方式使用 getter:

class Car {
    get color () { return getColor.call(this) }
}

// ...

const color = myInstanceOfCar.color;

请记住，getter/setter 不能与您在构造函数中设置的属性同名。当您尝试使用 setter 设置相同的属性时，您最终将超出最大调用堆栈并无限递归。 示例:set foo (value) { this.foo = value }

<小时/>

ES2016 类属性

如果您是using Babel to transpile (并且是 using experimental proposals )，并且想要使用一些 ES2016, you can use the following syntax (但请记住，这直接将该方法应用于对象，而不是在原型(prototype)上设置它):

import getColor from 'path/to/module';

class Car {
    getColor = getColor;
}

<小时/>

带有类属性的可选绑定(bind)

如果您使用简写语法来设置属性，您不必绑定(bind)方法(设置是作为属性更改“this”所指的内容，本质上是自动绑定(bind)它)，但如果您选择的话，您当然可以(例如您想绑定(bind)其他内容):

getColor = getColor.bind(this);