理解Javascript中this

在 學習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

參考文章

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末茎杂,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子纫雁,更是在濱河造成了極大的恐慌煌往,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,627評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件轧邪,死亡現(xiàn)場離奇詭異刽脖,居然都是意外死亡,警方通過查閱死者的電腦和手機忌愚,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評論 3 399
  • 文/潘曉璐 我一進店門曲管,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人硕糊,你說我怎么就攤上這事院水。” “怎么了简十?”我有些...
    開封第一講書人閱讀 169,346評論 0 362
  • 文/不壞的土叔 我叫張陵檬某,是天一觀的道長。 經(jīng)常有香客問我螟蝙,道長恢恼,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,097評論 1 300
  • 正文 為了忘掉前任胶逢,我火速辦了婚禮厅瞎,結(jié)果婚禮上饰潜,老公的妹妹穿的比我還像新娘。我一直安慰自己和簸,他們只是感情好彭雾,可當我...
    茶點故事閱讀 69,100評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著锁保,像睡著了一般薯酝。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上爽柒,一...
    開封第一講書人閱讀 52,696評論 1 312
  • 那天吴菠,我揣著相機與錄音,去河邊找鬼浩村。 笑死做葵,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的心墅。 我是一名探鬼主播酿矢,決...
    沈念sama閱讀 41,165評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼怎燥!你這毒婦竟也來了瘫筐?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,108評論 0 277
  • 序言:老撾萬榮一對情侶失蹤铐姚,失蹤者是張志新(化名)和其女友劉穎策肝,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體隐绵,經(jīng)...
    沈念sama閱讀 46,646評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡之众,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,709評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了氢橙。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片酝枢。...
    茶點故事閱讀 40,861評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖悍手,靈堂內(nèi)的尸體忽然破棺而出帘睦,到底是詐尸還是另有隱情,我是刑警寧澤坦康,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布竣付,位于F島的核電站,受9級特大地震影響滞欠,放射性物質(zhì)發(fā)生泄漏古胆。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,196評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望逸绎。 院中可真熱鬧惹恃,春花似錦、人聲如沸棺牧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽颊乘。三九已至参淹,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間乏悄,已是汗流浹背浙值。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留檩小,地道東北人开呐。 一個月前我還...
    沈念sama閱讀 49,287評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像规求,于是被迫代替她去往敵國和親负蚊。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,860評論 2 361

推薦閱讀更多精彩內(nèi)容