[TOC] # this ## this 是什么 this 是在運行時進行綁定的，并不是在編寫時綁定，它的上下文取決于函數調用時的各種條件。this 的綁定和函數聲明的位置沒有任何關系，只取決于函數的調用方式。 <br> 當一個函數被調用時，會創建一個活動記錄（有時候也稱為執行上下文）。這個記錄會包含函數在哪里被調用（調用棧）、函數的調用方法、傳入的參數等信息。this 就是記錄的其中一個屬性，會在函數執行的過程中用到。 > 需要明確的是，this 在任何情況下都不指向函數的詞法作用域。在JavaScript 內部，作用域確實和對象類似，可見的標識符都是它的屬性。但是作用域“對象”無法通過JavaScript代碼訪問，它存在于JavaScript 引擎內部。 ## 優先級 現在我們可以根據優先級來判斷函數在某個調用位置應用的是哪條規則。可以按照下面的順序來進行判斷： 1. 函數是否在new 中調用（new 綁定）？如果是的話this 綁定的是新創建的對象。 ~~~ var bar = new foo() ~~~ 2. 函數是否通過call、apply（顯式綁定）或者bind？如果是的話，this 綁定的是 指定的對象。 ~~~ var bar = foo.call(obj2) ~~~ ~~~ // 不管我們給函數`bind`幾次，`fn`中的`this`永遠由第一次`bind`決定 let a = {} let fn = function () { console.log(this) } fn.bind().bind(a)() // => window ~~~ 3. 函數是否在某個上下文對象中調用（隱式綁定）？如果是的話，this 綁定的是那個上 下文對象。 ~~~ var bar = obj1.foo() ~~~ 4. 如果都不是的話，使用默認綁定。如果在嚴格模式下，就綁定到undefined，否則綁定到全局對象。 ~~~ var bar = foo() ~~~ ## 例外 ### 被忽略的this 如果你把null 或者undefined 作為this 的綁定對象傳入call、apply 或者bind，這些值 在調用時會被忽略，實際應用的是默認綁定規則： ~~~ function foo() { console.log( this.a ); } var a = 2; foo.call( null ); // 2 ~~~ 然而，總是使用null 來忽略this 綁定可能產生一些副作用。如果某個函數確實使用了 this（比如第三方庫中的一個函數），那默認綁定規則會把this 綁定到全局對象（在瀏覽 器中這個對象是window），這將導致不可預計的后果（比如修改全局對象）。 ### 間接引用 ~~~ function foo() { console.log( this.a ); } var a = 2; var o = { a: 3, foo: foo }; var p = { a: 4 }; o.foo(); // 3 (p.foo = o.foo)(); // 2 ~~~ 賦值表達式 `p.foo = o.foo` 的返回值是目標函數的引用，因此調用位置是 `foo()` 而不是`p.foo()` 或者 `o.foo()`。根據我們之前說過的，這里會應用默認綁定。 > 注意：對于默認綁定來說，決定this 綁定對象的并不是調用位置是否處于嚴格模式，而是函數體是否處于嚴格模式。如果函數體處于嚴格模式，this 會被綁定到undefined，否則this 會被綁定到全局對象。 ### 箭頭函數 箭頭函數其實是沒有`this`的，箭頭函數中的`this`只取決包裹箭頭函數的第一個普通函數的`this`。 ~~~ function a() { return () => { return () => { console.log(this) } } } console.log(a()()()) ~~~ 在這個例子中，因為包裹箭頭函數的第一個普通函數是`a`，所以此時的`this`是`window`。另外對箭頭函數使用`bind`這類函數是無效的。  # 參考資料 * 前端面試之道 - 掘金小冊 * 你不知道的JavaScript（上冊）