JavaScript“这个”引用错误的对象

Question

好吧，this 并没有真正引用错误 对象，但我不知道如何引用正确的对象。

function someObj() {
   this.someMethod1 = function() {
      var elementBtn = document.getElementById('myBtn');
      elementBtn.onclick = function() { 
         this.someMethod2(); //I want this.someMethod2() to be called
         //...but it tries to call elementBtn.someMethod2() i believe.
      };
   };
   this.someMethod2 = function() {
      alert('OK');
   };
}

因此，当单击我的 myBtn 时，我希望运行 someObj.someMethod2() 。我希望它是 someObj，而不是任何其他 someObj。但怎么办？

Answer 1

您可能需要进行如下调整：

function someObj() {
    var that = this;

    this.someMethod1 = function() {
        var elementBtn = document.getElementById('myBtn');
        elementBtn.onclick = function() { 
            that.someMethod2();
        };
    };
    this.someMethod2 = function() {
       alert('OK');
    };
}

“that”捕获您所追求的范围。

Answer 2

函数关键字更改范围。一种解决方案是维护对您要使用的“this”的引用。

请尝试以下操作：

function someObj() {
   var self = this;
   this.someMethod1 = function() {
      var elementBtn = document.getElementById('myBtn');
      elementBtn.onclick = function() { 
         self.someMethod2(); //NOTE self
      };
   };
   this.someMethod2 = function() {
      alert('OK');
   };
}

Answer 3

您可以使用咖啡脚本，它有一个粗箭头（用于 onclick 函数）来处理这种事情，并编译为格式良好的 JavaScript。通过使用粗箭头，咖啡脚本可确保回调函数中使用与定义的函数相同的范围。

<一href="http://coffeescript.org/#try%3asomeObj%20%3D%20%28%29%20-%3E%0A%20%20%20%40someMethod1%20%3D% 20%28%29%20-%3E%0A%20%20%20%20%20%20elementBtn%20%3D%20document.getElementById%20%27myBtn%27%0A%20%2 0%20%20%20%20elementBtn.onclick%20%3D%20%28%29%20%3D%3E%20%0A%20%20%20%20%20%20%20%20%20% 40人冰毒od2%28%29%0A%20%20%20this.someMethod2%20%3D%20%28%29%20-%3E%0A%20%20%20%20%20%20alert%20%27OK%27 %0A” rel="nofollow">在这里玩代码

Coffee Script

someObj = () ->
   @someMethod1 = () ->
      elementBtn = document.getElementById 'myBtn'
      elementBtn.onclick = () => 
         @someMethod2()
   this.someMethod2 = () ->
      alert 'OK'

JavaScript

var someObj;
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
someObj = function() {
  this.someMethod1 = function() {
    var elementBtn;
    elementBtn = document.getElementById('myBtn');
    return elementBtn.onclick = __bind(function() {
      return this.someMethod2();
    }, this);
  };
  return this.someMethod2 = function() {
    return alert('OK');
  };
};