当前位置: 首页 > 面试题库 >

JavaScript回调范围

姚信鸥
2023-03-14
问题内容

我在使用普通旧JavaScript(无框架)在回调函数中引用我的对象时遇到了一些麻烦。

function foo(id) {
    this.dom = document.getElementById(id);
    this.bar = 5;
    var self = this;
    this.dom.addEventListener("click", self.onclick, false);
}

foo.prototype = {
    onclick : function() {
        this.bar = 7;
    }
};

现在,当我创建一个新对象时(在DOM加载后,使用span#test)

var x = new foo('test');

onclick函数中的“ this”指向span#test而不是foo对象。

如何在onclick函数中获取对foo对象的引用?


问题答案:

(提取了一些其他答案的注释中隐藏的解释)

问题在于以下几行:

this.dom.addEventListener("click", self.onclick, false);

在这里,您传递了一个函数对象用作回调。当事件触发时,该函数被调用,但是现在它与任何对象(this)都没有关联。

可以通过将函数(及其对象引用)包装在闭包中来解决此问题,如下所示:

this.dom.addEventListener(
  "click",
  function(event) {self.onclick(event)},
  false);

由于在创建闭包时为变量self分配了 值,因此闭包函数将在以后调用self变量时记住它的值。

解决此问题的另一种方法是制作一个实用函数(并避免使用变量绑定 this ):

function bind(scope, fn) {
    return function () {
        fn.apply(scope, arguments);
    };
}

更新后的代码将如下所示:

this.dom.addEventListener("click", bind(this, this.onclick), false);

Function.prototype.bind是ECMAScript5的一部分,并提供相同的功能。因此,您可以执行以下操作:

this.dom.addEventListener("click", this.onclick.bind(this), false);

对于尚不支持ES5的浏览器,MDN提供以下填充程序:

if (!Function.prototype.bind) {  
  Function.prototype.bind = function (oThis) {  
    if (typeof this !== "function") {  
      // closest thing possible to the ECMAScript 5 internal IsCallable function  
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");  
    }

    var aArgs = Array.prototype.slice.call(arguments, 1),   
        fToBind = this,   
        fNOP = function () {},  
        fBound = function () {  
          return fToBind.apply(this instanceof fNOP  
                                 ? this  
                                 : oThis || window,  
                               aArgs.concat(Array.prototype.slice.call(arguments)));  
        };

    fNOP.prototype = this.prototype;  
    fBound.prototype = new fNOP();

    return fBound;  
  };  
}


 类似资料:
  • 我给出了一个模型以供确认: 下面是显示上述模式的代码。 下面是我如何使用它...(例如在任何视图中) 现在,问题是:如果我调用confirm,它显示模态。但是如果我单击Cancel,然后再次调用confirm(确认),这一次,我点击OK:函数(上面代码段中的第二个参数)被调用两次。如果我点击取消10次,上面的函数调用10次。 知道为什么会这样吗? 谢谢.

  • 本文向大家介绍理解javascript回调函数,包括了理解javascript回调函数的使用技巧和注意事项,需要的朋友参考一下 把函数作为参数传入到另一个函数中。这个函数就是所谓的回调函数 经常遇到这样一种情况,某个项目的A层和B层是由不同的人员协同完成.A层负责功能funA,B层负责funcB。当B层要用到某个模块的数据,于是他对A层人员说,我需要你们提供满足某种需求的数据,你给我提供一个接口。

  • 本文向大家介绍javascript回调函数详解,包括了javascript回调函数详解的使用技巧和注意事项,需要的朋友参考一下 在高级语言层出不穷的年代, 各个语言都号称有着一切皆为对象的自豪说法, 而 js 作为一门脚本语言却相对于java等传统面向对象语言有很大的不同之处, 除了 js 诡异的继承体系之外, 最令人着迷的一个特性就是回调函数, 当然也有很多人对他诟病, 笔者认为 回调函数 和

  • 本文向大家介绍javascript 回调函数详解,包括了javascript 回调函数详解的使用技巧和注意事项,需要的朋友参考一下 回调函数定义 回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数。回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条

  • 我试图理解一个API参考描述,但我很难理解它的含义: http://mongodb.github.io/node-mongodb-native/2.2/api/Cursor.html#toArray 上面写着 'toArray(回调)- 我知道回调相当于一个“块”,但有一个指向“promise”的箭头符号意味着什么?

  • 问题内容: 我已经阅读过Java的作用域链,但对我来说却没有任何意义,有人可以告诉我什么是作用域链,以及作用域与图形或什至是白痴都能理解的方式。我用谷歌搜索,但没有找到可理解的东西:( 问题答案: 要了解作用域链,您必须知道闭包是如何工作的。 当您嵌套函数时,会形成一个闭包,内部函数即使在其父函数已经执行后,也可以引用其外部封装函数中存在的变量。 JavaScript通过遍历范围链(从本地到全局)