為什麼要寫這篇文章？
我之前在阿里面試，以及其它公司面試的時候曾經被問到過這個問題，所以想要分享給大家，如果你能清楚地知道下面this 七種情況的區別，能跟面試官解釋清楚，無疑是一個大大的加分項，理解完這篇文章，面試官再怎麼問你this 都不怕了。
談到 Javascript 中的 this，竟然讓人覺得頭疼，它不像 Java，C++ 中的 this 指向呼叫 this 的該物件。
在函數中 this 到底取何值，是在函數真正被呼叫執行的時候確定下來的，函數定義的時候確定不了。
因為 this 的取值是執行上下文環境的一部分，每次呼叫函數，都會產生一個新的執行上下文環境。當你在程式碼中使用了 this，這個 this 的值就直接從執行的上下文中獲取了，而不會從作用域鏈中搜尋。
關於this 的取值，大體上可以分成以下七種情況：
情況一：全域& 呼叫普通函數
在全域環境中，this 永遠指向window。
console.log(this === window); //true
登入後複製
普通函數在呼叫時候(注意不是建構函數，前面不加 new)，其中的 this 也是指向 window。
var x = 10;
function foo(){
console.log(this); //Window
console.log(this.x); //10
}
foo();登入後複製
情況二：建構子
所謂的建構子是由一個函式new 出來的對象，一般建構子的函式名首字母大寫，例如像Object，Function，Array 這些都屬於構造函數。
function Foo(){
this.x = 10;
console.log(this); //Foo {x:10}
}
var foo = new Foo();
console.log(foo.x); //10登入後複製
上述程式碼，如果函數是建構函式使用，那麼其中的 this 就代表它即將 new 出來的物件。
但如果直接呼叫 Foo 函數，而不是 new Foo()，那就變成情況1，這時候 Foo() 就變成普通函數。
function Foo(){
this.x = 10;
console.log(this); //Window
}
var foo = Foo();
console.log(foo.x); //undefined登入後複製
情況三：物件方法
如果函數作為物件的方法時，方法中的 this 指向該物件。
var obj = {
x: 10,
foo: function () {
console.log(this); //Object
console.log(this.x); //10
}
};
obj.foo();登入後複製
注意：若是在物件方法中定義函數，那麼情況就不同了。
var obj = {
x: 10,
foo: function () {
function f(){
console.log(this); //Window
console.log(this.x); //undefined
}
f();
}
}
obj.foo();登入後複製
可以這麼理解：函數 f 雖然是在 obj.foo 內部定義的，但它仍然屬於一個普通函數，this 仍指向 window。 (這是個坑，要記牢)
在這裡，如果想要呼叫上層作用域中的變數 obj.x，可以使用 self 快取外部 this 變數。
var obj = {
x: 10,
foo: function () {
var self = this;
function f(){
console.log(self); //{x: 10}
console.log(self.x); //10
}
f();
}
}
obj.foo();登入後複製
如果foo 函數不作為物件方法被調用：
var obj = {
x: 10,
foo: function () {
console.log(this); //Window
console.log(this.x); //undefined
}
};
var fn = obj.foo;
fn();登入後複製
obj.foo 被賦值給一個全域變量，並沒有作為obj 的一個屬性被調用，那麼此時this 的值是window。
情況四：建構子 prototype 屬性
function Foo(){
this.x = 10;
}
Foo.prototype.getX = function () {
console.log(this); //Foo {x: 10, getX: function}
console.log(this.x); //10
}
var foo = new Foo();
foo.getX();登入後複製
在 Foo.prototype.getX 函數中，this 指向的 foo 物件。不僅僅如此，即便是在整個原型鏈中，this 代表的也是當前物件的值。
情況五：函數用 call、apply或 bind 呼叫。
var obj = {
x: 10
}
function foo(){
console.log(this); //{x: 10}
console.log(this.x); //10
}
foo.call(obj);
foo.apply(obj);
foo.bind(obj)();登入後複製
當一個函數被 call、apply 或 bind 呼叫時，this 的值就會取傳入的物件的值。
情況六：DOM event this
在一個HTML DOM 事件處理程序裡，this 總是指向這個處理程序所綁定的HTML DOM 節點：
function Listener(){
document.getElementById('foo').addEventListener('click', this.handleClick); //这里的 this 指向 Listener 这个对象。不是强调的是这里的 this
}
Listener.prototype.handleClick = function (event) {
console.log(this); //<p id="foo"></p>
}
var listener = new Listener();
document.getElementById('foo').click();登入後複製
這個很好理解，就相當於給函數傳參，使handleClick 運行時上下文改變了，相當於下面這樣的程式碼：
var obj = {
x: 10,
fn: function() {
console.log(this); //Window
console.log(this.x); //undefined
}
};
function foo(fn) {
fn();
}
foo(obj.fn);登入後複製
你也可以用透過bind 切換上下文:
function Listener(){
document.getElementById('foo').addEventListener('click',this.handleClick.bind(this));
}
Listener.prototype.handleClick = function (event) {
console.log(this); //Listener {}
}
var listener = new Listener();
document.getElementById('foo').click();登入後複製
前六種情況總結一句話為： this 指向呼叫該方法的物件。
情況七：箭頭函數中的 this
當使用箭頭函數的時候，情況就有所不同了：箭頭函數內部的 this 是詞法作用域，由上下文決定。
var obj = {
x: 10,
foo: function() {
var fn = () => {
return () => {
return () => {
console.log(this); //Object {x: 10}
console.log(this.x); //10
}
}
}
fn()()();
}
}
obj.foo();登入後複製
現在，箭頭函數完全修復了 this 的指向，this 總是指向詞法作用域，也就是外層呼叫者 obj。
如果使用箭頭函數，以前的這種 hack 寫法：
就不再需要了。
var obj = {
x: 10,
foo: function() {
var fn = () => {
return () => {
return () => {
console.log(this); // Object {x: 10}
console.log(this.x); //10
}
}
}
fn.bind({x: 14})()()();
fn.call({x: 14})()();
}
}
obj.foo();登入後複製
由於this 在箭頭函數中已經按照詞法作用域綁定了，所以，用call()或apply()呼叫箭頭函數時，無法對this 進行綁定，即傳入的第一個參數被忽略。
補充說明：
function test(){
var this = {}; //Uncaught SyntaxError: Unexpected token this
}登入後複製
#一門語言在運行的時候，需要一個環境，叫做宿主環境。
對於JavaScript，宿主環境最常見的是web 瀏覽器，瀏覽器提供了一個JavaScript 運行的環境，這個環境裡面，需要提供一些接口，好讓JavaScript 引擎能夠和宿主環境對接。
JavaScript 引擎才是真正執行 JavaScript 程式碼的地方，常見的引擎有 V8(目前最快 JavaScript 引擎、Google 生產)、JavaScript core。
在瀏覽器或服務端( nodejs )都有自己的 JS 引擎，在瀏覽器中，全域物件為 window，而在 nodejs 中，全域物件為 global。
以上是了解Javascript中的this的詳細內容。更多資訊請關注PHP中文網其他相關文章！
