this 的使用方法 —— javascript中的this講解！ (copy)

我一同學總結的關於this的用法，個人感覺總結的挺全面的，和大家分享一下。

原文：http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201251935720333/

從自己剛剛開始學習javascript到現在已經很久了，今天得益於新醬的細心講解，總算是把this這個“霧中花”看清晰了。

在此首先感謝新醬的講解下面將this的一些基本使用和大家分享一下：查看this指向的一句話法則： 永遠指向其所在函數的所有者如果沒有所有者時，指向window。理解this的要點：關鍵在於將函數與函數名分開看待。同一個函數，在不同的執行方法下，會有不同的效果。 如何來進行理解呢，來看幾個執行個體1）全域函數中的this指向

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

2）對象方法中的this指向

o.test =function(){

alert(this==o);//輸出true，o.test表示的是test這個函數的所有者是對象o，因此this應當是指向o的

}

3）綁定函數時的this 1

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

var test2 = o.test1;//test2這個函數並沒有所有者，在此，test2雖然調用了test1這個函數，但是this仍然指向window，而不是指向test1的擁有者：對象o
test2();
o.test1 =function(){

alert(this===o);

}

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

4）綁定函數時的this 2此時如果我們對3）中的代碼進行一些修改：

function test (){
alert(this=== o);
}
test();//this指向window
var o ={};
o.test2 = test;
o.test2();//此時test2的所有者為o，而test沒有所有者，this在此時指向的是o
alert(o.test2);

5）按一下滑鼠事件等進行函數的綁定時，this的指向

document.onclick=function(){

alert(this===document);//輸出為true，onclick事件的擁有者是document。因此，此處this指向document。我們可以將document.onclick理解為一個對象方法，如同例4中的o.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);

改變this的方法：call,applycall和apply（兩者用於改變函數的範圍）

var oo ={};
oo.test3 =function(){
alert(this== oo);//返回false
}
var ooo ={};
oo.test3.call(ooo);//this指向的是（）內的第一個參數，此處為ooo

 

window.x =100;
var oo ={};

oo.test3 =function(y,z,k){//函數的參數與apply、call中第二個以及之後的參數相對應
alert(this.x+y+z+k);
}
var arr=[2,3,4]
oo.test3.call(window,2,3,4);//this指向window，輸出為109
oo.test3.apply(window,[2,3,4]);//同上，使用apply進行元素羅列時需要使用中括弧[]將所有參數包裹起來
oo.test3.apply(window,arr);//同上，使用apply對於一個數組的訪問很簡單，使用數組名稱即可
oo.test3.call(window,arr[0],arr[1],arr[2]);//同上