在对象里定义了一个XMLHttpRequest请求了,怎么在请求的回调中引用对象的『this』『神兽必读』

问题

XMLHttpRequest inside an object: how to keep the reference to “this”

且看代码

javascriptmyObject.prototye = {
  ajax: function() {
    this.foo = 1;

    var req = new XMLHttpRequest();
    req.open('GET', url, true);
    req.onreadystatechange = function (aEvt) {  
      if (req.readyState == 4) {  
        if(req.status == 200)  {
          alert(this.foo); // reference to this is lost
        }
      }
  }
};

onreadystatechange回调中再也引用不到主对象的this了,当然就没有办法获取this.foo变量了,有什么办法可以在这个回调中继续引用主对象呢

答案

最简单的办法就是将主对象的this保存到局部变量中,

javascriptmyObject.prototype = {
  ajax: function (url) { // (url argument missing ?)
    var instance = this; // <-- store reference to the `this` value
    this.foo = 1;

    var req = new XMLHttpRequest();
    req.open('GET', url, true);
    req.onreadystatechange = function (aEvt) {  
      if (req.readyState == 4) {  
        if (req.status == 200)  {
          alert(instance.foo); // <-- use the reference
        }
      }
    };
  }
};

如果我没有猜错的话,myObject是一个构造函数,现在你这么直接设置它的原型对象,最好还是将原型对象的constructor属性(设置)恢复为myObject

附,在<<JavaScript设计模式>>看到的译者注: /* *译者注:定义一个构造函数时,其默认的prototype对象是一个Object 类型的实例,其constructor属性会被自动设置 *为该构造函数本身。如果手工将其prototype 设置为另外一个对象,那么新对象自然不会具有原对象的constructor值, *所以需要重新设置其constructor 值。 */

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏hbbliyong

Invalid bound statement (not found)

1.7K20
来自专栏源哥的专栏

在DWR中实现直接获取一个JAVA类的返回值

    DWR是Ajax的一个开源框架,可以很方便是实现调用远程Java类。但是,DWR只能采用回调函数的方法,在回调函数中获取返回值,然后进行处理。那么,到底...

6520
来自专栏数据结构与算法

3185 队列练习 1

3185 队列练习 1 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 给定一...

31760
来自专栏python3

Python语句-if.....else......

似乎所有的条件语句都使用if.....else.....,它的作用可以简单地概括为非此即彼,满足条件A则执行A的语句,否则执行B语句,python的if.......

10420
来自专栏情情说

深入浅出MyBatis:反射和动态代理

前三篇详细总结了Mybatis的基本特性、常用配置、映射器,相对于Hibernate,映射器的配置相对复杂,但有很好的灵活性和扩展性,可以应对各种业务场景。熟练...

46370
来自专栏Java大联盟

Java面试手册:核心基础-3

2.数组有没有length()这个方法? String有没有length()这个方法?

18930
来自专栏云霄雨霁

设计模式----状态模式

16000
来自专栏菜鸟计划

angularjs promise详解

一、什么是Promise Promise是对象,代表了一个函数最终可能的返回值或抛出的异常,就是用来异步处理值的。 Promise是一个构造函数,自己身上有al...

31550
来自专栏从零开始学 Web 前端

09 - JavaSE之线程

PS: 如果我们没有 new一个 Thread 对象出来,而是直接使用 MyThread 的 run 方法(mt.run()),这就是方法调用,而不是启动线程了...

14750
来自专栏技术小站

编程填空:第i位替换 编程填空:第i位取反 编程填空:左边i位取反

写出函数中缺失的部分,使得函数返回值为一个整数,该整数的第i位和m的第i位相同,其他位和n相同。

23610

扫码关注云+社区

领取腾讯云代金券