web-dev-qa-db-ja.com

ES6-importステートメントを使用してクラスでプロトタイプメソッドを宣言する

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
}

これは実行可能ですか？

javascriptclassimportprototypeecmascript-6
26
SheedySheedySheedy

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

ゲッターを使用する

また、少しトリッキーで、「ゲッター」を使用して別の方法でこれを達成することもできます。

_import getColor from 'path/to/module';

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

myInstanceOfCar.getColor()を呼び出すだけで使用できます

または、ゲッターをより意味的に使用する場合：

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

// ...

const color = myInstanceOfCar.color;
_

ゲッター/セッターには、コンストラクターで設定したプロパティと同じ名前を付けることはできません。セッターを使用して同じプロパティを設定しようとすると、無限の再帰で最大呼び出しスタックを超えることになります。 例：set foo (value) { this.foo = value }

ES2016クラスプロパティ

バベルを使用してトランスパイルする （および 実験的提案を使用する ）で、一部を使用する場合 ES2016、次の構文を使用できます （ただし、これはメソッドをオブジェクトに直接適用し、プロトタイプには設定しないことに注意してください）：

_import getColor from 'path/to/module';

class Car {
    getColor = getColor;
}
_

クラスプロパティを使用したオプションのバインディング

プロパティの設定に省略形構文を使用する場合、メソッドをバインドする必要はありません（設定はプロパティが「this」が参照するものを変更するためです）に、本質的に自動的にバインドします）、しかし、あなたが選択する必要がある場合、あなたは確かにできます（何か他のものをバインドしたい場合のように）：

_getColor = getColor.bind(this);
_
32
ndugger

はい。 class構文は、コンストラクター関数の単なる（非常に洗練された）構文糖です。したがって、Carはprototypeプロパティを持つ関数のままであり、まったく同じことができます。

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

ただし、クラス構文から作成されたメソッドとは対照的に、メソッドは列挙可能になります。したがって、Object.defineProperty代わりに。

3
Felix Kling

興味がある場合は、さまざまな数のパラメーターを持つ関数をクラスメソッドにバインドする小さなモジュールを開発しました： https://github.com/ngryman/to-method 。

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

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

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