web-dev-qa-db-ja.com

ES6 javascriptクラスにミックスインを追加する方法は？

いくつかのインスタンス変数とメソッドを持つES6クラスで、どのようにミックスインを追加できますか？以下に例を示しましたが、mixinオブジェクトの構文が正しいかどうかはわかりません。

class Test {
  constructor() {
    this.var1 = 'var1'
  }
  method1() {
    console.log(this.var1)
  }
  test() {
    this.method2()
  }
}

var mixin = {
  var2: 'var2',
  method2: {
    console.log(this.var2)
  }
}

(new Test()).test()を実行すると、ミックスインにあるようにクラスにmethod2がないため失敗します。そのため、ミックスイン変数とメソッドをクラスに追加する必要があります。

Lodashミックスイン関数があることを確認します https://lodash.com/docs/4.17.4#mixin ですが、ES6クラスでどのように使用できるかわかりません。ソリューションにlodashを使用しても構いませんし、mixin機能を提供するライブラリのないプレーンなJSを使用しても構いません。

javascriptnode.jsclassecmascript-6lodash
19
user779159

Javascriptのオブジェクト/プロパティシステムは、ほとんどの言語よりもはるかに動的であるため、オブジェクトに機能を追加するのは非常に簡単です。関数はファーストクラスのオブジェクトであるため、まったく同じ方法でオブジェクトに追加できます。 Object.assign は、あるオブジェクトのプロパティを別のオブジェクトに追加する方法です。 （その動作は、多くの点で_.mixin。）

Javascriptのクラスは、コンストラクター/プロトタイプのペアを簡単かつ明確に追加できる構文上の砂糖にすぎません。機能は、ES6より前のコードから変更されていません。

プロトタイプにプロパティを追加できます。

Object.assign(Test.prototype, mixin);

作成されたすべてのオブジェクトにコンストラクターで追加できます。

constructor() {
    this.var1 = 'var1';
    Object.assign(this, mixin);
}

条件に基づいてコンストラクターに追加できます。

constructor() {
    this.var1 = 'var1';
    if (someCondition) {
        Object.assign(this, mixin);
    }
}

または、作成後にオブジェクトに割り当てることができます。

let test = new Test();
Object.assign(test, mixin);
23
lonesomeday

おそらくObject.assign()を見る必要があります。このようなものが必要です：

Object.assign(Test.prototype, mixin);

これにより、mixinのすべてのメソッドとプロパティがTestコンストラクターのプロトタイプオブジェクトに確実にコピーされます。

3
Mister Spock

Es6では、割り当てることなくこれを行うことができ、適切なタイミングでmixinコンストラクターを呼び出すこともできます！

http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/#bettermixinsthroughclassexpressions

このパターンは、class expressionsを使用して、ミックスインごとに新しい基本クラスを作成します。

let MyMixin = (superclass) => class extends superclass {
  foo() {
    console.log('foo from MyMixin');
  }
};

class MyClass extends MyMixin(MyBaseClass) {
  /* ... */
}
0
Jamie Pate