原生js的this指向

查看JavaScript中this指向的對象，this指向的一句話法則：

永遠指向其所在函數的全部者若是沒有全部者時，指向window。

理解this的要點：關鍵在於將函數與函數名分開看待。同一個函數，在不一樣的執行方法下，會有不一樣的效果。

廢話很少說，多說的都是廢話，不要看，這一句也是廢話，哈哈，我真能自娛自樂，come on下面直接上例子：

1）全局函數中的this指向

function test(){ alert(this);//test這個函數沒有全部者，所以此時this指向的是window
}

2）對象方法中的this指向

wang.test = function(){ alert(this==wang);//輸出true，wang.test表示的是test這個函數的全部者是對象wang，所以this應當是指向wang的
}

3）綁定函數時的this

以下代碼，test1和test2中this並不相同

var test2 = wang.test1;
//test2這個函數並無全部者，在此，test2雖然調用了test1這個函數，可是this仍然指向window，而不是指向test1的擁有者：對象wang
test2(); wang.test1 = function(){ alert(this===wang); }

這即是上面所說的，要將函數與函數名分開看待

4）綁定函數時的this

此時若是咱們對3）中的代碼進行一些修改：

function test () { alert(this === wang); } test();//this指向window
var wang= {}; wang.test2 = test; wang.test2();//此時test2的全部者爲wang，而test沒有全部者，this在此時指向的是wang
alert(wang.test2);

 

5）鼠標單擊事件等進行函數的綁定時，this的指向

document.onclick=function(){ alert(this===document);
//輸出爲true，onclick事件的擁有者是document。所以，此處this指向document。
咱們能夠將document.onclick理解爲一個對象方法，如同例4中的w.test2同樣。
}

 

6）setTimeout等傳參形式的this指向

不要去看傳的參數中函數的全部者，看執行函數的全部var obj = {};

obj.x = 1; obj.y = 2; window.x = 100; window.y = 200; obj.add = function () { alert(this.x + this.y); } setTimeout(obj.add,1000);//this指向window,輸出爲300
setTimeout(function(){//this指向obj，輸出爲3
 obj.add(); },1000);

7）改變this的方法：call,apply

call和apply（二者用於改變函數的做用域）

var wang= {}; wang.test3 = function(){ alert(this == wang);//返回false
} var my= {}; wang.test3.call(my);//this指向的是（）內的第一個參數，此處爲my
 window.x = 100; var wang= {}; wang.test3 = function(y,z,k){//函數的參數與apply、call中第二個以及以後的參數相對應
    alert(this.x+y+z+k); } var arr=[2,3,4] wang.test3.call(window,2,3,4);//this指向window，輸出爲109
wang.test3.apply(window,[2,3,4]);//同上，使用apply進行元素羅列時須要使用中括號[]將全部參數包裹起來
wang.test3.apply(window,arr);//同上，使用apply對於一個數組的訪問很簡單，使用數組名稱便可
wang.test3.call(window,arr[0],arr[1],arr[2]);//同上