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

JavaScript "this" references wrong object

本文关键字：错误 对象 这个 JavaScript 引用      更新时间：2023-09-26

好吧，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。但是怎么回事？！

您可能需要进行这样的调整：

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

"that"捕获了您所追求的范围。

函数关键字更改范围。一种解决方案是维护对要使用的"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');
   };
}

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

在这里玩代码

咖啡脚本

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');
  };
};
相关文章：