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