js中的this詳解
阿新 • • 發佈:2019-01-08
this是js中的一個關鍵字。
在瞭解this之前,先了解一下js中的執行環境。執行環境是js中最為重要的一個概念,js中的執行環境主要有兩種:全域性執行環境和函式執行環境。執行環境(Execution Context )簡稱EC,可以將其看作一個物件,它由變數物件、this、作用域鏈組成。由此引出this。
在全域性執行環境下,this指向window物件;在函式執行環境下,this指向呼叫該函式的物件。
全域性執行環境:
在全域性執行環境下,this等價於window。
<script type="text/javascript"> console.log(this);//window console.log(this == window);//true </script>
<script type="text/javascript">
function test(){
var a = 1;
console.log(this.a); //undefined
console.log(this); //window
}
test();
</script>
上圖中,定義了一個test函式並呼叫它,test()等價於window.test(),即此時呼叫該函式的物件是window物件,故在執行函式的過程中,函式內部this指向window物件,由於window物件中並未定義變數a,故列印this.a結果為undefined。此時若將程式碼稍微改變一下,結果即如下圖所示:
<script type="text/javascript">
var a = 1;
function test(){
var a = 1;
console.log(this.a); //1
console.log(this); //window
}
test();
</script>
函式執行環境:
1.作為物件方法的呼叫
<script type="text/javascript"> var o = { user:"tom", fn:function(){ console.log(this.user); //tom } } o.fn(); </script>
上圖中,由於呼叫fn函式的是o物件,故在執行函式的過程中this指向o物件。this的指向在函式建立的時候是無法確定的,在呼叫的時候才能確定,總是指向呼叫函式的那個物件。
2.作為建構函式呼叫
<script type="text/javascript">
function Fn(){
this.user = "tom";
}
var a = new Fn();
console.log(a.user); // tom
</script>
上圖中,建立了一個新物件,並將建構函式的作用域賦值給了新物件,因此this就指向這個新物件。
3.call and apply
call()和apply()是函式物件的方法,用於改變this的指向。
<script type="text/javascript">
function testFunc(val){
this.a = val;
this.b = 'bb';
}
function execFunc(){
var a = 'exec aa';
var b = 'exec bb';
console.log(this.a, this.b);
}
var testInstance = new textFunc('aa');
execFunc.call(testInstance); //aa bb
execFunc.apply(testInstance); //aa bb
</script>
call apply的第一個引數是func函式執行時的this值。上圖中通過call apply函式將execFunc的this值指向testInstance物件。