JavaScript 中的 this 全面解析
隱式綁定
關于this，一般來說，誰調用了方法，該方法的this就指向誰，如：
- function foo(){
- console.log(this.a)
- }
- var a = 3;
- var obj = {
- a: 2,
- foo: foo
- };
- obj.foo(); // 輸出2,因為是obj調用的foo，所以foo的this指向了obj，而obj.a = 2
如果存在多次調用，對象屬性引用鏈只有上一層或者說***一層在調用位置中起作用，如：
- function foo() {
- console.log( this.a )
- }
- var obj2 = {
- a: 42,
- foo: foo
- }
- var obj1 = {
- a: 2,
- obj2: obj2
- }
- obj1.obj2.foo(); // 42
隱式丟失
一個最常見的this綁定問題就是被隱式綁定的函數會丟失綁定對象，也就是說他回應用默認綁定，從而把this綁定到全局對象或者undefined上，取決于是否是嚴格模式。
- function foo() {
- console.log( this.a )
- }
- var obj1 = {
- a: 2,
- foo: foo
- }
- var bar = obj1.foo; // 函數別名！
- var a = "oops, global"; // a是全局對象的屬性
- bar(); // "oops, global"
雖然bar是obj.foo的一個引用，但是實際上，它引用的是foo函數本身，因此此時的bar()其實是一個不帶任何修飾的函數調用，因此應用了默認綁定
一個更微妙、更常見并且更出乎意料的情況發生在傳入回調函數時：
- function foo() {
- console.log( this.a )
- }
- function doFoo( fn ){
- // fn 其實引用的是 foo
- fn(); // <-- 調用位置！
- }
- var obj = {
- a: 2,
- foo: foo
- }
- var a = "oops, global"; // a是全局對象的屬性
- doFoo( obj.foo ); // "oops, global"
參數傳遞其實就是一種隱式賦值，因此我們傳入函數時也會被隱式賦值，所以結果和上一個例子一樣，如果把函數傳入語言內置的函數而不是傳入自己聲明的函數(如setTimeout等)，結果也是一樣的
顯式綁定
簡單的說，就是指定this，如：call、apply、bind、new綁定等
硬綁定
- function foo( something ) {
- console.log( this.a, something)
- return this.a + something
- }
- var obj = {
- a: 2
- }
- var bar = function() {
- return foo.apply( obj, arguments)
- }
- var b = bar(3); // 2 3
- console.log(b); // 5
這里簡單做一下解釋： 在bar函數中，foo使用apply函數綁定了obj，也就是說foo中的this將指向obj，與此同時，使用arguments(不限制傳入參數的數量)作為參數傳入foo函數中;所以在運行bar(3)的時候，首先輸出obj.a也就是2和傳入的3，然后foo返回了兩者的相加值，所以b的值為5
同樣，本例也可以使用bind:
- function foo( something ) {
- console.log( this.a, something)
- return this.a + something
- }
- var obj = {
- a: 2
- }
- var bar = foo.bind(obj)
- var b = bar(3); // 2 3
- console.log(b); // 5
new綁定
在傳統面向類的語言中，使用new初始化類的時候會調用類中的構造函數，但是JS中new的機制實際上和面向類和語言完全不同。
使用new來調用函數，或者說發生構造函數調用時，會自動執行下面的操作：
- 創建(或者說構造)一個全新的對象
- 這個新對象會被執行[[Prototype]]連接
- 這個新對象會綁定到函數調用的this
- 如果函數沒有返回其他對象，那么new表達式中的函數會自動返回這個新對象 如：
- function foo(a){
- this.a = a
- }
- var bar = new foo(2);
- console.log(bar.a); // 2
使用new來調用foo(…)時，我們會構造一個新對象并把它綁定到foo(…)調用中的this上。new是***一種可以影響函數調用時this綁定行為的方法，我們稱之為new綁定。
this的優先級
毫無疑問，默認綁定的優先級是四條規則中***的，所以我們可以先不考慮它。
隱式綁定和顯式綁定哪個優先級更高?我們來測試一下：
- function foo(a){
- console.log(this.a)
- }
- var obj1 = {
- a: 2,
- foo: foo
- }
- var obj2 = {
- a: 3,
- foo: foo
- }
- obj1.foo(); // 2
- obj2.foo(); // 3
- obj1.foo.call(obj2); // 3
- obj2.foo.call(obj1); // 2
可以看到，顯式綁定優先級更高，也就是說在判斷時應當先考慮是否可以存在顯式綁定。
現在我們要搞清楚new綁定和隱式綁定的優先級誰高誰低 ：
- function foo(something){
- this.a = something
- }
- var obj1 = {
- foo: foo
- }
- var obj2 = {}
- obj1.foo(2);
- console.log(obj1.a); // 2
- obj1.foo.call(obj2,3);
- console.log(obj2.a); // 3
- var bar = new obj1.foo(4)
- console.log(obj1.a); // 2
- console.log(bar.a); // 4
可以看到new綁定比隱式綁定優先級高。但是new綁定和顯式綁定誰的優先級更高呢?
- function foo(something){
- this.a = something
- }
- var obj1 = {}
- var bar = foo.bind(obj1);
- bar(2);
- console.log(obj1.a); // 2
- var baz = new bar(3);
- console.log(obj1.a); // 2
- console.log(baz.a); // 3
可以看到，new綁定修改了硬綁定中的this，所以new綁定的優先級比顯式綁定更高。
之所以要在new中使用硬綁定函數，主要目的是預先設置函數的一些參數，這樣在使用new進行初始化時就可以只傳入其余的參數。bind(…)的功能之一就是可以把除了***個參數(***個參數用于綁定this)之外的其他參數都傳給下層的函數(這種技術稱為“部分應用”，是“柯里化”的一種)。舉例來說：
- function foo(p1,p2){
- this.val = p1 + p2;
- }
- // 之所以使用null是因為在本例中我們并不關心硬綁定的this是什么
- // 反正使用new時this會被修改
- var bar = foo.bind(null,'p1');
- var baz = new bar('p2');
- baz.val; // p1p2
- }
柯里化:在直覺上，柯里化聲稱“如果你固定某些參數，你將得到接受余下參數的一個函數”。所以對于有兩個變量的函數yx，如果固定了 y = 2，則得到有一個變量的函數 2x
This在箭頭函數中的應用
箭頭函數不使用this的四種標準規則，而是根據外層(函數或者全局)作用域來決定this。
我們來看一下箭頭函數的詞法作用域：
- function foo() {
- // 返回一個箭頭函數
- return (a) => {
- // this繼承自foo()
- console.log(this.a)
- };
- }
- var obj1 = {
- a: 2
- };
- var obj2 = {
- a: 3
- };
- var bar = foo.call(obj1);
- bar.call(obj2); // 2, 不是3！
foo()內部創建的箭頭函數會捕獲調用時foo()的this。由于foo()的this綁定到obj1，bar(引用箭頭函數)的this也會綁定到obj1，箭頭函數的綁定無法被修改。(new也不行!)
總結
如果要判斷一個運行中的函數的this綁定，就需要找到這個函數的直接調用位置。找到之后就可以順序應用下面這四條規則來判斷this的綁定對象。
由new調用?綁定到新創建的對象。
由call或者apply(或者bind)調用?綁定到指定的對象。
由上下文對象調用?綁定到那個上下文對象。
默認：在嚴格模式下綁定到undefined，否則綁定到全局對象。
