# this指向問題 this應該是第一個讓人對JavaScript困惑的問題了，但是實際上它的原理非常簡單：**函數的this在運行時綁定**。 什么叫運行時綁定？就是函數的this**和你寫在哪里無關**，而是和**誰調用它有關**。誰調用這個函數，this就指向誰。 你現在大概會在想：原來這么簡單，我精通了！ 那可就大錯特錯了，可千萬別忘了光函數的調用方法就有兩種：直接調和new一個，而能做這兩個操作的地方可以說非常的多，所以還需要往下看。 注意：以下例子均為嚴格模式下運行，非嚴格模式這里不做考慮。 ## 初級 ```js function f1 () { console.log(this) } f1(); ``` 問結果是什么？先問自己：誰調用的它？你應該一下看不出來，這明明就是直接調的啊！可能有的基礎比較扎實的人會說**是window**，那真是非常的恭喜你了，但你要注意的是以上代碼在嚴格模式下是undefined。 正解： window / undefined ```js const foo = { bar: 10, fn: function() { console.log(this) console.log(this.bar) } } let fn1 = foo.fn fn1() ``` 結果是什么？你可能一眼看到fn是定義在foo對象里，那this可不就是foo嗎，剛剛說什么來著，先問自己：**誰調用的它**，來看最后一行再回答一遍。 正解：window / undefined ## 中級 ```js const foo = { bar: 10, fn: function() { console.log(this) console.log(this.bar) } } foo.fn() ``` 現在你應該已經有點感覺了，來，說出來，誰調用的它fn？ 正解：foo ## 中級+ ```js const person = { name: '橙子', brother: { name: '河浪', fn: function() { return this.name } } } console.log(person.brother.fn()) ``` 看能不能過關斬將，誰調用的fn？ 正解：brother ## call / bind / apply 此為3種**干預this**指向的操作，限于篇幅不展開講。 ## 箭頭函數 箭頭函數可以讓你省很多事，因為它的this一般來說都是符合你的直覺的：它的this就是定義時候的this。 > 本文作者： 不愛喝橙子汁