詳細(xì)介紹JavaScript函數(shù)的作用域與this指向

函數(shù)的作用域與this指向是js中很重要的一部分，理清這點(diǎn)東西需要個(gè)邏輯，看看我的邏輯怎么樣...

下面是個(gè)提綱，可以直接挑你感興趣的條目閱讀。

? 函數(shù)的定義方式：直接定義（window下，內(nèi)部定義），對(duì)象的方法，對(duì)象原型的方法；

? 函數(shù)的調(diào)用方式：直接調(diào)用，call/apply，with

? 對(duì)于直接定義的函數(shù)和對(duì)象的方法，作用域默認(rèn)狀態(tài)下是它的定義處的作用域鏈。

? 對(duì)于直接定義的函數(shù)，this指向window。

? 對(duì)于對(duì)象的方法，this指向?qū)嵗瘜?duì)象（對(duì)應(yīng)于實(shí)例化對(duì)象默認(rèn)返回this的情況）。

? 用call/apply改變方法的this指向

? 在函數(shù)或方法的定義時(shí)可以通過(guò)with改變其作用域鏈。

下面分開(kāi)來(lái)具體說(shuō)說(shuō)：

函數(shù)的定義，如提綱中提到的可以分為兩種：直接定義（window下，內(nèi)部定義），對(duì)象的方法（或?qū)ο笤偷姆椒ǎ?。從下面的示例代碼中可以看到函數(shù)fn1與fn2以及對(duì)象的方法doFunction在函數(shù)使用name時(shí)name的值來(lái)自相應(yīng)的域。

在使用name的值時(shí)將“name”用“this.name”來(lái)代替會(huì)出現(xiàn)什么情況呢，看下例：

從結(jié)果來(lái)看可以驗(yàn)證提綱中的第4和5條，也可以看到this和作用域是兩套分離的鏈，遵循個(gè)自的變量查詢(xún)邏輯，具體的查詢(xún)邏輯在下面的性能分析中會(huì)提到，如果是新手建議先看一下“js的作用域鏈”方面的基礎(chǔ)知識(shí)。

關(guān)于函數(shù)的調(diào)用方法，我用下面的方示例說(shuō)明提綱中的第2、6條：

調(diào)用時(shí)call和apply的使用是為了改變被調(diào)用函數(shù)的this指向。with的使用是為了改變被調(diào)用函數(shù)中變量的查詢(xún)域。我們把上例中的call和name前的this去掉再加上with來(lái)演示with的作用。

看到with的使用并不方便，需要在被調(diào)用函數(shù)中添加with，有人可能想能不能向下面那樣調(diào)用來(lái)整體改變變量作用域而不去改變被調(diào)用函數(shù)呢？

很遺憾，不可以！所以在一些成熟的框架中隨處可見(jiàn)call和apply的使用，卻很少用到with，在用JSHint檢測(cè)js語(yǔ)法的時(shí)候with處都標(biāo)了小紅點(diǎn)，在一些js編碼指導(dǎo)中也建議盡量少用with，因?yàn)閣ith改變了變量的默認(rèn)查詢(xún)鏈，所以會(huì)給后期的維護(hù)人員一些困惑，還有性能方面的一些考慮，請(qǐng)慎用with。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com