對于經(jīng)驗(yàn)豐富的前端開發(fā)者來說缀辩,有時候會考慮使用this的必要性.而對于初學(xué)者來說,this是又一個很容易困擾的概念。所以什么時候用和怎么用臀玄,如何用是我們需要解決的問題瓢阴。
-
為什么要用this **
You Don't Know JS 中有這樣一個例子:
this.png
剛才開始看這個例子我們會有些迷糊,這個例子主要使identify()和speak()這兩個函數(shù)根據(jù)不用的參數(shù)內(nèi)容進(jìn)行工作.
上面的例子等價于下面列舉的不使用this的情況:
this2.js
這樣我們可以看出this在這里指的的是函數(shù)被傳進(jìn)去的 參數(shù)!!!!! 但這部不是this唯一的含義.使用this會使我們的設(shè)計(jì)更加清晰和簡潔** -
關(guān)于this的誤區(qū)
關(guān)于this我們總有兩種 誤區(qū):
1.this 代表的是這個函數(shù)
2.this 是指函數(shù)的作用域
NO NO NO 這兩種情況只適用于個別情況
我們用兩個例子證明他們倆的確是誤區(qū)
1.this不代表這個函數(shù):
比如我們想計(jì)算foo()函數(shù)被調(diào)用的次數(shù)
count.js
使用this 我們并沒有得到想要的結(jié)果 4 得到了0.
當(dāng)然如果我們把this.count++;
改成foo.count++
就可以得到我們想要的結(jié)果健无。從這里可以看出this并不是代表這個函數(shù)
個別情況
對于與個別情況荣恐,根據(jù)函數(shù)的調(diào)用方法我們可以迫使this代表這個函數(shù).對于上面的例子我們改變foo()函數(shù)的調(diào)用方法。
count2.js
2.this并不代表這個函數(shù)的作用域
看一個錯誤的code:
scope.js
這段代碼的本意是想通過this建立 foo()和bar()這兩個函數(shù)作用域 的橋梁累贤,使他們能相互訪問叠穆,顯然這樣是不可能的。
-
到底this代表了什么
我們前面列舉了為什么用this 和關(guān)于this的誤區(qū)畦浓,那么this在JS到底代表是什么痹束。
首先this代表什么是在代碼編譯的時候检疫,根據(jù)函數(shù)的調(diào)用的條件和上下文進(jìn)行決定的讶请。
當(dāng)函數(shù)被調(diào)用時,會創(chuàng)建一個活動記錄(activation record)或者叫做 執(zhí)行上下文(execution context)記錄的東西屎媳。這個記錄儲存一些關(guān)于函數(shù)的信息夺溢,例如 函數(shù)被調(diào)用的方式,函數(shù)從調(diào)用棧的那個位置被調(diào)用烛谊,以及這個函數(shù)需要的參數(shù)等等风响,this 會根據(jù)情況代表他們中的一個。這個就是this的含義丹禀。
華麗的分割線:
看了YOU-DONT-KNOW-JS以后總結(jié)了一下關(guān)于this的內(nèi)容状勤,加上了一點(diǎn)點(diǎn)自己的理解。希望對大家有幫助双泪。
附上大神的書的github地址:https://github.com/getify/You-Dont-Know-JS
==3炙选! 先告一段落(? ?)