JavaScript中this的全面解析及常見實例

更新時間：2019年05月14日 10:07:57 作者：heyushuo

這篇文章主要給大家介紹了關于JavaScript中this的全面解析及常見實例的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧

前言

this 關鍵字在 Javascript 中非常常見,但是很多開發(fā)者很難說清它到底指向什么。大部分人會從字面意思上去理解 this,認為 this 指向函數(shù)自身,實際上this 是在運行時進行綁定的，并不是在編寫時綁定，它的上下文取決于函數(shù)調(diào)
用時的各種條件。this 的綁定和函數(shù)聲明的位置沒有任何關系，只取決于函數(shù)的調(diào)用方式。

總結(jié): 函數(shù)被調(diào)用時發(fā)生 this 綁定，this 指向什么完全取決于函數(shù)在哪里被調(diào)用。

一、this 的綁定規(guī)則

this 一共有 4 中綁定規(guī)則，接下來一一介紹每種規(guī)則的解釋和規(guī)則直接的優(yōu)先級

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

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

獨立函數(shù)調(diào)用：獨立函數(shù)調(diào)用時 this 使用默認綁定規(guī)則，默認綁定規(guī)則下 this 指向 window（全局對象）。
嚴格模式下： this 無法使用默認綁定，this 會綁定到 undefined。

獨立函數(shù)調(diào)用

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();

函數(shù) sayName 雖然是在 obj.fn 內(nèi)部定義的，但是它仍然是一個獨立函數(shù)調(diào)用，this 仍然指向 window。

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

雖然 bar 是 obj.foo 的一個引用，但是實際上，它引用的是函數(shù)本身，因此此時的
bar() 其實是一個不帶任何修飾的獨立函數(shù)調(diào)用，因此應用了默認綁定。

1.2 隱式綁定

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

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

obj.foo();

對象屬性引用鏈中只有上一層或者說最后一層在調(diào)用中起作用。

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

obj.obj1.foo();

隱式丟失

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

第一種

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

雖然 bar 是 obj.foo 的一個引用，但是實際上，它引用的是函數(shù)本身，因此此時的bar() 其實是一個不帶任何修飾的獨立函數(shù)調(diào)用，因此應用了默認綁定。

第二種傳入回調(diào)函數(shù)時：

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

//和下邊這種一樣
setTimeout(obj.foo, 300);

1.3 顯示綁定

通過 call() 或者 apply()方法。第一個參數(shù)是一個對象，在調(diào)用函數(shù)時將這個對象綁定到 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;
}
// 簡單的輔助綁定函數(shù)
function bind(fn, obj) { 
 return function() {
 return fn.apply( obj, arguments ); //內(nèi)部已經(jīng)強制綁定了傳入函數(shù)this的指向
 };
}
var obj = { 
 a:2
};
var bar = bind( foo, obj ); 
var b = bar( 3 ); // 2 3
console.log( b ); // 5

bar函數(shù)無論如何調(diào)用,它總會手動在 obj 上調(diào)用 fn,強制把 fn 的 this 綁定到了 obj。這樣也解決前面提到的丟失綁定問題
由于硬綁定是一種非常常用的模式，所以在 ES5 中提供了內(nèi)置的方法 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來調(diào)用函數(shù)，或者說發(fā)生構(gòu)造函數(shù)調(diào)用時，會自動執(zhí)行下面的操作。

創(chuàng)建（或者說構(gòu)造）一個全新的對象。
這個新對象會被執(zhí)行 [[ 原型 ]] 連接。
這個新對象會綁定到函數(shù)調(diào)用的 this。
如果函數(shù)沒有返回其他對象，那么 new 表達式中的函數(shù)調(diào)用會自動返回這個新對象。

例如:

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}
//這個新對象會綁定到函數(shù)調(diào)用的 this。所以此時的this就是bar對象
console.log( bar.age ); // 25

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