你不懂JS:作用域與閉包 附錄C:詞法this

官方中文版原文鏈接

感謝社區(qū)中各位的大力支持更米,譯者再次奉上一點點福利:阿里云產品券,享受所有官網優(yōu)惠,并抽取幸運大獎:點擊這里領取

這本書通篇沒有講解this機制的任何細節(jié)印叁,有一個ES6的話題以一種重要的方式將this與詞法作用域聯(lián)系了起來曹仗,我們將快速檢視它一下榨汤。

ES6為函數(shù)聲明增加了一種特殊的語法形式,稱為“箭頭函數(shù)”怎茫。它看起來像這樣:

var foo = a => {
    console.log( a );
};

foo( 2 ); // 2

這個所謂的“大箭頭”經常被稱為是 乏味煩冗的(諷刺)function關鍵字的縮寫收壕。

但是在箭頭函數(shù)上發(fā)生的一些事情要重要得多,而且這與在你的聲明中少敲幾下鍵盤無關。

簡單地說蜜宪,這段代碼有一個問題:


var obj = {
    id: "awesome",
    cool: function coolFn() {
        console.log( this.id );
    }
};

var id = "not awesome";

obj.cool(); // awesome

setTimeout( obj.cool, 100 ); // not awesome

這個問題就是在cool()函數(shù)上丟失了this綁定虫埂。有各種方法可以解決這個問題,但一個經常被重復的解決方案是var self = this;圃验。

它可能看起來像:

var obj = {
    count: 0,
    cool: function coolFn() {
        var self = this;

        if (self.count < 1) {
            setTimeout( function timer(){
                self.count++;
                console.log( "awesome?" );
            }, 100 );
        }
    }
};

obj.cool(); // awesome?

用不過于深入細節(jié)的方式講掉伏,var self = this的“解決方案”免除了理解和正確使用this綁定的整個問題,而是退回到我們也許感到更舒服的東西上面:詞法作用域损谦。self變成了一個可以通過詞法作用域和閉包解析的標識符岖免,而且一直不關心this綁定發(fā)生了什么。

人們不喜歡寫繁冗的東西照捡,特別是當他們一次又一次重復它的時候颅湘。于是,ES6的一個動機是幫助緩和這些場景栗精,將常見的慣用法問題 固定 下來闯参,就像這一個。

ES6的解決方案悲立,箭頭函數(shù)鹿寨,引入了一種稱為“詞法this”的行為。

var obj = {
    count: 0,
    cool: function coolFn() {
        if (this.count < 1) {
            setTimeout( () => { // 箭頭函數(shù)能好用薪夕?
                this.count++;
                console.log( "awesome?" );
            }, 100 );
        }
    }
};

obj.cool(); // awesome?

簡單的解釋是脚草,當箭頭函數(shù)遇到它們的this綁定時,它們的行為與一般的函數(shù)根本不同原献。它們摒棄了this綁定的所有一般規(guī)則馏慨,而是將它們的立即外圍詞法作用域作為this的值,無論它是什么姑隅。

于是写隶,在這個代碼段中,箭頭函數(shù)不會以不可預知的方式丟掉this綁定讲仰,它只是“繼承”cool()函數(shù)的this綁定慕趴。

雖然這使代碼更短,但在我看來鄙陡,箭頭函數(shù)只不過是將一個開發(fā)者們常犯的錯誤固化成了語言的語法冕房,這混淆了“this綁定”規(guī)則與“詞法作用域”規(guī)則。

換一種說法:為什么要使用this風格的編碼形式來招惹麻煩和繁冗趁矾?只要通過將它與詞法作用域混合把它剔除掉就好毒费。對于給定的一段代碼只采納一種方式或另一種看起來才是自然的,而不是在同一段代碼中將它們混在一起愈魏。

注意: 源自箭頭函數(shù)的另一個非議是,它們是匿名的,不是命名的培漏。參見第三章來了解為什么匿名函數(shù)不如命名函數(shù)理想的原因溪厘。

在我看來,這個“問題”的更恰當?shù)慕鉀Q方式是牌柄,正確地使用并接受this機制畸悬。

var obj = {
    count: 0,
    cool: function coolFn() {
        if (this.count < 1) {
            setTimeout( function timer(){
                this.count++; // `this` 因為 `bind(..)` 所以安全
                console.log( "more awesome" );
            }.bind( this ), 100 ); // 看,`bind()`!
        }
    }
};

obj.cool(); // more awesome

不管你是偏好箭頭函數(shù)的新的詞法this行為珊佣,還是偏好經得起考驗的bind()蹋宦,重要的是要注意箭頭函數(shù) 僅僅是關于可以少打一些“function”。

它們擁有一種我們應當學習并理解的咒锻,有意的行為上的不同冷冗,而且如果我們這樣選擇,就可以利用它們惑艇。

現(xiàn)在我們完全理解了詞法作用域(和閉包]镎蕖),理解詞法this應該是小菜一碟滨巴!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末思灌,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子恭取,更是在濱河造成了極大的恐慌泰偿,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蜈垮,死亡現(xiàn)場離奇詭異耗跛,居然都是意外死亡,警方通過查閱死者的電腦和手機窃款,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進店門课兄,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人晨继,你說我怎么就攤上這事烟阐。” “怎么了紊扬?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵蜒茄,是天一觀的道長。 經常有香客問我餐屎,道長檀葛,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任腹缩,我火速辦了婚禮屿聋,結果婚禮上空扎,老公的妹妹穿的比我還像新娘。我一直安慰自己润讥,他們只是感情好转锈,可當我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著楚殿,像睡著了一般撮慨。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上脆粥,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天砌溺,我揣著相機與錄音,去河邊找鬼变隔。 笑死规伐,一個胖子當著我的面吹牛,可吹牛的內容都是我干的弟胀。 我是一名探鬼主播楷力,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼孵户!你這毒婦竟也來了萧朝?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤夏哭,失蹤者是張志新(化名)和其女友劉穎检柬,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體竖配,經...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡何址,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了进胯。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片用爪。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖胁镐,靈堂內的尸體忽然破棺而出偎血,到底是詐尸還是另有隱情,我是刑警寧澤盯漂,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布颇玷,位于F島的核電站,受9級特大地震影響就缆,放射性物質發(fā)生泄漏帖渠。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一竭宰、第九天 我趴在偏房一處隱蔽的房頂上張望空郊。 院中可真熱鬧份招,春花似錦、人聲如沸渣淳。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽入愧。三九已至,卻和暖如春嗤谚,著一層夾襖步出監(jiān)牢的瞬間棺蛛,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工巩步, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留旁赊,地道東北人。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓椅野,卻偏偏與公主長得像终畅,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子竟闪,可洞房花燭夜當晚...
    茶點故事閱讀 43,627評論 2 350

推薦閱讀更多精彩內容