與其他語言相比，函數的 this 關鍵字在 JavaScript 中的表現略有不同，此外，在嚴格模式和非嚴格模式之間也會有一些差別。
在絕大多數情況下，函數的呼叫方式決定了 this 的值。this 不能在執行期間被賦值，並且在每次函數被呼叫時 this 的值也可能會不同。ES5 引入了 bind 方法來設定函數的 this 值，而不用考慮函數如何被呼叫的，ES2015 引入了支援 this 詞法解析的箭頭函數（它在閉合的執行環境內設定 this 的值）。
論是否在嚴格模式下，在全域性執行環境中（在任何函數體外部）this 都指向全域性物件。
// 在瀏覽器中, window 物件同時也是全域性物件：
console.log(this === window); // true
a = 37;
console.log(window.a); // 37
this.b = 'Heath';
console.log(window.b); // "Heath"
console.log(b); // "Heath"
// 在node中, 頂級this指向module.exports，並非指向global
// 在node中, 你可以使用 globalThis 獲取全域性物件，無論你的程式碼是否在當前上下文執行。
console.log(this === module.exports); // true
console.log(this === global); // false
this.b = 'Heath'; //
console.log(module.exports.b); // "Heath"
console.log(globalThis); // global
在函數內部，this 的值取決於函數被呼叫的方式。
簡單呼叫
因爲下面 下麪的程式碼不在嚴格模式下，且 this 的值不是由該呼叫設定的，所以 this 的值預設指向全域性物件。
function f1() {
return this;
}
//在瀏覽器中：全域性物件是window
console.log(f1() === window); // true
//在Node中：全域性物件是global
console.log(f1() === global); // true
然而，在嚴格模式下，this 將保持他進入執行環境時的值，所以下面 下麪的 this 將會預設爲 undefined。
function f2() {
'use strict'; // 這裏是嚴格模式
return this;
}
console.log(f2() === undefined); // true
所以，在嚴格模式下，如果 this 沒有被執行環境（execution context）定義，那它將保持爲 undefined。
如果要想把 this 的值從一個環境傳到另一個，就要用 call 或者 apply 方法。
// 將一個物件作爲call和apply的第一個參數，this會被系結到這個物件。
let obj = { a: 'Custom' };
function whatsThis() {
console.log(this); // this的值取決於函數的呼叫方式
}
whatsThis(); // node 環境：global，瀏覽器環境：window
whatsThis.call(obj); // 'Custom'
whatsThis.apply(obj); // 'Custom'
當一個函數在其主體中使用 this 關鍵字時，可以通過使用函數繼承自 Function.prototype 的 call 或 apply 方法將 this 值系結到呼叫中的特定物件。
function add(c, d) {
console.log(this.a + this.b + c + d);
}
let o = { a: 1, b: 3 };
// 第一個參數是作爲‘this’使用的物件
// 後續參數作爲參數傳遞給函數呼叫
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
// 第一個參數也是作爲‘this’使用的物件
// 第二個參數是一個數組，數組裏的元素用作函數呼叫中的參數
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
使用 call 和 apply 函數的時候要注意，如果傳遞給 this 的值不是一個物件，JavaScript 會嘗試使用內部 ToObject 操作將其轉換爲物件。因此，如果傳遞的值是一個原始值比如 7 或 ‘foo’，那麼就會使用相關建構函式將它轉換爲物件，所以原始值 7 會被轉換爲物件，像 new Number(7) 這樣，而字串 ‘foo’ 轉化成 new String(‘foo’) 這樣，例如：
function bar() {
console.log(Object.prototype.toString.call(this));
}
//原始值 7,'foo' 被隱式轉換爲物件
bar.call(7); // [object Number]
bar.call('foo'); // [object String]
bind 方法
ECMAScript 5 引入了 Function.prototype.bind()。呼叫 f.bind(someObject)會建立一個與 f 具有相同函數體和作用域的函數，但是在這個新函數中，this 將永久地被系結到了 bind 的第一個參數，無論這個函數是如何被呼叫的。
function f() {
return this;
}
let g = f.bind({ a: 'heath' });
console.log(g()); // heath
let h = g.bind({ a: 'yoo' }); // bind只生效一次！
console.log(h()); // heath
let oBind = { a: 37, f: f, g: g, h: h };
console.log(oBind.a, oBind.f(), oBind.g(), oBind.h()); // 37, 37, heath, heath
箭頭函數
在箭頭函數中，this 與封閉詞法環境的 this 保持一致。在全域性程式碼中，它將被設定爲全域性物件：
let globalObject = this;
let foo = () => this;
console.log(foo() === globalObject); // true
let globalObject = this;
let foo = () => this;
console.log(foo() === globalObject); // true
// 作爲物件的一個方法呼叫
let obj1 = { foo: foo };
console.log(obj1.foo() === globalObject); // true
// 嘗試使用apply來設定this
console.log(foo.apply(obj1) === globalObject); // true
// 嘗試使用call來設定this
console.log(foo.call(obj1) === globalObject); // true
// 嘗試使用bind來設定this
foo = foo.bind(obj1);
console.log(foo() === globalObject); // true
無論如何，foo 的 this 被設定爲他被建立時的環境（在上面的例子中，就是全域性物件）。這同樣適用於在其他函數內建立的箭頭函數：這些箭頭函數的 this 被設定爲封閉的詞法環境的。
// 建立一個含有bar方法的obj物件，
// bar返回一個函數，
// 這個函數返回this，
// 這個返回的函數是以箭頭函數建立的，
// 所以它的this被永久系結到了它外層函數的this。
// bar的值可以在呼叫中設定，這反過來又設定了返回函數的值。
let obj2 = {
bar: function () {
return () => this;
},
};
// 作爲obj物件的一個方法來呼叫bar，把它的this系結到obj。
// 將返回的函數的參照賦值給fn。
let fn = obj2.bar();
// 若在嚴格模式則爲undefined
console.log(fn() === obj2); // true
// 但是注意，如果你只是參照obj的方法，
// 而沒有呼叫它
let fn2 = obj2.bar;
// 那麼呼叫箭頭函數後，this指向window，因爲它從 bar 繼承了this。
console.log(fn2()() === global); // true
在上面的例子中，一個賦值給了 obj.bar 的函數（稱爲匿名函數 A），返回了另一個箭頭函數（稱爲匿名函數 B）。因此，在 A 呼叫時，函數 B 的 this 被永久設定爲 obj.bar（函數 A）的 this。當返回的函數（函數 B）被呼叫時，它 this 始終是最初設定的。在上面的程式碼範例中，函數 B 的 this 被設定爲函數 A 的 this，即 obj，所以即使被呼叫的方式通常將其設定爲 undefined 或全域性物件（或者如前面範例中的其他全域性執行環境中的方法），它的 this 也仍然是 obj 。
作爲物件的方法
當函數作爲物件裡的方法被呼叫時，它們的 this 是呼叫該函數的物件。
下面 下麪的例子中，當 obj3.f()被呼叫時，函數內的 this 將系結到 obj3 物件。
function f3() {
return this.prop;
}
let obj3 = {
prop: 37,
f: f3,
};
console.log(obj3.f()); // 37
請注意，這樣的行爲，根本不受函數定義方式或位置的影響。在前面的例子中，我們在定義物件 o 的同時，將函數內聯定義爲成員 f 。但是，我們也可以先定義函數，然後再將其附屬到 o.f。這樣做會導致相同的行爲：
let obj4 = { prop: 37 };
function independent() {
return this.prop;
}
obj4.f = independent;
console.log(obj4.f()); // 37
這表明函數是從 obj4 的 f 成員呼叫的纔是重點。
同樣，this 的系結只受最靠近的成員參照的影響。在下面 下麪的這個例子中，我們把一個方法 g 當作物件 o.b 的函數呼叫。在這次執行期間，函數中的 this 將指向 o.b。事實證明，這與他是物件 o 的成員沒有多大關係，最靠近的參照纔是最重要的。
let obj5 = {};
obj5.b = { g: independent, prop: 42 };
console.log(obj5.b.g()); // 42
原型鏈中的 this
對於在物件原型鏈上某處定義的方法，同樣的概念也適用。如果該方法存在於一個物件的原型鏈上，那麼 this 指向的是呼叫這個方法的物件，就像該方法在物件上一樣。
let obj6 = {
f: function () {
return this.a + this.b;
},
};
let p = Object.create(obj6);
p.a = 1;
p.b = 4;
console.log(p.f()); // 5
在這個例子中，物件 p 沒有屬於它自己的 f 屬性，它的 f 屬性繼承自它的原型。雖然在對 f 的查詢過程中，最終是在 obj6 中找到 f 屬性的，這並沒有關係；查詢過程首先從 p.f 的參照開始，所以函數中的 this 指向 p。也就是說，因爲 f 是作爲 p 的方法呼叫的，所以它的 this 指向了 p。這是 JavaScript 的原型繼承中的一個有趣的特性。
作爲建構函式
當一個函數用作建構函式時（使用 new 關鍵字），它的 this 被系結到正在構造的新物件。
雖然構造器返回的預設值是 this 所指的那個物件，但它仍可以手動返回其他的物件（如果返回值不是一個物件，則返回 this 物件）。
/*
* 建構函式這樣工作:
*
* function MyConstructor(){
* // 函數實體寫在這裏
* // 根據需要在this上建立屬性，然後賦值給它們，比如：
* this.fum = "nom";
* // 等等...
*
* // 如果函數具有返回物件的return語句，
* // 則該物件將是 new 表達式的結果。
* // 否則，表達式的結果是當前系結到 this 的物件。
* //（即通常看到的常見情況）。
* }
*/
function C() {
this.a = 37;
}
let obj7 = new C();
console.log(obj7.a); // 37
function C2() {
this.a = 37;
return { a: 38 };
}
obj7 = new C2();
console.log(obj7.a); // 38
在剛剛的例子中（C2），因爲在呼叫建構函式的過程中，手動的設定了返回物件，與 this 系結的預設物件被丟棄了。（這基本上使得語句 「this.a = 37;」成了「殭屍」程式碼，實際上並不是真正的「殭屍」，這條語句執行了，但是對於外部沒有任何影響，因此完全可以忽略它）。
作爲一個 DOM 事件處理常式
當函數被用作事件處理常式時，它的 this 指向觸發事件的元素（一些瀏覽器在使用非 addEventListener 的函數動態新增監聽函數時不遵守這個約定）。
// 被呼叫時，將關聯的元素變成藍色
function bluify(e) {
console.log(this === e.currentTarget); // 總是 true
// 當 currentTarget 和 target 是同一個物件時爲 true
console.log(this === e.target);
this.style.backgroundColor = '#A5D9F3';
}
// 獲取文件中的所有元素的列表
let elements = document.getElementsByTagName('*');
// 將bluify作爲元素的點選監聽函數，當元素被點選時，就會變成藍色
for (let i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', bluify, false);
}
作爲一個內聯事件處理常式
當程式碼被內聯 on-event 處理常式呼叫時，它的 this 指向監聽器所在的 DOM 元素：
<button οnclick="alert(this.tagName.toLowerCase());">
Show this
</button>
上面的 alert 會顯示 button。注意只有外層程式碼中的 this 是這樣設定的：
<button οnclick="alert((function(){return this})());">
Show inner this
</button>
在這種情況下，沒有設定內部函數的 this，所以它指向 global/window 物件（即非嚴格模式下呼叫的函數未設定 this 時指向的預設物件）。
關於 this 的總結：