this小记

this小记

太久没有研究底层的js相关，今晚差点被紫红爸爸上课了。

正题

var net=new Object(); //定义一个全局变量net
net.AjaxRequest=function(url,onload,onerror,method,params){//创建一个构造函数
this.req=null;
this.onload=onload;
this.onerror=(onerror) ? onerror : this.defaultError;
this.loadDate(url,method,params);
}

this指向什么？是net.AjaxRequest还是net?刚开始没想起来答错了，说了net.AjaxRequest。其实这段代码的本质跟下面这段是一样的

var obj = {
name:"qiangzi",
show:function(){
console.log(this.name);
}
};
obj.show();

很明显,obj.show()的this指向调用该方法的对象，也即是obj，所以上面的代码其实也就是这样

var net = {
AjaxRequest: function (url, onload, onerror, method, params) {//创建一个构造函数
this.req = null;
this.onload = onload;
this.onerror = (onerror) ? onerror : this.defaultError;
this.loadDate(url, method, params);
}
};
net.AjaxRequest();

所以，很明显，上面的代码中，AjaxRequest的this指向就是net

然后紫红给我看了这图

图很可怕，但其实内容很简单，简化的问题如下

输出结果

根据上文分析，net.a的this指向net，所以net.a内部调用this.b()，实际上就是指net.b()。但是，我们的b方法是加在net.a的原型上，而不是net的原型上，所以很明显，调用net.a()的时候输出结果是this.b is not a function

解决方法

为了能够正确的运行b方法，我们先试着把b方法加到net的原型上

var net = {
a:function(){
this.b();
}
};
net.prototype.b=function(){
console.log("success")
};
net.a()

结果，浏览器报错

Uncaught TypeError: Cannot set property 'b' of undefined

由于我们的net是对象，而对象上是无法添加原型的，所以这里就报错了，最后我们用了new来解决

var net = {
a:function(){
this.b();
console.log(this);
}
};
net.a.prototype.b=function(){
console.log("success");
};
new net.a();

输出

success

net.a {}

可以看出，new改变了我们的this指向，至于具体的用法以及原因，有时间再做探究。