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

问题描述

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

I am using ES6 classes. I want to be able to do this:

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

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

其中 get color 是一个导出函数.即我希望能够从外部文件导入一个函数，并设置为 ES6 类上的原型方法.这就是我正在谈论的那种语法:

Where get color is an exported function. i.e. I want to be able to import a function from an outside file and set is as a prototype method on the ES6 Class. This is the kind of syntax I am talking about:

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

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

这可行吗?

推荐答案

您仍然可以在 class' 原型；毕竟，类只是功能对象"上的语法糖，这是使用函数构造对象的旧方法.

You can still attach a method on a class' prototype; after-all, classes are just syntactic sugar over a "functional object", which is the old way of using a function to construct objects.

既然你想使用 ES6，我将使用 ES6 导入.

Since you want to use ES6, I'll use an ES6 import.

import getColor from 'path/to/module';

class Car {
    ...
}

Car.prototype.getColor = getColor;

如您所见，如果您愿意，您仍然使用原型属性来附加方法.

As you can see, you still use the prototype property to attach a method, should you choose to.

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

Alternatively, if you don't want to use the prototype property, you can always have your method return the function from the module:

import getColor from 'path/to/module';

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

使用吸气剂

您也可能有点棘手，使用getter"以不同的方式实现这一点.

---

Using a Getter

You could also be a bit tricky and use a "getter" to achieve this in a different manner.

import getColor from 'path/to/module';

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

然后您可以简单地通过调用来使用它，myInstanceOfCar.getColor()

You could then use it simply by calling, myInstanceOfCar.getColor()

或者在更语义化的 getter 用法中:

Or in a more semantic usage of a getter:

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

// ...

const color = myInstanceOfCar.color;

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

Keep in mind that getters/setters cannot have the same name as properties that you set in the constructor. You will end up exceeding the maximum call-stack with infinite recursion when you try to use the setter to set that same property. Example: set foo (value) { this.foo = value }

如果您使用 Babel 进行转译(并且使用实验提案)，并且想要使用一些ES2016，你可以使用下面的语法(但要记住，这是直接将方法应用于对象，而不是在原型上设置):

If you're using Babel to transpile (and are using experimental proposals), and want to use some ES2016, you can use the following syntax (but keep in mind that this applies the method to the object directly, and does not set it on the prototype):

import getColor from 'path/to/module';

class Car {
    getColor = getColor;
}

带有类属性的可选绑定

如果您使用速记语法来设置属性，您将不必绑定方法(设置是作为属性更改this"所指的内容，本质上是自动绑定它)，但你当然可以，如果你选择(比如如果你想绑定其他东西):

---

Optional binding w/ class properties

If you use the shorthand syntax for setting a property, you won't have to bind the method (setting is as a property changes what "this" refers to, essentially automatically binding it), but you certainly can, should you choose to (like if you'd like to bind something else):

getColor = getColor.bind(this);

这篇关于ES6 - 使用 import 语句在类上声明原型方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！