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

时间:2015-09-21 16:11:21

标签: javascript class import prototype ecmascript-6

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

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

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

get color是导出的函数。即我希望能够从外部文件导入一个函数,并设置为ES6类的原型方法。这就是我所说的语法:

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

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

这可行吗?

3 个答案:

答案 0 :(得分:30)

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

由于您想使用ES6,我将使用ES6导入。

使用原型的最小努力:

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);
    }
}

使用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(但请记住,这会将方法直接应用于对象,而不是在原型上设置它:

import getColor from 'path/to/module';

class Car {
    getColor = getColor;
}

带类属性的可选绑定

如果您使用简写语法设置属性,您将不必绑定方法(设置作为属性更改“this”引用的内容,基本上自动绑定它),但你当然可以,如果你选择(如果你想绑定别的东西):

getColor = getColor.bind(this);

答案 1 :(得分:3)

是。 class语法只是(非常复杂的)构造函数的语法糖。因此Car仍然是具有prototype属性的函数,您可以完全相同:

import getColor from './getColor';
// ...
Car.prototype.getColor = getColor;

但是,这使得该方法可枚举,而不是从类语法创建的方法。因此,您可能希望使用Object.defineProperty

答案 2 :(得分:0)

如果您有兴趣,我已经开发了一个小模块来将具有不同数量参数的函数绑定到类方法:https://github.com/ngryman/to-method

const toMethod = require('to-method');

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

toMethod(Cat, { getColor: require('./getColor') });