在 學習JavaScript 的過程中拍鲤,this 這個關鍵字常常困擾著初學者甚至一些進階的開發(fā)者十性;尤其對一些學過面向?qū)ο缶幊痰耐瑢W來說嗤疯,JS中的this含義會很不一樣树姨。下面就來說說怎么理解Javascript中的this關鍵字摩桶。
Javascript中函數(shù)的調(diào)用方式
首先我們來看看javascript中函數(shù)的調(diào)用方式:
function func(argu[0], argu[1]){
//define a function func
}
var obj = { //define a object obj
func: function(argu[0], argu[1]){
//define a method func in object
}
}
func(argu[0], argu[1])
obj.func(argu[0], argu[1]) //call the function func
上面的調(diào)用方式是我們經(jīng)常使用的形式,稱為語法糖帽揪。上述形式可以等價轉(zhuǎn)換為function.call的形式:
func.call(undeined, argu[0], argu[1])
//函數(shù)調(diào)用call形式硝清,等價于func(argu[0], argu[1])
obj.func.call(obj, argu[0], argu[1])
//對象方法call形式,等價于obj.func(argu[0], argu[1])
這樣转晰,JS中的this就很好理解了芦拿。
this 是 JavaScript 中的一個關鍵字士飒,當一個函數(shù)被調(diào)用時,除了傳入函數(shù)的顯式參數(shù)以外蔗崎,名為 this 的隱式參數(shù)也被傳入了函數(shù)酵幕。this 參數(shù)指向了一個自動生成的內(nèi)部對象,這個內(nèi)部對象被稱為函數(shù)上下文(context)缓苛。
<strong>this的指向時動態(tài)的芳撒,有辦法事先確定到底指向哪個對象,只有執(zhí)行函數(shù)時才能確定未桥。</strong>
與其他面向?qū)ο蟮恼Z言不同的是笔刹, JavaScript 中的 this 依賴于函數(shù)的調(diào)用方式。所以冬耿,想要明白 this 的指向問題舌菜,還必須先研究函數(shù)在 JavaScript 中是如何被調(diào)用的。
在全局上下文中
在全局運行上下文中(在任何函數(shù)體外部)亦镶,this指代全局對象日月,無論是否在嚴格模式下('use strict')
//在瀏覽器中,全局對象為window
console.log(this === window) //true
this.name = 'frank'
console.log(window.name) //print frank
在函數(shù)上下文中
取決于函數(shù)如何調(diào)用:
1. 作為函數(shù)進行調(diào)用
在非嚴格模式下缤骨,不在調(diào)用時設置this值的時候(使用語法糖)爱咬,this的值會默認設置為全局對象:
function test(){
console.log(this)
}
test() //print window
而在嚴格模式下,this將保持他進入執(zhí)行環(huán)境時的值荷憋,不設置為undefined:
function test(){
"use strict"; //使用嚴格模式
console.log(this)
}
test() //print undefined
2. 作為方法進行調(diào)用
當一個函數(shù)被一個對象的屬性引用時台颠,可以通過對象調(diào)用這個函數(shù):
var obj = {
func: function() {
console.log(this)
}
}
obj.func() //print obj
函數(shù) func 的調(diào)用對象為 obj,所以函數(shù)上下文便是 obj勒庄。由此可見串前,將函數(shù)作為對象的一個方法進行調(diào)用時,該對象就是函數(shù)上下文实蔽,并且在函數(shù)內(nèi)部可以用 this 來訪問這個對象荡碾。
<strong>但是,當a對象的方法被賦予b對象局装,該方法就變成了普通函數(shù)坛吁,其中的this就從指向a對象變成了指向b對象。</strong>
var obj = {
func: function() {
console.log(this)
}
}
var temp = obj.func
temp() //print window(global)
3. 使用 apply() 和 call() 方法進行調(diào)用
JavaScript 的每個函數(shù)都有 apply() 和 call() 函數(shù)铐尚,可以利用任何一個函數(shù)都可以顯式指定任何一個對象作為其函數(shù)上下文拨脉。
通過 call() 方法來調(diào)用函數(shù),我們要給 call() 傳入一個this作為函數(shù)上下文對象宣增,另外還要傳入函數(shù)原本的參數(shù)玫膀。apply() 方法的使用方式類似,唯一不同的是call()方法傳入的所有參數(shù)爹脾,而apply()是傳入的參數(shù)數(shù)組帖旨。
我們使用call為例:
function func() {
let result = 0;
for(let i = 0; i < arguments.length; i++) {
result += arguments[i];
}
this.result = result;
}
var obj = {}
func.call(obj, 1, 2, 3)
obj.result === 6 //the result is 6
將函數(shù)的上下文定義為 obj箕昭,并且傳入 1、2解阅、3 三個參數(shù)落竹,func.call(obj, 1, 2, 3)
。由于this指向了obj货抄,在執(zhí)行完函數(shù)后述召,obj中的result屬性變?yōu)?。
同樣蟹地,利用call()或者apply()方法桨武,我們可以在一個對象中調(diào)用另一個對象中的函數(shù):
var array1= []
var array2= [] //define 2 arrays
array1.push.call(array2, 1, 2, 3) //在array1中調(diào)用array2的push方法
console.log(array1) //print []
console.log(array2) //print [1, 2, 3]
在上述例子中,定義了兩個數(shù)組array1和array2锈津,通過array1調(diào)用了array2中的push方法,最后改變了array2凉蜂。
由于有call()和apply()方法琼梆,這就使得Javascript非常靈活。
4. 作為構(gòu)造器進行調(diào)用
ES6中箭頭函數(shù)與this
參考文章