如何添加混合到ES6 JavaScript类？ [英] How to add mixins to ES6 javascript classes?

问题描述

在具有一些实例变量和方法的ES6类中，如何添加一个mixin？下面给出了一个例子，虽然我不知道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 ，因为它在mixin中，这就是为什么我需要添加mixin变量和方法到类。

我看到有一个lodash mixin功能 https://lodash.com/docs/4.17.4#mixin ，但我不知道如何使用它与ES6类。使用lodash来解决这个问题，甚至是没有库的普通JS，可以提供mixin的功能。

解决方案

对象/属性系统比大多数语言更动态，因此向对象添加功能非常简单。由于函数是一流对象，它们可以以完全相同的方式添加到对象中。 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）; 
  

In an ES6 class with some instance variables and methods, how can you add a mixin to it? I've given an example below, though I don't know if the syntax for the mixin object is correct.

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

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

If I run (new Test()).test(), it will fail because there's no method2 on the class, as it's in the mixin, that's why I need to add the mixin variables and methods to the class.

I see there's a lodash mixin function https://lodash.com/docs/4.17.4#mixin, but I don't know how I could use it with ES6 classes. I'm fine with using lodash for the solution, or even plain JS with no libraries to provide the mixin functionality.

解决方案

Javascript's object/property system is much more dynamic than most languages, so it's very easy to add functionality to an object. As functions are first-class objects, they can be added to an object in exactly the same way. Object.assign is the way to add the properties of one object to another object. (Its behaviour is in many ways comparable to _.mixin.)

Classes in Javascript are only syntactic sugar that makes adding a constructor/prototype pair easy and clear. The functionality hasn't changed from pre-ES6 code.

You can add the property to the prototype:

Object.assign(Test.prototype, mixin);

You could add it in the constructor to every object created:

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

You could add it in the constructor based on a condition:

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

Or you could assign it to an object after it is created:

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

这篇关于如何添加混合到ES6 JavaScript类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！