1

我有以下类'X'，我想prototype动态添加一些东西，就像这样（这有效）：

    class X{
        someUnrelatedFunction(){};	
    }
    
    //adding some stuff at runtime, in real situation, the ['a','b','c'] aren't "known" in advance like here.

    ['a','b','c'].forEach(elem => {
    	X.prototype[elem] = () =>{
      	    console.log('called with : ' + elem);
      };
    })

    //tests:

    x = new X();
    x.c();//works, outputs 'called with : c';

但在class声明本身。我想这样做，使事情更具可读性，即我希望“原型”初始化属于类本身。

现在我正在“构造函数”中执行此操作，如下所示：

class X{
	constructor(){
  	//we don't want to do that again:
  	if(typeof X.prototype.inited === 'undefined'){
    	X.prototype.inited = true;
    	console.log('-constructor: initing prototype');
      ['a','b','c'].forEach(elem => {
        X.prototype[elem] = () =>{
          console.log('called with : ' + elem);
        };
      })      
  	}else{
    	console.log('-constructor: no need to re-init prototype');
    }	
  }
}


x1 = new X();
x1.a();

x2 = new X();
x2.b();

小提琴：https ://jsfiddle.net/nypL29f3/4/

但这对我来说似乎很棘手，而且在课堂上我实际上是在“外部”引用它，即我使用的是“X”。如果我更改了类名，我还需要更改那部分代码。

所以问题是 - 如何以更易读和正确的方式做到这一点？

FWIW，“真实”的情况是我通过创建像这样的无用脚本来玩 ES6：

https://jsfiddle.net/kpion/mqyrewnx/9/

在这里，我的疑虑是关于第 78 行 //这是我的问题 - 似乎我需要在 YaLog 类之外进行。

编辑：顺便说一句-如果您带着类似的问题来到这里-以下所有答案都以某种方式回答了该问题，并且都值得一读。谢谢大家！:)

4

3 回答 3

2

我希望“原型”初始化属于类本身。

这是不可能的。类体只能包含方法定义，不能包含任意代码。

如果方法的数量是已知的并且只有它们的名称是动态的，您可以使用计算的属性名称，但在您的示例中似乎并非如此。

由于您正在寻找一种更具可读性的方式，只需将类和静态值的所有分配或动态创建的方法放在单独的模块中即可。（这可能是一个 ES6 模块、一个 IIFE 模块或一个用于视觉分离的简单块作用域）。

现在我正在做这个constructor

不。这是低效的、容易出错的并且非常难以理解。

于 2018-05-03T19:05:56.893 回答
2

这种类原型修改永远不会从构造函数内部执行 - 主要是因为类构造函数负责管理当前类实例，而不是所有类实例。构造函数应该在类实例上声明新方法（'log'、'info'等）this，这比在类上声明方法效率低，prototype并且对于进一步的类继承可能是可取的，也可能不是。

这就是装饰器的用途。它们为扩展或修改类构造函数和原型提供了方便的语法。

装饰器可以修改现有的类prototype：

function withLogger(Class) {
  ['log','info','error','warn','group','groupEnd'].forEach(func => {
    Class.prototype[func] = function() {
      return this.callConsoleMethod(func, ...arguments);
    };
  });

  return Class;
}

或者返回一个以非破坏性方式扩展现有类的新类，这允许super在包装类中隐藏它们时引用原始成员。

装饰器在 ECMAScript Next/TypeScript 中有简洁的语法：

@withLogger
class YaLog {
  ...
}

由于装饰器基本上是一个辅助函数，它可以在 ES6 中直接应用，表达方式稍显逊色：

const YaLog = withLogger(class YaLog {
  ...
});
于 2018-05-03T20:59:19.267 回答
1

您可以使用继承。创建新类Y并从您的数组中添加方法。然后您可以使用以下方法扩展原始类（或任何其他类）Y：

class Y {}
const methods = ['a', 'b', 'c']
methods.forEach(elem => {
  Y.prototype[elem] = () => {
    console.log('called with : ' + elem)
  }
})

class X extends Y {
  someUnrelatedFunction() {}
}

const x1 = new X();
x1.a();

我不确定您的用例是什么，但您可以创建一个扩展原始类的辅助函数。例如，这也可以工作：

function extendWithMethods(methodNames, generalHandler) {
  class Y {}
  methodNames.forEach(elem => {
    Y.prototype[elem] = () => generalHandler(elem)
  })
  return Y
}

class X extends extendWithMethods(['a', 'b', 'c'], methodName => {
  console.log('called with : ' + methodName)
}) {
  someUnrelatedFunction() {}
}

const x1 = new X()
x1.a()
于 2018-05-03T18:55:22.523 回答