初學JS的朋友可能對this指向問題有些困惑。最近在看《Javascript設計模式與開發實踐》一書，裡面總結得很到位。梳理下大致可以分為4情況，有興趣的可以自行去翻書閱讀。
作為物件的方法呼叫
作為普通函式呼叫
構造器呼叫
Function.prototype.call和Function.prototype.apply呼叫
1、作為物件的方法呼叫
當函式作為物件的方法被呼叫時，此時this指向該物件。
var obj = {
name: lq,
getName: function () {
console.log (this === obj); // true
console.log (this.name); // lq
}
}
複製程式碼2、作為普通函式呼叫
當函式不作為物件屬性被呼叫，而是通過普通的函式呼叫，此時的this總是指向全域性物件。在瀏覽器環境的JavaScript裡，就是window物件。
window.name = 'lq';
let getName = function () {
return this.name;
}
console.log ( getName() ); // 輸出：lq 此時this指向window物件
複製程式碼又比如:
window.name = 'lq';
let myObj = {
name: 'xiaoming',
getName: function () {
return this.name;
}
};
let getName = myObj.getName;
console.log ( getName() ); // 輸出：lq
複製程式碼有時候在我們點選div節點的事件函式內部，如果有一個callback回撥函式，當callback被當作普通函式呼叫時，callback內部的this指向window,但實際上我們想讓它指向被點選的div節點本身。程式碼如下：
<html>
<body>
<div id='div1'>my is div node</div>
</body>
<script>
window.id = 'window';
document.querySelector('#div1').onclick = function () {
console.log (this.id); // 輸出：div1
let callback = function () {
console.log (this.id); // 輸出：window
}
callback();
}
</script>
</html>
複製程式碼通常的解決方法是用一個變數來儲存div節點的引用：
document.querySelector('#div1').onclick = function () {
let _this = this;
let callback = function () {
console.log (_this.id); //輸出：div1
}
callback();
}
複製程式碼另外，在ESMAScript5下的strict嚴格模式下，這種普通函式呼叫已經被規定為不會指向全域性物件，而是undefined。
function fun () {
'use strict'
console.log (this); //輸出了：undefined
}
fun();
複製程式碼3、構造器呼叫
Javascript種沒有類的概念，但提供了new運算子，這樣我們可以從構造器中建立物件。除了宿主提供的一些內建函式，大部分的Javascript函式可以當作構造器使用。構造器跟普通函式沒什麼太大區別，唯一的區別是被呼叫的方式。
當用new運算子呼叫函式時，該函式會返回一個物件，一般情況下，構造器裡的this都指向返回的這個物件。如下：
let myObj = function () {
this.name = 'lq';
};
let obj = new myObj();
console.log (obj.name); //輸出：lq
複製程式碼如果new構造器顯式地返回一個object型別的物件，那麼運算的結果就會最終返回這個物件，this就不是我們之前所期望的this了。如下：
let myObj = function () {
this.name = 'lq';
return {
name: 'xiaoming';
}
}
let obj = new myObj();
console.log(obj.name); // 輸出：xiaoming
複製程式碼如果構造器返回的不是object型別的物件，而是一個非物件型別的資料，就沒有上面的問題。
let myObj = function () {
this.name = 'lq';
return 'xiaoming';
};
let obj = new myObj();
console.log (obj.name); //輸出：lq
複製程式碼4、Function.prototype.call和Function.prototype.apply呼叫
這兩種方式呼叫可以動態地改變傳入函式的this：
let obj1 = {
name: 'lq',
getName: function () {
return this.name;
}
};
let obj2 = {
name: 'xiaoming'
};
console.log (obj1.getName()); //輸出：lq
console.log (obj1.getName.call(obj2)); // 輸出：xiaoming
console.log (obj1.getName.apply(obj2)); //輸出：xiaoming
複製程式碼