javascript - 将构造函数中使用的函数移至该构造函数的原型(prototype)

Question

我正在参加 Codeschool jQuery 的第二门类(class)，其中一个挑战的“正确”解决方案在概念上看起来如下:

  function Wrapper(jQobject) {
    this.target=jQobject;

    this.fetchContentViaAJAX = function() {
    //fairly long function definition
    //...
    }

    this.target.on('click', '.child', this.fetchContentViaAJAX);
  }

Wrapper 对象基本上是为了包装 jQuery 对象，例如 $('#some_id') 添加 fetchContentViaAJAX 方法，并且在包装对象上注册一个 jQuery 回调，以便当该对象内部发生预先指定的事件时(这里是包装对象内部“.child”上的“单击”)，fetchContentViaAJAX() 方法获取调用，它修改包装的对象。

现在，根据我在他们的 JavaScript 类(class)中学到的知识，这对我来说似乎浪费了空间。由于 fetchContentViaAJAX 方法对于所有 Wrapper 实例都是通用的，因此它在逻辑上应该属于 Wrapper 的原型(prototype)，因为通过构造函数分配它，例如这会将函数的相同副本分配给包装器的每个实例，从而浪费空间。

问题是构造函数中已经需要该方法，因此无法事后定义。

是否有一个优雅的解决方案(除了将其设为 fetchContentViaAJAX 为全局函数而不是实例方法之外)？

Answer 1

您可以在构造函数中引用原型(prototype)上定义的函数:

function Thing() {
  this.init();
}

Thing.prototype.init = function() {
  console.log("I'm defined on the prototype");
};

new Thing();

因此，您可以将该函数提取到原型(prototype)中。

唯一需要注意的是该函数是否是一个闭包:如果 fetchContentViaAjax 函数需要引用 Wrapper 函数的本地范围内的某些变量。

function Thing2() {
  var localState = "some local value";

  this.init = function() {
    // do something with localState
  };

  document.body.addEventListener('click', this.init);
}