JavaScript“this”引用了错误的对象[重复]

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

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

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

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