JavaScript之this全面解析以及常見實例

前言

this 關鍵字在 Javascript 中很是常見,可是不少開發者很難說清它到底指向什麼。大部分人會從字面意思上去理解 this,認爲 this 指向函數自身,實際上this 是在運行時進行綁定的，並非在編寫時綁定，它的上下文取決於函數調 用時的各類條件。this 的綁定和函數聲明的位置沒有任何關係，只取決於函數的調用方式。

總結: 函數被調用時發生 this 綁定，this 指向什麼徹底取決於函數在哪裏被調用。

1、this 的綁定規則

this 一共有 4 中綁定規則，接下來一一介紹每種規則的解釋和規則直接的優先級

• 默認綁定（嚴格/非嚴格模式）
• 隱式綁定
• 顯式綁定
• new 綁定

1.1 默認綁定（嚴格/非嚴格模式）

• 獨立函數調用： 獨立函數調用時 this 使用默認綁定規則，默認綁定規則下 this 指向 window（全局對象）。
• 嚴格模式下： this 沒法使用默認綁定，this 會綁定到 undefined。

獨立函數調用

function foo() {
  console.log(this.a);
}
var a = 2;
foo(); // 2
複製代碼

嚴格模式下：

function foo() {
 "use strict";
  console.log(this); //undefined
  console.log(this.a); //Uncaught TypeError: Cannot read property 'a' of undefined
}
var a = 2;
foo();
複製代碼

注意下邊兩種狀況

var age = "18";
var obj = {
  name: "heyushuo",
  age: 25,
  fn: function() {
    function sayName() {
      console.log(this); //window
      console.log(this.age); //undefined
    }
    sayName();
  }
};
obj.fn();
複製代碼

函數 sayName 雖然是在 obj.fn 內部定義的，可是它仍然是一個獨立函數調用，this 仍然指向 window。

var a = "global";
var obj = {
  a: 2,
  foo: function() {
    console.log(this.a); //global
  }
};
var bar = obj.foo; // 函數別名！
bar();
複製代碼

雖然 bar 是 obj.foo 的一個引用，可是實際上，它引用的是函數自己，所以此時的 bar() 實際上是一個不帶任何修飾的獨立函數調用，所以應用了默認綁定。

1.2 隱式綁定

當函數引用有上下文對象時(例如:obj.foo 這個時候使用 obj 上下文來引用函數 foo)，隱式綁定規則會把函數中的 this 綁定到這個上下文對象。

var obj = {
  name: "heyushuo,
  foo: function() {
    console.log(this.name); //heyushuo
  }
};

obj.foo();
複製代碼

對象屬性引用鏈中只有上一層或者說最後一層在調用中起做用。

var obj = {
  name: "heyushuo",
  obj1: {
    name: "kebi",
    foo: function() {
      console.log(this.name); // kebi
    }
  }
};

obj.obj1.foo();
複製代碼

隱式丟失 被隱式綁定的函數會丟失綁定對象，而應用默認綁定，把 this 綁定到全局對象或者 undefined(嚴格模式) 上。 第一種

var a = "global";
var obj = {
  a: 2,
  foo: function() {
    console.log(this.a); //global
  }
};
var bar = obj.foo; // 函數別名！
bar();
複製代碼

雖然 bar 是 obj.foo 的一個引用，可是實際上，它引用的是函數自己，所以此時的 bar() 實際上是一個不帶任何修飾的獨立函數調用，所以應用了默認綁定。

第二種傳入回調函數時：

var a = "global";
var obj = {
  a: 2,
  foo: function() {
    console.log(this.a); //global
  }
};
var bar = obj.foo; // 函數別名！
function doFoo(fn) {
  fn(); // <-- 調用位置！
}
doFoo(bar); //global

//和下邊這種同樣
setTimeout(obj.foo, 300);
複製代碼

1.3 顯示綁定

經過 call() 或者 apply()方法。第一個參數是一個對象，在調用函數時將這個對象綁定到 this 上，稱之爲顯示綁定。

function foo() {
  console.log(this.a);
}
var obj = {
  a: 2
};
foo.call(obj); // 2
複製代碼

顯示綁定引伸出來一個硬綁定,代碼以下

function foo(something) { 
 console.log( this.a, something ); 
 return this.a + something;
}
// 簡單的輔助綁定函數
function bind(fn, obj) { 
 return function() {
 return fn.apply( obj, arguments ); //內部已經強制綁定了傳入函數this的指向
 };
}
var obj = { 
 a:2
};
var bar = bind( foo, obj ); 
var b = bar( 3 ); // 2 3
console.log( b ); // 5
複製代碼

bar函數不管如何調用,它總會手動在 obj 上調用 fn,強制把 fn 的 this 綁定到了 obj。這樣也解決前面提到的丟失綁定問題

因爲硬綁定是一種很是經常使用的模式，因此在 ES5 中提供了內置的方法 Function.prototype.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
複製代碼

1.4 new綁定

使用new來調用函數，或者說發生構造函數調用時，會自動執行下面的操做。

• 建立（或者說構造）一個全新的對象。
• 這個新對象會被執行 [[ 原型 ]] 鏈接。
• 這個新對象會綁定到函數調用的 this。
• 若是函數沒有返回其餘對象，那麼 new 表達式中的函數調用會自動返回這個新對象。

例如:

function foo() { 
 this.name = "heyushuo";
 this.age = 25
} 
foo.prototype.sayName = function(){
  console.log(this.name+this.age);
}
var bar = new foo();

console.log(bar); //{name: "heyushuo", age: 25}
//這個新對象會綁定到函數調用的 this。因此此時的this就是bar對象
console.log( bar.age ); // 25
複製代碼

以下圖是 new foo() 這個對象

2、四種綁定關係的優先級

判斷this,能夠按照下面的順序來進行判斷：

1. 函數是否在 new 中調用（new 綁定）？若是是的話 this 綁定的是新建立的對象。

var bar = new foo()
複製代碼

2. 函數是否經過 call、apply（顯式綁定）或者硬綁定調用？若是是的話，this 綁定的是 指定的對象。

var bar = foo.call(obj2)
複製代碼

3. 函數是否在某個上下文對象中調用（隱式綁定）？若是是的話，this 綁定的是那個上 下文對象。

var bar = obj1.foo()
複製代碼

4. 若是都不是的話，使用默認綁定。若是在嚴格模式下，就綁定到 undefined，不然綁定到 全局對象。

var bar = foo()
複製代碼