Question

我正在参加第二期的Codeschool jQuery课程，其中一项挑战的“正确”解决方案在概念上看起来如下：

  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'的'click'），调用fetchContentViaAJAX()方法，修改包装对象。

现在根据我在JavaScript课程中学到的内容，这对我来说似乎在空间上浪费。由于fetchContentViaAJAX方法对于所有Wrapper个实例都是通用的，因此它应该在逻辑上属于Wrapper的原型，因为通过构造函数分配它就像这样赋予函数的相同副本每个wrapper的实例都会浪费空间。

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

是否有一个优雅的解决方案（除了使fetchContentViaAJAX成为全局函数而不是实例方法）？

Answer 1

您可以在构造函数中引用原型上定义的函数：

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

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

new Thing();

因此，您可以将该功能拉出原型。

唯一需要注意的是，如果该函数是闭包：如果fetchContentViaAjax函数需要引用Wrapper函数的局部范围内的某些变量。

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

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

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

Answer 2

当调用构造函数时，在运行任何代码之前，将此设置为新对象，并将构造函数的public prototype 设置为新对象的内部{{ 1}}。

因此，只要在调用构造函数之前将该方法分配给原型，就可以从构造函数内部调用该方法，例如：

[[prototype]]

将构造函数中使用的函数移动到该构造函数的原型

2 个答案: