Fork me on GitHub
代码改变世界

this的指向

2015-10-17 11:40  autrol  阅读(249)  评论(0编辑  收藏  举报

在JS中,有三种需要注意的this:寻常的this/事件的this/ajax请求的this。

寻常的this

这种this的判断很简单,this是指向执行函数的对象。下面是事例说明:

var name = "window";

var test1 = function() {
    this.name = "test1";      //此处真相:window.name = "test1"
    console.log(this.name);   
}

test1(); //结果为:test1

var test2 = {
    getName : function() {
        console.log(this.name);
    }
}

test2.getName();  //结果为:undefined

var test3 = function() {
    this.name = "test3"; 
}

test3.prototype.getName = function() {
    console.log(this.name);
}

var test = new test3();      //new的原理就不说了,可以看我以前写的博文"new操作符做了什么"
console.log(test.getName);   //结果为:test3

从上面的事例可以得出两个结论:

  1. 寻常情况下,判断this不用多想其他,只需关注执行此函数的对象就行。
    //说白了,"前缀"."方法名",this-->"前缀"
    test1()                      //写完整是window.test1(),this-->window
    test2.getName()              //this-->test2
    test2.test3.test4.getName()  //this-->test2.test3.test4
  2. test2.getName()的结果是undefined,可以得出,this是不存在回溯,当前的this的某个属性没有,那就是没有,存在__proto__属性才可以回溯

事件的this

事件的this是触发这个时间的DOM对象。下面是事例说明:

<div>
    <input type="button" id="button" value="按钮" />
</div>
<script type="text/javascript">
var btn = document.getElementById("button");

btn.onclick = function(e) {  //this-->DOM节点input
    console.log(this);
};
</script>

ajax的this

ajax的this是XMLHttpRequest对象,创建ajax的函数如下:

function createXHR(){
    if (typeof XMLHttpRequest != "undefined"){
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject != "undefined"){
        if (typeof arguments.callee.activeXString != "string"){
            var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i, len;
            for (i=0,len=versions.length; i < len; i++){
                try {
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                } catch (ex){
                //跳过
                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    } else {
        throw new Error("No XHR object available.");
    }
}

var XHR = createXHR(); //XHR就是Ajax对象

在根本上,this的指向都是可以通过判定寻常this的方法来判定,只是在使用jQuery等模版语言的时候,容易被蒙蔽了眼睛