JS中的 this

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 })();

转载于:https://my.oschina.net/u/3147332/blog/807063