this 關鍵字 · JavaScript 教程

# this 關鍵字 ## 涵義 `this`關鍵字是一個非常重要的語法點。毫不夸張地說，不理解它的含義，大部分開發任務都無法完成。前一章已經提到，`this`可以用在構造函數之中，表示實例對象。除此之外，`this`還可以用在別的場合。但不管是什么場合，`this`都有一個共同點：它總是返回一個對象。簡單說，`this`就是屬性或方法“當前”所在的對象。 ```javascript this.property ``` 上面代碼中，`this`就代表`property`屬性當前所在的對象。下面是一個實際的例子。 ```javascript var person = { name: '張三', describe: function () { return '姓名：'+ this.name; } }; person.describe() // "姓名：張三" ``` 上面代碼中，`this.name`表示`name`屬性所在的那個對象。由于`this.name`是在`describe`方法中調用，而`describe`方法所在的當前對象是`person`，因此`this`指向`person`，`this.name`就是`person.name`。由于對象的屬性可以賦給另一個對象，所以屬性所在的當前對象是可變的，即`this`的指向是可變的。 ```javascript var A = { name: '張三', describe: function () { return '姓名：'+ this.name; } }; var B = { name: '李四' }; B.describe = A.describe; B.describe() // "姓名：李四" ``` 上面代碼中，`A.describe`屬性被賦給`B`，于是`B.describe`就表示`describe`方法所在的當前對象是`B`，所以`this.name`就指向`B.name`。稍稍重構這個例子，`this`的動態指向就能看得更清楚。 ```javascript function f() { return '姓名：'+ this.name; } var A = { name: '張三', describe: f }; var B = { name: '李四', describe: f }; A.describe() // "姓名：張三" B.describe() // "姓名：李四" ``` 上面代碼中，函數`f`內部使用了`this`關鍵字，隨著`f`所在的對象不同，`this`的指向也不同。只要函數被賦給另一個變量，`this`的指向就會變。 ```javascript var A = { name: '張三', describe: function () { return '姓名：'+ this.name; } }; var name = '李四'; var f = A.describe; f() // "姓名：李四" ``` 上面代碼中，`A.describe`被賦值給變量`f`，內部的`this`就會指向`f`運行時所在的對象（本例是頂層對象）。再看一個網頁編程的例子。 ```html <input type="text" name="age" size=3 onChange="validate(this, 18, 99);"> <script> function validate(obj, lowval, hival){ if ((obj.value < lowval) || (obj.value > hival)) console.log('Invalid Value!'); } </script> ``` 上面代碼是一個文本輸入框，每當用戶輸入一個值，就會調用`onChange`回調函數，驗證這個值是否在指定范圍。瀏覽器會向回調函數傳入當前對象，因此`this`就代表傳入當前對象（即文本框），然后就可以從`this.value`上面讀到用戶的輸入值。總結一下，JavaScript 語言之中，一切皆對象，運行環境也是對象，所以函數都是在某個對象之中運行，`this`就是函數運行時所在的對象（環境）。這本來并不會讓用戶糊涂，但是 JavaScript 支持運行環境動態切換，也就是說，`this`的指向是動態的，沒有辦法事先確定到底指向哪個對象，這才是最讓初學者感到困惑的地方。 ## 實質 JavaScript 語言之所以有 this 的設計，跟內存里面的數據結構有關系。 ```javascript var obj = { foo: 5 }; ``` 上面的代碼將一個對象賦值給變量`obj`。JavaScript 引擎會先在內存里面，生成一個對象`{ foo: 5 }`，然后把這個對象的內存地址賦值給變量`obj`。也就是說，變量`obj`是一個地址（reference）。后面如果要讀取`obj.foo`，引擎先從`obj`拿到內存地址，然后再從該地址讀出原始的對象，返回它的`foo`屬性。原始的對象以字典結構保存，每一個屬性名都對應一個屬性描述對象。舉例來說，上面例子的`foo`屬性，實際上是以下面的形式保存的。 ```javascript { foo: { [[value]]: 5 [[writable]]: true [[enumerable]]: true [[configurable]]: true } } ``` 注意，`foo`屬性的值保存在屬性描述對象的`value`屬性里面。這樣的結構是很清晰的，問題在于屬性的值可能是一個函數。 ```javascript var obj = { foo: function () {} }; ``` 這時，引擎會將函數單獨保存在內存中，然后再將函數的地址賦值給`foo`屬性的`value`屬性。 ```javascript { foo: { [[value]]: 函數的地址 ... } } ``` 由于函數是一個單獨的值，所以它可以在不同的環境（上下文）執行。 ```javascript var f = function () {}; var obj = { f: f }; // 單獨執行 f() // obj 環境執行 obj.f() ``` JavaScript 允許在函數體內部，引用當前環境的其他變量。 ```javascript var f = function () { console.log(x); }; ``` 上面代碼中，函數體里面使用了變量`x`。該變量由運行環境提供。現在問題就來了，由于函數可以在不同的運行環境執行，所以需要有一種機制，能夠在函數體內部獲得當前的運行環境（context）。所以，`this`就出現了，它的設計目的就是在函數體內部，指代函數當前的運行環境。 ```javascript var f = function () { console.log(this.x); } ``` 上面代碼中，函數體里面的`this.x`就是指當前運行環境的`x`。 ```javascript var f = function () { console.log(this.x); } var x = 1; var obj = { f: f, x: 2, }; // 單獨執行 f() // 1 // obj 環境執行 obj.f() // 2 ``` 上面代碼中，函數`f`在全局環境執行，`this.x`指向全局環境的`x`；在`obj`環境執行，`this.x`指向`obj.x`。 ## 使用場合 `this`主要有以下幾個使用場合。 **（1）全局環境** 全局環境使用`this`，它指的就是頂層對象`window`。 ```javascript this === window // true function f() { console.log(this === window); } f() // true ``` 上面代碼說明，不管是不是在函數內部，只要是在全局環境下運行，`this`就是指頂層對象`window`。 **（2）構造函數** 構造函數中的`this`，指的是實例對象。 ```javascript var Obj = function (p) { this.p = p; }; ``` 上面代碼定義了一個構造函數`Obj`。由于`this`指向實例對象，所以在構造函數內部定義`this.p`，就相當于定義實例對象有一個`p`屬性。 ```javascript var o = new Obj('Hello World!'); o.p // "Hello World!" ``` **（3）對象的方法** 如果對象的方法里面包含`this`，`this`的指向就是方法運行時所在的對象。該方法賦值給另一個對象，就會改變`this`的指向。但是，這條規則很不容易把握。請看下面的代碼。 ```javascript var obj ={ foo: function () { console.log(this); } }; obj.foo() // obj ``` 上面代碼中，`obj.foo`方法執行時，它內部的`this`指向`obj`。但是，下面這幾種用法，都會改變`this`的指向。 ```javascript // 情況一 (obj.foo = obj.foo)() // window // 情況二 (false || obj.foo)() // window // 情況三 (1, obj.foo)() // window ``` 上面代碼中，`obj.foo`就是一個值。這個值真正調用的時候，運行環境已經不是`obj`了，而是全局環境，所以`this`不再指向`obj`。可以這樣理解，JavaScript 引擎內部，`obj`和`obj.foo`儲存在兩個內存地址，稱為地址一和地址二。`obj.foo()`這樣調用時，是從地址一調用地址二，因此地址二的運行環境是地址一，`this`指向`obj`。但是，上面三種情況，都是直接取出地址二進行調用，這樣的話，運行環境就是全局環境，因此`this`指向全局環境。上面三種情況等同于下面的代碼。 ```javascript // 情況一 (obj.foo = function () { console.log(this); })() // 等同于 (function () { console.log(this); })() // 情況二 (false || function () { console.log(this); })() // 情況三 (1, function () { console.log(this); })() ``` 如果`this`所在的方法不在對象的第一層，這時`this`只是指向當前一層的對象，而不會繼承更上面的層。 ```javascript var a = { p: 'Hello', b: { m: function() { console.log(this.p); } } }; a.b.m() // undefined ``` 上面代碼中，`a.b.m`方法在`a`對象的第二層，該方法內部的`this`不是指向`a`，而是指向`a.b`，因為實際執行的是下面的代碼。 ```javascript var b = { m: function() { console.log(this.p); } }; var a = { p: 'Hello', b: b }; (a.b).m() // 等同于 b.m() ``` 如果要達到預期效果，只有寫成下面這樣。 ```javascript var a = { b: { m: function() { console.log(this.p); }, p: 'Hello' } }; ``` 如果這時將嵌套對象內部的方法賦值給一個變量，`this`依然會指向全局對象。 ```javascript var a = { b: { m: function() { console.log(this.p); }, p: 'Hello' } }; var hello = a.b.m; hello() // undefined ``` 上面代碼中，`m`是多層對象內部的一個方法。為求簡便，將其賦值給`hello`變量，結果調用時，`this`指向了頂層對象。為了避免這個問題，可以只將`m`所在的對象賦值給`hello`，這樣調用時，`this`的指向就不會變。 ```javascript var hello = a.b; hello.m() // Hello ``` ## 使用注意點 ### 避免多層 this 由于`this`的指向是不確定的，所以切勿在函數中包含多層的`this`。 ```javascript var o = { f1: function () { console.log(this); var f2 = function () { console.log(this); }(); } } o.f1() // Object // Window ``` 上面代碼包含兩層`this`，結果運行后，第一層指向對象`o`，第二層指向全局對象，因為實際執行的是下面的代碼。 ```javascript var temp = function () { console.log(this); }; var o = { f1: function () { console.log(this); var f2 = temp(); } } ``` 一個解決方法是在第二層改用一個指向外層`this`的變量。 ```javascript var o = { f1: function() { console.log(this); var that = this; var f2 = function() { console.log(that); }(); } } o.f1() // Object // Object ``` 上面代碼定義了變量`that`，固定指向外層的`this`，然后在內層使用`that`，就不會發生`this`指向的改變。事實上，使用一個變量固定`this`的值，然后內層函數調用這個變量，是非常常見的做法，請務必掌握。 JavaScript 提供了嚴格模式，也可以硬性避免這種問題。嚴格模式下，如果函數內部的`this`指向頂層對象，就會報錯。 ```javascript var counter = { count: 0 }; counter.inc = function () { 'use strict'; this.count++ }; var f = counter.inc; f() // TypeError: Cannot read property 'count' of undefined ``` 上面代碼中，`inc`方法通過`'use strict'`聲明采用嚴格模式，這時內部的`this`一旦指向頂層對象，就會報錯。 ### 避免數組處理方法中的 this 數組的`map`和`foreach`方法，允許提供一個函數作為參數。這個函數內部不應該使用`this`。 ```javascript var o = { v: 'hello', p: [ 'a1', 'a2' ], f: function f() { this.p.forEach(function (item) { console.log(this.v + ' ' + item); }); } } o.f() // undefined a1 // undefined a2 ``` 上面代碼中，`foreach`方法的回調函數中的`this`，其實是指向`window`對象，因此取不到`o.v`的值。原因跟上一段的多層`this`是一樣的，就是內層的`this`不指向外部，而指向頂層對象。解決這個問題的一種方法，就是前面提到的，使用中間變量固定`this`。 ```javascript var o = { v: 'hello', p: [ 'a1', 'a2' ], f: function f() { var that = this; this.p.forEach(function (item) { console.log(that.v+' '+item); }); } } o.f() // hello a1 // hello a2 ``` 另一種方法是將`this`當作`foreach`方法的第二個參數，固定它的運行環境。 ```javascript var o = { v: 'hello', p: [ 'a1', 'a2' ], f: function f() { this.p.forEach(function (item) { console.log(this.v + ' ' + item); }, this); } } o.f() // hello a1 // hello a2 ``` ### 避免回調函數中的 this 回調函數中的`this`往往會改變指向，最好避免使用。 ```javascript var o = new Object(); o.f = function () { console.log(this === o); } // jQuery 的寫法 $('#button').on('click', o.f); ``` 上面代碼中，點擊按鈕以后，控制臺會顯示`false`。原因是此時`this`不再指向`o`對象，而是指向按鈕的 DOM 對象，因為`f`方法是在按鈕對象的環境中被調用的。這種細微的差別，很容易在編程中忽視，導致難以察覺的錯誤。為了解決這個問題，可以采用下面的一些方法對`this`進行綁定，也就是使得`this`固定指向某個對象，減少不確定性。 ## 綁定 this 的方法 `this`的動態切換，固然為 JavaScript 創造了巨大的靈活性，但也使得編程變得困難和模糊。有時，需要把`this`固定下來，避免出現意想不到的情況。JavaScript 提供了`call`、`apply`、`bind`這三個方法，來切換/固定`this`的指向。 ### Function.prototype.call() 函數實例的`call`方法，可以指定函數內部`this`的指向（即函數執行時所在的作用域），然后在所指定的作用域中，調用該函數。 ```javascript var obj = {}; var f = function () { return this; }; f() === window // true f.call(obj) === obj // true ``` 上面代碼中，全局環境運行函數`f`時，`this`指向全局環境（瀏覽器為`window`對象）；`call`方法可以改變`this`的指向，指定`this`指向對象`obj`，然后在對象`obj`的作用域中運行函數`f`。 `call`方法的參數，應該是一個對象。如果參數為空、`null`和`undefined`，則默認傳入全局對象。 ```javascript var n = 123; var obj = { n: 456 }; function a() { console.log(this.n); } a.call() // 123 a.call(null) // 123 a.call(undefined) // 123 a.call(window) // 123 a.call(obj) // 456 ``` 上面代碼中，`a`函數中的`this`關鍵字，如果指向全局對象，返回結果為`123`。如果使用`call`方法將`this`關鍵字指向`obj`對象，返回結果為`456`。可以看到，如果`call`方法沒有參數，或者參數為`null`或`undefined`，則等同于指向全局對象。如果`call`方法的參數是一個原始值，那么這個原始值會自動轉成對應的包裝對象，然后傳入`call`方法。 ```javascript var f = function () { return this; }; f.call(5) // Number {[[PrimitiveValue]]: 5} ``` 上面代碼中，`call`的參數為`5`，不是對象，會被自動轉成包裝對象（`Number`的實例），綁定`f`內部的`this`。 `call`方法還可以接受多個參數。 ```javascript func.call(thisValue, arg1, arg2, ...) ``` `call`的第一個參數就是`this`所要指向的那個對象，后面的參數則是函數調用時所需的參數。 ```javascript function add(a, b) { return a + b; } add.call(this, 1, 2) // 3 ``` 上面代碼中，`call`方法指定函數`add`內部的`this`綁定當前環境（對象），并且參數為`1`和`2`，因此函數`add`運行后得到`3`。 `call`方法的一個應用是調用對象的原生方法。 ```javascript var obj = {}; obj.hasOwnProperty('toString') // false // 覆蓋掉繼承的 hasOwnProperty 方法 obj.hasOwnProperty = function () { return true; }; obj.hasOwnProperty('toString') // true Object.prototype.hasOwnProperty.call(obj, 'toString') // false ``` 上面代碼中，`hasOwnProperty`是`obj`對象繼承的方法，如果這個方法一旦被覆蓋，就不會得到正確結果。`call`方法可以解決這個問題，它將`hasOwnProperty`方法的原始定義放到`obj`對象上執行，這樣無論`obj`上有沒有同名方法，都不會影響結果。 ### Function.prototype.apply() `apply`方法的作用與`call`方法類似，也是改變`this`指向，然后再調用該函數。唯一的區別就是，它接收一個數組作為函數執行時的參數，使用格式如下。 ```javascript func.apply(thisValue, [arg1, arg2, ...]) ``` `apply`方法的第一個參數也是`this`所要指向的那個對象，如果設為`null`或`undefined`，則等同于指定全局對象。第二個參數則是一個數組，該數組的所有成員依次作為參數，傳入原函數。原函數的參數，在`call`方法中必須一個個添加，但是在`apply`方法中，必須以數組形式添加。 ```javascript function f(x, y){ console.log(x + y); } f.call(null, 1, 1) // 2 f.apply(null, [1, 1]) // 2 ``` 上面代碼中，`f`函數本來接受兩個參數，使用`apply`方法以后，就變成可以接受一個數組作為參數。利用這一點，可以做一些有趣的應用。 **（1）找出數組最大元素** JavaScript 不提供找出數組最大元素的函數。結合使用`apply`方法和`Math.max`方法，就可以返回數組的最大元素。 ```javascript var a = [10, 2, 4, 15, 9]; Math.max.apply(null, a) // 15 ``` **（2）將數組的空元素變為`undefined`** 通過`apply`方法，利用`Array`構造函數將數組的空元素變成`undefined`。 ```javascript Array.apply(null, ['a', ,'b']) // [ 'a', undefined, 'b' ] ``` 空元素與`undefined`的差別在于，數組的`forEach`方法會跳過空元素，但是不會跳過`undefined`。因此，遍歷內部元素的時候，會得到不同的結果。 ```javascript var a = ['a', , 'b']; function print(i) { console.log(i); } a.forEach(print) // a // b Array.apply(null, a).forEach(print) // a // undefined // b ``` **（3）轉換類似數組的對象** 另外，利用數組對象的`slice`方法，可以將一個類似數組的對象（比如`arguments`對象）轉為真正的數組。 ```javascript Array.prototype.slice.apply({0: 1, length: 1}) // [1] Array.prototype.slice.apply({0: 1}) // [] Array.prototype.slice.apply({0: 1, length: 2}) // [1, undefined] Array.prototype.slice.apply({length: 1}) // [undefined] ``` 上面代碼的`apply`方法的參數都是對象，但是返回結果都是數組，這就起到了將對象轉成數組的目的。從上面代碼可以看到，這個方法起作用的前提是，被處理的對象必須有`length`屬性，以及相對應的數字鍵。 **（4）綁定回調函數的對象** 前面的按鈕點擊事件的例子，可以改寫如下。 ```javascript var o = new Object(); o.f = function () { console.log(this === o); } var f = function (){ o.f.apply(o); // 或者 o.f.call(o); }; // jQuery 的寫法 $('#button').on('click', f); ``` 上面代碼中，點擊按鈕以后，控制臺將會顯示`true`。由于`apply()`方法（或者`call()`方法）不僅綁定函數執行時所在的對象，還會立即執行函數，因此不得不把綁定語句寫在一個函數體內。更簡潔的寫法是采用下面介紹的`bind()`方法。 ### Function.prototype.bind() `bind()`方法用于將函數體內的`this`綁定到某個對象，然后返回一個新函數。 ```javascript var d = new Date(); d.getTime() // 1481869925657 var print = d.getTime; print() // Uncaught TypeError: this is not a Date object. ``` 上面代碼中，我們將`d.getTime()`方法賦給變量`print`，然后調用`print()`就報錯了。這是因為`getTime()`方法內部的`this`，綁定`Date`對象的實例，賦給變量`print`以后，內部的`this`已經不指向`Date`對象的實例了。 `bind()`方法可以解決這個問題。 ```javascript var print = d.getTime.bind(d); print() // 1481869925657 ``` 上面代碼中，`bind()`方法將`getTime()`方法內部的`this`綁定到`d`對象，這時就可以安全地將這個方法賦值給其他變量了。 `bind`方法的參數就是所要綁定`this`的對象，下面是一個更清晰的例子。 ```javascript var counter = { count: 0, inc: function () { this.count++; } }; var func = counter.inc.bind(counter); func(); counter.count // 1 ``` 上面代碼中，`counter.inc()`方法被賦值給變量`func`。這時必須用`bind()`方法將`inc()`內部的`this`，綁定到`counter`，否則就會出錯。 `this`綁定到其他對象也是可以的。 ```javascript var counter = { count: 0, inc: function () { this.count++; } }; var obj = { count: 100 }; var func = counter.inc.bind(obj); func(); obj.count // 101 ``` 上面代碼中，`bind()`方法將`inc()`方法內部的`this`，綁定到`obj`對象。結果調用`func`函數以后，遞增的就是`obj`內部的`count`屬性。 `bind()`還可以接受更多的參數，將這些參數綁定原函數的參數。 ```javascript var add = function (x, y) { return x * this.m + y * this.n; } var obj = { m: 2, n: 2 }; var newAdd = add.bind(obj, 5); newAdd(5) // 20 ``` 上面代碼中，`bind()`方法除了綁定`this`對象，還將`add()`函數的第一個參數`x`綁定成`5`，然后返回一個新函數`newAdd()`，這個函數只要再接受一個參數`y`就能運行了。如果`bind()`方法的第一個參數是`null`或`undefined`，等于將`this`綁定到全局對象，函數運行時`this`指向頂層對象（瀏覽器為`window`）。 ```javascript function add(x, y) { return x + y; } var plus5 = add.bind(null, 5); plus5(10) // 15 ``` 上面代碼中，函數`add()`內部并沒有`this`，使用`bind()`方法的主要目的是綁定參數`x`，以后每次運行新函數`plus5()`，就只需要提供另一個參數`y`就夠了。而且因為`add()`內部沒有`this`，所以`bind()`的第一個參數是`null`，不過這里如果是其他對象，也沒有影響。 `bind()`方法有一些使用注意點。 **（1）每一次返回一個新函數** `bind()`方法每運行一次，就返回一個新函數，這會產生一些問題。比如，監聽事件的時候，不能寫成下面這樣。 ```javascript element.addEventListener('click', o.m.bind(o)); ``` 上面代碼中，`click`事件綁定`bind()`方法生成的一個匿名函數。這樣會導致無法取消綁定，所以下面的代碼是無效的。 ```javascript element.removeEventListener('click', o.m.bind(o)); ``` 正確的方法是寫成下面這樣： ```javascript var listener = o.m.bind(o); element.addEventListener('click', listener); // ... element.removeEventListener('click', listener); ``` **（2）結合回調函數使用** 回調函數是 JavaScript 最常用的模式之一，但是一個常見的錯誤是，將包含`this`的方法直接當作回調函數。解決方法就是使用`bind()`方法，將`counter.inc()`綁定`counter`。 ```javascript var counter = { count: 0, inc: function () { 'use strict'; this.count++; } }; function callIt(callback) { callback(); } callIt(counter.inc.bind(counter)); counter.count // 1 ``` 上面代碼中，`callIt()`方法會調用回調函數。這時如果直接把`counter.inc`傳入，調用時`counter.inc()`內部的`this`就會指向全局對象。使用`bind()`方法將`counter.inc`綁定`counter`以后，就不會有這個問題，`this`總是指向`counter`。還有一種情況比較隱蔽，就是某些數組方法可以接受一個函數當作參數。這些函數內部的`this`指向，很可能也會出錯。 ```javascript var obj = { name: '張三', times: [1, 2, 3], print: function () { this.times.forEach(function (n) { console.log(this.name); }); } }; obj.print() // 沒有任何輸出 ``` 上面代碼中，`obj.print`內部`this.times`的`this`是指向`obj`的，這個沒有問題。但是，`forEach()`方法的回調函數內部的`this.name`卻是指向全局對象，導致沒有辦法取到值。稍微改動一下，就可以看得更清楚。 ```javascript obj.print = function () { this.times.forEach(function (n) { console.log(this === window); }); }; obj.print() // true // true // true ``` 解決這個問題，也是通過`bind()`方法綁定`this`。 ```javascript obj.print = function () { this.times.forEach(function (n) { console.log(this.name); }.bind(this)); }; obj.print() // 張三 // 張三 // 張三 ``` **（3）結合`call()`方法使用** 利用`bind()`方法，可以改寫一些 JavaScript 原生方法的使用形式，以數組的`slice()`方法為例。 ```javascript [1, 2, 3].slice(0, 1) // [1] // 等同于 Array.prototype.slice.call([1, 2, 3], 0, 1) // [1] ``` 上面的代碼中，數組的`slice`方法從`[1, 2, 3]`里面，按照指定的開始位置和結束位置，切分出另一個數組。這樣做的本質是在`[1, 2, 3]`上面調用`Array.prototype.slice()`方法，因此可以用`call`方法表達這個過程，得到同樣的結果。 `call()`方法實質上是調用`Function.prototype.call()`方法，因此上面的表達式可以用`bind()`方法改寫。 ```javascript var slice = Function.prototype.call.bind(Array.prototype.slice); slice([1, 2, 3], 0, 1) // [1] ``` 上面代碼的含義就是，將`Array.prototype.slice`變成`Function.prototype.call`方法所在的對象，調用時就變成了`Array.prototype.slice.call`。類似的寫法還可以用于其他數組方法。 ```javascript var push = Function.prototype.call.bind(Array.prototype.push); var pop = Function.prototype.call.bind(Array.prototype.pop); var a = [1 ,2 ,3]; push(a, 4) a // [1, 2, 3, 4] pop(a) a // [1, 2, 3] ``` 如果再進一步，將`Function.prototype.call`方法綁定到`Function.prototype.bind`對象，就意味著`bind`的調用形式也可以被改寫。 ```javascript function f() { console.log(this.v); } var o = { v: 123 }; var bind = Function.prototype.call.bind(Function.prototype.bind); bind(f, o)() // 123 ``` 上面代碼的含義就是，將`Function.prototype.bind`方法綁定在`Function.prototype.call`上面，所以`bind`方法就可以直接使用，不需要在函數實例上使用。 ## 參考鏈接 - Jonathan Creamer, [Avoiding the "this" problem in JavaScript](http://tech.pro/tutorial/1192/avoiding-the-this-problem-in-javascript) - Erik Kronberg, [Bind, Call and Apply in JavaScript](https://variadic.me/posts/2013-10-22-bind-call-and-apply-in-javascript.html) - Axel Rauschmayer, [JavaScript’s this: how it works, where it can trip you up](http://www.2ality.com/2014/05/this.html)