JavaScript this 關(guān)鍵字

與其他語言相比，this關(guān)鍵字在JavaScript中的行為略有不同。

JavaScript中，this關(guān)鍵字引用其所屬的對象。

根據(jù)使用位置，它具有不同的值：

• 在方法中，this引用所有者對象

• 單獨地，this指的是全局對象

• 在函數(shù)中，this引用全局對象

• 在函數(shù)中，在嚴(yán)格模式下，this是未定義的

• 在事件中，this指的是接收事件的元素

• 像call()和apply()這樣的方法，可以將其引用到任何對象

方法上下文

在對象方法中，this指代方法的user。

在下面的示例中，當(dāng)調(diào)用user.getName()時，函數(shù)內(nèi)部將this綁定到user對象：

var user = {
firstName: "Vishal",
lastName : "Choudhary",
age  : 22,
getName  : function() {
 return this.firstName + " " + this.lastName;
}
};

document.write(user.getName());   // "Vishal Choudhary"

這里user對象是所有者getName的方法。

全局上下文

在全局執(zhí)行上下文中（在任何函數(shù)之外），this無論是否處于嚴(yán)格模式下，都引用全局對象。

// 在Web瀏覽器中，窗口對象也是全局對象:
console.log(this === window);  // true

a = 50;
console.log(window.a); // 50

this.b = "NHOOO";
console.log(window.b)  // "NHOOO"
console.log(b) // "NHOOO"

在瀏覽器窗口中，全局對象是[object Window]。

函數(shù)上下文

在函數(shù)內(nèi)部，this值取決于函數(shù)的調(diào)用方式。

由于以下代碼不在嚴(yán)格模式下，this因此默認(rèn)為全局對象，即瀏覽器中的[object Window]：

function myFunc() {
return this;
}

在嚴(yán)格模式，然而this的值是undefined：

function myFunc() {
"use strict";
return this;
}

因此，在嚴(yán)格模式下，如果執(zhí)行上下文未定義它，則它將保持未定義狀態(tài)。

this在DOM事件處理程序中

當(dāng)一個函數(shù)用作事件處理程序時，this將被設(shè)置為觸發(fā)事件的元素：

let btn = document.querySelector("button");

btn.onclick = function() {
this.style.display = "none";
};

從內(nèi)聯(lián)事件處理程序調(diào)用代碼時，會將this設(shè)置為放置監(jiān)聽器的元素：

<button onclick="this.style.display='none'">點擊刪除我</button>

這是另一個示例：

<button onclick="alert(this)">點擊</button>

顯式函數(shù)綁定

call()和apply()方法是預(yù)定義的JavaScript方法。

它們都可以用于調(diào)用以另一個對象作為參數(shù)的對象方法。

function add(c, d) {
return this.a + this.b + c + d;
}

var obj = {a:5, b:10};

add.call(obj, 5, 7);  // 27
add.apply(obj, [10, 20]); // 45

箭頭函數(shù)（=>）

在箭頭函數(shù)（=>）中，this始終指向它被創(chuàng)建時所處的詞法作用域中的this。

在全局代碼中，它將被設(shè)置為全局對象：

var globalObj = this;
var myFunc = (() => this);

document.write(myFunc() === globalObj);   // true