请帮助我理解“Ajax in Action”中的这段 JavaScript 代码

Question

我在 Ajax in Action 书中看到了这段代码，有两件事我无法理解（请记住，我刚刚开始 Web 编程，我仍在尝试了解 JavaScript 的工作原理）。

1. 在第37行或函数loadXMLDoc中，为什么作者声明了一个局部变量

   var loader=this;

   然后在调用中使用它

   net.ContentLoader.onReadyState.call(loader);

   而不是仅仅使用

   net.ContentLoader.onReadyState.call(this);

2. 作者为什么用

   net.ContentLoader.onReadyState.call(loader);

   ，而不是

   this.onReadyState();

/*
url-loading object and a request queue built on top of it
*/

/* namespacing object */
var net=new Object();

net.READY_STATE_UNINITIALIZED=0;
net.READY_STATE_LOADING=1;
net.READY_STATE_LOADED=2;
net.READY_STATE_INTERACTIVE=3;
net.READY_STATE_COMPLETE=4;


/*--- content loader object for cross-browser requests ---*/
net.ContentLoader=function(url,onload,onerror,method,params,contentType){
  this.req=null;
  this.onload=onload;
  this.onerror=(onerror) ? onerror : this.defaultError;
  this.loadXMLDoc(url,method,params,contentType);
}

net.ContentLoader.prototype.loadXMLDoc=function(url,method,params,contentType){
  if (!method){
    method="GET";
  }
  if (!contentType && method=="POST"){
    contentType='application/x-www-form-urlencoded';
  }
  if (window.XMLHttpRequest){
    this.req=new XMLHttpRequest();
  } else if (window.ActiveXObject){
    this.req=new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (this.req){
    try{
      var loader=this;
      this.req.onreadystatechange=function(){
        net.ContentLoader.onReadyState.call(loader);
      }
      this.req.open(method,url,true);
      if (contentType){
        this.req.setRequestHeader('Content-Type', contentType);
      }
      this.req.send(params);
    }catch (err){
      this.onerror.call(this);
    }
  }
}


net.ContentLoader.onReadyState=function(){
  var req=this.req;
  var ready=req.readyState;
  var httpStatus=req.status;
  if (ready==net.READY_STATE_COMPLETE){
    if (httpStatus==200 || httpStatus==0){
      this.onload.call(this);
    }else{
      this.onerror.call(this);
    }
  }
}

net.ContentLoader.prototype.defaultError=function(){
  alert("error fetching data!"
    +"\n\nreadyState:"+this.req.readyState
    +"\nstatus: "+this.req.status
    +"\nheaders: "+this.req.getAllResponseHeaders());
}

Answer 1

ECMA-/Javascript

中的try/catch语句创建一个新的Context。从技术上讲，这类似于

eval

语句，因此是

eval Context

。

当前的作用域链由新创建的“eval Context”扩展，因此，当this调用时，

Context变量

this.onReadyState();

将指向错误的上下文。

通过调用

net.ContentLoader.onReadyState.call(loader);

，作者使用

onReadyState

对象的上下文显式调用方法

loaded

（这就是

callee

中的 this 所引用的内容）。 被调用者是一个由调用者（-上下文）调用的函数（-上下文...）。

---

长话短说，ECMAscripts

.call()

和

.apply()

方法允许 你为一个设置一个特定的上下文 调用时的函数。这是 这里有必要，因为

try/catch

创建一个新的 Context 和值

this

在被调用的方法中会 错了。

---

虽然上述说法属实，但在此不负任何责任。这不是问题所在

try / catch

的上下文，而且是创建的匿名函数的上下文

this.req.onreadystatechange=function(){
    net.ContentLoader.onReadyState.call(loader);
}

在该匿名方法中使用

this

将“再次”引用不同的上下文。这就是为什么作者将

this

的值缓存在

loader

中，并使用缓存的 Context 调用该方法。