es6的this的指向性問題詳解(接著上一篇文章)

我們都知道在es6中函數(shù)的擴展多了箭頭函數(shù),那么箭頭函數(shù)中的this如何指向呢花墩?

下面我們來看一看:

其實es6的this指向就是一句話,this對象的指向是可變的盔性,但是在箭頭函數(shù)中仲锄,他是固定的劲妙。函數(shù)體內的this對象,就是定義時所在的對象儒喊,而不是使用時所在的對象


setTimeout的參數(shù)是一個箭頭函數(shù)镣奋,這個箭頭函數(shù)的定義生效是在foo函數(shù)生成時,而它的真正執(zhí)行要等到 100 毫秒后怀愧。如果是普通函數(shù)侨颈,執(zhí)行時this應該指向全局對象window,這時應該輸出21芯义。但是哈垢,箭頭函數(shù)導致this總是指向函數(shù)定義生效時所在的對象(本例是{id: 42}),所以輸出的是42扛拨。

箭頭函數(shù)可以讓setTimeout里面的this耘分,綁定定義時所在的作用域,而不是指向運行時所在的作用域绑警。下面是另一個例子求泰。


Timer函數(shù)內部設置了兩個定時器,分別使用了箭頭函數(shù)和普通函數(shù)计盒。前者的this綁定定義時所在的作用域(即Timer函數(shù))渴频,后者的this指向運行時所在的作用域(即全局對象)。所以北启,3100 毫秒之后枉氮,timer.s1被更新了 3 次,而timer.s2一次都沒更新暖庄。

箭頭函數(shù)可以讓this指向固定化聊替,這種特性很有利于封裝回調函數(shù)。下面是一個例子培廓,DOM 事件的回調函數(shù)封裝在一個對象里面惹悄。


上面代碼的init方法中,使用了箭頭函數(shù)肩钠,這導致這個箭頭函數(shù)里面的this泣港,總是指向handler對象。否則价匠,回調函數(shù)運行時当纱,this.doSomething這一行會報錯,因為此時this指向document對象踩窖。

this指向的固定化坡氯,并不是因為箭頭函數(shù)內部有綁定this的機制,實際原因是箭頭函數(shù)根本沒有自己的this,導致內部的this就是外層代碼塊的this箫柳。正是因為它沒有this手形,所以也就不能用作構造函數(shù)。

所以悯恍,箭頭函數(shù)轉成 ES5 的代碼如下



上面代碼之中库糠,只有一個this,就是函數(shù)foo的this涮毫,所以t1瞬欧、t2、t3都輸出同樣的結果罢防。因為所有的內層函數(shù)都是箭頭函數(shù)艘虎,都沒有自己的this,它們的this其實都是最外層foo函數(shù)的this篙梢。

除了this,以下三個變量在箭頭函數(shù)之中也是不存在的美旧,指向外層函數(shù)的對應變量:arguments渤滞、super、new.target榴嗅。


上面代碼中妄呕,箭頭函數(shù)內部的變量arguments,其實是函數(shù)foo的arguments變量嗽测。

另外绪励,由于箭頭函數(shù)沒有自己的this,所以當然也就不能用call()唠粥、apply()疏魏、bind()這些方法去改變this的指向。


上面代碼中晤愧,箭頭函數(shù)沒有自己的this大莫,所以bind方法無效,內部的this指向外部的this官份。

長期以來只厘,JavaScript 語言的this對象一直是一個令人頭痛的問題,在對象方法中使用this舅巷,必須非常小心羔味。箭頭函數(shù)”綁定”this,很大程度上解決了這個困擾钠右。

原文來自:阮一峰ECMAScript 6 入門

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末赋元,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌们陆,老刑警劉巖寒瓦,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異坪仇,居然都是意外死亡杂腰,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門椅文,熙熙樓的掌柜王于貴愁眉苦臉地迎上來喂很,“玉大人,你說我怎么就攤上這事皆刺∩倮保” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵羡蛾,是天一觀的道長漓帅。 經(jīng)常有香客問我,道長痴怨,這世上最難降的妖魔是什么忙干? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮浪藻,結果婚禮上捐迫,老公的妹妹穿的比我還像新娘。我一直安慰自己爱葵,他們只是感情好施戴,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著萌丈,像睡著了一般赞哗。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上辆雾,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天懈玻,我揣著相機與錄音,去河邊找鬼乾颁。 笑死涂乌,一個胖子當著我的面吹牛,可吹牛的內容都是我干的英岭。 我是一名探鬼主播湾盒,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼诅妹!你這毒婦竟也來了罚勾?” 一聲冷哼從身側響起毅人,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎尖殃,沒想到半個月后丈莺,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡送丰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年缔俄,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片器躏。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡俐载,死狀恐怖,靈堂內的尸體忽然破棺而出登失,到底是詐尸還是另有隱情遏佣,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布揽浙,位于F島的核電站状婶,受9級特大地震影響,放射性物質發(fā)生泄漏馅巷。R本人自食惡果不足惜膛虫,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望令杈。 院中可真熱鬧走敌,春花似錦碴倾、人聲如沸逗噩。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽异雁。三九已至,卻和暖如春僧须,著一層夾襖步出監(jiān)牢的瞬間纲刀,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工担平, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留示绊,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓暂论,卻偏偏與公主長得像面褐,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子取胎,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內容

  • 函數(shù)參數(shù)的默認值 基本用法 在ES6之前展哭,不能直接為函數(shù)的參數(shù)指定默認值湃窍,只能采用變通的方法。 上面代碼檢查函數(shù)l...
    呼呼哥閱讀 3,402評論 0 1
  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理匪傍,服務發(fā)現(xiàn),斷路器役衡,智...
    卡卡羅2017閱讀 134,716評論 18 139
  • 函數(shù)參數(shù)的默認值 ES6 之前,不能直接為函數(shù)的參數(shù)指定默認值映挂,只能采用變通的方法 上面代碼檢查函數(shù)log的參數(shù)y...
    無跡落花閱讀 195評論 0 1
  • 1.概念 在JavaScript中泽篮,this 是指當前函數(shù)中正在執(zhí)行的上下文環(huán)境柑船,因為這門語言擁有四種不同的函數(shù)調...
    BluesCurry閱讀 1,135評論 0 2
  • 把時間當作朋友—依靠打磨三個基本概念、讓人自悟成功秘訣的書鞍时。新知亏拉,糾錯,重視這三種方式就是打磨概念最主要的工具逆巍。 ...
    梅馨與生活閱讀 771評論 3 2