技術標籤：DOM

JavaScript this 關鍵字

面嚮物件語言中 this 表示當前物件的一個引用。
但在 JavaScript 中 this 不是固定不變的，它會隨著執行環境的改變而改變。

1. 在方法中，this 表示該方法所屬的物件。
2. 如果單獨使用，this 表示全域性物件。
3. 在函式中，this 表示全域性物件。
4. 在函式中，在嚴格模式下，this 是未定義的(undefined)。
5. 在事件中，this 表示接收事件的元素。
6. 類似 call() 和 apply() bind方法可以將 this 引用到任何物件。

方法中的 this

在物件方法中， this 指向呼叫它所在方法的物件。

var
 
 person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

在上面一個例項中，this 表示 person 物件。

fullName 方法所屬的物件就是 person。

單獨使用 this

單獨使用 this，則它指向全域性(Global)物件。
例項

	console.log(this)
 
;//Window

在瀏覽器中，window 就是該全域性物件為 [object Window]:

嚴格模式下，如果單獨使用，this 也是指向全域性(Global)物件。

例項

<script>
		"use strict"
	console.log(this);//Window

函式中使用 this（預設）

在函式中，函式的所屬者預設繫結到 this 上。

function obj(){
		return console.log(this);
	}
	obj();//window

在瀏覽器中，window 就是該全域性物件為 [object Window]:

函式中使用 this（嚴格模式）

嚴格模式下函式是沒有繫結到 this 上，這時候 this 是 undefined。

例項

"use strict";
	function obj(){
		return console.log(this);
	}
	obj();//undefined

事件中的 this

在 HTML 事件控制代碼中，this 指向了接收事件的 HTML 元素：
例項

<button onclick="this.style.display='none'">
點我後我就消失了
</button>

顯式函式繫結

其實是一個很簡單的東西，認真看十分鐘就從一臉懵B 到完全 理解！
先看明白下面：

例 1

obj.objAge;  // 17
obj.myFun()  // 小張年齡 undefined

例 2

shows()  // 盲僧　

比較一下這兩者 this 的差別，第一個列印裡面的 this 指向 obj，第二個全域性宣告的 shows() 函式 this 是 window ；

1，call()、apply()、bind() 都是用來重定義 this 這個物件的！

如：

obj.myFun.call(db)；　　　　// 德瑪年齡 99
obj.myFun.apply(db);　　　 // 德瑪年齡 99
obj.myFun.bind(db)();　　　// 德瑪年齡 99

以上出了 bind 方法後面多了個 () 外 ，結果返回都一致！

由此得出結論，bind 返回的是一個新的函式，你必須呼叫它才會被執行。

2，對比call 、bind 、 apply 傳參情況下

obj.myFun.call(db,'成都','上海')；　　　　 // 德瑪 年齡 99  來自 成都去往上海
obj.myFun.apply(db,['成都','上海']);      // 德瑪 年齡 99  來自 成都去往上海  
obj.myFun.bind(db,'成都','上海')();       // 德瑪 年齡 99  來自 成都去往上海
obj.myFun.bind(db,['成都','上海'])();　　 // 德瑪 年齡 99  來自 成都, 上海去往 undefined　　

微妙的差距！

從上面四個結果不難看出:

第二個引數差別就來了：

call 、bind 、 apply 這三個函式的第一個引數都是 this 的指向物件，第二個引數差別就來了：

call 的引數是直接放進去的，第二第三第 n 個引數全都用逗號分隔，直接放到後面 obj.myFun.call(db,‘成都’, … ,‘string’ )。

apply 的所有引數都必須放在一個數組裡面傳進去 obj.myFun.apply(db,[‘成都’, …, ‘string’ ])。

bind 除了返回是函式以外，它 的引數和 call 一樣。

當然，三者的引數不限定是 string 型別，允許是各種型別，包括函式 、 object 等等！
原文地址：https://www.cnblogs.com/Shd-Study/p/6560808.html