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
从上面的事例可以得出两个结论:
- 寻常情况下,判断this不用多想其他,只需关注执行此函数的对象就行。
//说白了,"前缀"."方法名",this-->"前缀" test1() //写完整是window.test1(),this-->window test2.getName() //this-->test2 test2.test3.test4.getName() //this-->test2.test3.test4
- 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等模版语言的时候,容易被蒙蔽了眼睛