资讯专栏INFORMATION COLUMN

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

boredream / 975人阅读

摘要:附,在设计模式看到的译者注译者注定义一个构造函数时,其默认的对象是一个类型的实例,其属性会被自动设置为该构造函数本身。

问题

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/85486.html

相关文章

  • 一步一步搭建前端监控系统:接口请求异常监控篇

    摘要:参考一步一步搭建前端监控系统错误监控篇用插件记录网络请求异常关于专注于微信小程序微信小游戏支付宝小程序和线上应用实时监控。 摘要: 如何监控HTTP请求错误? 作者:一步一个脚印一个坑 原文:搭建前端监控系统(四)接口请求异常监控篇 Fundebug经授权转载,版权归原作者所有。 背景:市面上的监控系统有很多,大多收费,对于小型前端项目来说,必然是痛点。另一点主要原因是,功能虽然...

    dreamtecher 评论0 收藏0
  • AJAX学习笔记

    摘要:的学习笔记是异步和的缩写,它的作用是执行异步的网络请求。这就是一个格式的,向这个地址请求,将得到一个回调函数,执行就得到数据。 AJAX的学习笔记 AJAX是异步JavaScript和XML的缩写,它的作用是执行异步的网络请求。因为JS是线性同步,如果需要用户向浏览器发送一个请求,那么就需要等浏览器接收到了结果才能继续运行,如果发送到接受的时间太长,浏览器就会很长时间处于假死状态,这样...

    RobinTang 评论0 收藏0
  • 前端跨域之原因&&方案&&原理

    摘要:于是乎同源策略应运而生主要限制在于和无法读取。怎么绕过同源策略首先一般来说协议和端口造成的跨域问题大部分方法是没有办法绕过的。二级域名是寄存在主域名之下的域名。当主域名受到惩罚二级域名也会连带惩罚。 前言 这是一道前端跨不过躲不掉面试必备的知识,挣扎多年没能做到刻骨铭心深入脊髓,只能好好写篇博文记录起来了; 什么是跨域? 广义来说,A域执行的文档脚本试图去请求B域下的资源是不被允许的,...

    Zack 评论0 收藏0
  • 你不知道 XMLHttpRequest

    摘要:默认参数为空字符串密码,可选参数,用于授权。默认参数为空字符串备注如果不是有效的方法或地址不能被成功解析,将会抛出异常如果请求方法不区分大小写为或将会抛出异常重写由服务器返回的类型。 本文详细介绍了 XMLHttpRequest 相关知识,涉及内容: AJAX、XMLHTTP、XMLHttpRequest详解、XMLHttpRequest Level 1、Level 2 详解 XHR...

    ckllj 评论0 收藏0

发表评论

0条评论

boredream

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<