JS中的 this 变化多端,似乎难以捉摸,但实际上对 this 的解读,还是有一定规律的。
分析this,该如何下手呢?下面有一个函数
function show(){ alert(this); }
那 this 是什么呢?当然没有答案,因为要得到 this,首先要看调用处。调用决定this ,如下
oBtn.onclick = show; // 此时 this 就是 oBtn show(); // this 是 window 或 undefined,具体要看方法的所有者和运行模式 new show() // this 是 new 出来的对象
下面分析几种单一情况下的 this:
1、事件中,this指向触发事件的对象
1.1、作为事件处理程序的值
oBtn.onclick = function(){ alert(this); // oBtn }
1.2、行间事件
<input type="button" value="按钮" id="btn" onclick="show()" /> function show(){ alert(this); // this指该按钮 }
1.3、同样是行间事件
<input type="button" value="按钮" id="btn" onclick="alert(this)" /> <!-- this也是指该按钮 -->
2、this 指向其所属的对象。包括普通函数,可以看成是 window 的对象。
2.1
var arr=[1,2,3]; arr.show=function () { alert(this); // this指向arr数组 }; arr.show();
2.2
function show(){ alert(this); // window } show();
等价于(此处只关心 this)
window.show=function () { alert(this); //window }; window.show();
3、函数嵌套
function show(){ function show1(){ alert(this); } show1(); } show();
结果:
3.1、正常下 this 指向 window;
3.2、严格模式下,this 为 undefined (当然浏览器得支持严格模式);
可以这么理解:this指向其所属的对象,此时show1谁都不属于,所以是undefined
4、定时器中,this 指向 window,可以这么理解:隔一段时间后,由 window 执行一个函数,所以 this 指向 window;
setTimeout(function(){ alert(this); // window }, 1000);
5、apply 和 call,正如我们知道的,call 和 apply 可以改变 this 的值
function show(){ alert(this); // this 指向数组 } show.call([1,2,3]);
6、new 对象
*构造函数:构造函数式相对的, new Person()时,Person 就叫构造函数,直接调用"Person()"时,Person就是一个普通的函数;
function Person (){ alert(this); // new 出来的 Person 对象 } var person = new Person();
new的作用:
1.将 this 指向一个新建的空对象
2.return this
所以上面的代码实际是这样的:
function Person (){ // var obj = new Object(); // this = obj; alert(this); // new 出来的 Person 对象 // return this; } var person = new Person();
单种情况的处理基本就如上了,如果复合情况怎么办?如下:
function show(){ alert(this); } var arr1=[1,2,3]; arr1.show=show; setTimeout(new arr1.show(), 1000);
此时就需要对上述几种情况按照优先级排一个顺序了
this 优先级从高到低为:
优先级 | 情景 | this 的值 | 备注 |
1 | new | new出来的空 object | |
apply / call | 传入的参数 | 并列第一,apply / call不能和 new 同时出现 new arr1.show.apply(“1”); // 报错 | |
2 | 定时器 | window | |
3 | 事件 | 发生事件的元素 | |
4 | 方法 | 所有者 | |
5 | 其他(嵌套等) | window || undefined | 看是否为严格模式 |
注:不管如何修改this,this只会影响一层,比如下面这个
function show(){ alert(this); // this 为数组 [1,2,3] function show1(){ alert(this); // window || undefined } show1(); } show.apply([1,2,3]);
下面的 this 就没什么疑问了吧(某些代码纯粹是为了判断 this 而写,实际中并不会遇到–面试除外)
function show() { alert(this); } var arr1 = [1,2,3]; arr1.show = show; show(); //window arr1.show(); //arr1 new show(); //object new arr1.show(); //object //document.onclick = show; //点击时 document document.onclick = arr1.show; //点击时 document new document.onclick(); //object setTimeout(show, 100); //window setTimeout(arr1.show, 200); //window setTimeout(document.onclick, 100); //window setTimeout(new document.onclick(), 200); //object window.onload = function () { arr1.show(); //arr1 }; new (function (){ alert(this); //object arr1.show(); //arr1 })();