Question

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

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');
    };
}

“那”捕获你所追求的范围。

Answer 2

function keyword changes scope。一种解决方案是保持对您要使用的“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。通过使用胖箭头，咖啡脚本确保与将在回调函数中使用的函数定义相同的范围。

play with code here

咖啡脚本

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');
  };
};

JavaScript“this”引用了错误的对象

3 个答案:

咖啡脚本

的JavaScript