在对象里定义了一个XMLHttpRequest要求了，怎样在要求的回调中援用对象的『this』『神兽必读』

2024年5月13日 222次阅读 来源: Honwhy

题目

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 值。
*/

    原文作者：Honwhy
    原文地址: https://segmentfault.com/a/1190000002473721
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞