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指向,至于具体的用法以及原因,有时间再做探究。