ES6 - 在一个具有import语句的类上声明一个原型方法 [英] ES6 - declare a prototype method on a class with an import statement

问题描述

我使用ES6类。我想要能够这样做：

  function Car（color）{
 this.color = color; 
}; 
 
 Car.prototype.getColor = require（'./ getColor'）; 
  

其中get color是导出的函数。即我想能够从外部文件导入函数并设置为ES6类上的原型方法。这是我所说的语法：

  class Car {
 constructor（color）{
 this.color = color; 
} 
 
 getColor（）{} //我想从'./getColor'导入这个函数，如上所示
} 
  
 
 
 
这是否可行？
解决方案
仍然在类的原型上附加一个方法;毕竟，类只是一个功能对象的语法糖，这是使用一个函数来构造对象的旧方式。
 
 
 
由于你想使用ES6 ，我将使用ES6导入。
 
 
 
使用原型最小化：
 
 
 
  import getColor从'path / to / module'; 
 
 class Car {
 ... 
} 
 
 Car.prototype.getColor = getColor; 
  
正如你所看到的，如果你选择，你仍然使用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（） 
 
 $ b b 
或者在getter的更语义使用中：
  class Car {
 get color return getColor.call（this）} 
} 
 
 // ... 
 
 const color = myInstanceOfCar.color; 
  
请记住，getters / setter不能与您在构造函数中设置的属性具有相同的名称。当您尝试使用setter设置相同的属性时，您将最终超过最大调用堆栈与无限递归。 示例： set foo（value）{this.foo = value}   
 
 
 
 
 
 
 ES2016类别属性
 
 
 
如果您使用Babel transpile （并且使用实验性提案），并希望使用一些 ES2016，您可以使用以下语法（但是请记住，这种方法直接应用于对象，而不会将其设置为原型）： 
  import getColor从'path / to / module'; 
 
 class Car {
 getColor = getColor; 
} 
  
 
 
 
 
 
 
属性> 
 
 
如果您使用ES7速记设置属性，您将不必绑定方法什么这个指的是，基本上自动绑定它），但你肯定可以，如果你选择（像，如果你想绑定别的东西）：
  getColor = getColor.bind（this）; 
  
或者，如果您想要更多实验性功能，可以使用建议使用::语法进行绑定，其格式如下：
  getColor = this :: getColor; //或只是:: getColor如果绑定到其当前值
  
 
I am using ES6 classes. I want to be able to do this:
function Car(color) {
  this.color = color;
};

Car.prototype.getColor = require('./getColor');
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
}
Is this doable?
解决方案
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.

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

Minimal effort, using the prototype:

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.



Calling the module within a class' method:

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




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) }
}
You could then use it simply by calling, myInstanceOfCar.getColor()

Or in a more semantic usage of a getter:
class Car {
    get color () { return getColor.call(this) }
}

// ...

const color = myInstanceOfCar.color;
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 }



ES2016 Class Properties

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




Optional binding w/ class properties

If you use the ES7 shorthand 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);
Or, if you want to get even more experimental, you can use the proposed "::" syntax for binding, which would look like:
getColor = this::getColor; // or just "::getColor" if binding to its current value


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