如何从一个拥抱的包装器中引用新实例的`this`?

时间:2016-12-15 09:59:37

标签: javascript this new-operator

我想了解如何在特定情况下引用this,假设在“模块包装器”中包含“类”。

看一下这个例子:

var MyClass = (function() {

  theClass = function() {
      // Position A
      this.myValue = 3; // some number.
  };

  theClass.prototype.initSomething = function() {
      // Position B
      $(someButton).on('click', this.myCallback);
  };

  theClass.prototype.myCallback = function(event) {
      // Position C
      console.log(??this??.someValue);
  }.bind( ????? /* Position D */);

  return theClass;
})();

var myObject = new MyClass();
myObject.initSomething();

如果我创建了一个新的theclass,那么在位置A this引用新创建的对象。没关系。

在位置B,this仍然引用新创建的对象。那还可以。

我想要解决的问题发生在位置C,其中this将引用按钮。因此,我想将myCallback()绑定到新创建的对象。但是,在位置D,我在新创建的实例之外。但我知道原始物体和原型等等。那我怎么能引用新创建的对象呢?

1 个答案:

答案 0 :(得分:0)

你正在思考一个错误。

位置D仅运行一次。这可能是在加载页面之后。

但是有很多不同的this指针。每个new()都会创建一个新实例和一个新的this指针。

如果您尝试在包装函数中存储新的this指针,则需要管理指针列表。

优雅的方法是组织所有绑定 in 新的实例化对象,在那里你有这些信息。像这样:

var MyClass = (function() {

  theClass = function() {
      // Position A
      this.myValue = 3; // some number.
  };

  theClass.prototype.initSomething = function() {
      // Position B
      var myBoundCallback = this.myCallback.bind(this);
      $(someButton).on('click', myBoundCallback);
  };

  theClass.prototype.myCallback = function(event) {
      // Position C: this is now the newly instanciated object as it was bound at position B.
      console.log(this.someValue);
  };

  return theClass;
})();

var myObject = new MyClass();
myObject.initSomething();