首先,this的指向在函數定義的時候是肯定不了的，只有函數執行的時候才能肯定this到底指向誰，實際上this的最終指向的是那個調用它的對象（雖然在不少狀況下那樣去理解不會出什麼問題，可是實際上會有些特殊存在），那麼接下來我會深刻的探討這個問題。chrome
例子1：數組
function a(){
var user = " 小明";
console.log(this.user); //undefined
console.log(this); //Window
}
a();
按照咱們上面說的this最終指向的是調用它的對象，這裏的函數a實際是被Window對象所點出來的，下面的代碼就能夠證實。babel
function a(){
var user = " 小明";
console.log(this.user); //undefined
console.log(this); //Window
}
window.a();
例子2：app
var o = {
user:" 小明",
fn:function(){
console.log(this.user); // 小明
}
}
o.fn();
這裏的this指向的是對象o，由於你調用這個fn是經過o.fn()執行的，那天然指向就是對象o，this的指向在函數建立的時候是決定不了的，在調用的時候才能決定，誰調用的就指向誰。函數
若是要完全的搞懂this必須看接下來的幾個例子post
例子3：this
var o = {
user:" 小明",
fn:function(){
console.log(this.user); // 小明
}
}
window.o.fn();
這段代碼和上面的那段代碼幾乎是同樣的，可是這裏的this爲何不是指向window，若是按照上面的理論，最終this指向的是調用它的對象，這裏先說個而外話，window是js中的全局對象，咱們建立的變量其實是給window添加屬性，因此這裏能夠用window點o對象。es5
這裏先不解釋爲何上面的那段代碼this爲何沒有指向window，咱們再來看一段代碼。spa
var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //12
}
}
}
o.b.fn();
這裏一樣也是對象o點出來的，可是一樣this並無執行它，那你確定會說我一開始說的那些不就都是錯誤的嗎？其實也不是，只是一開始說的不許確，接下來我將補充一句話，我相信你就能夠完全的理解this的指向的問題。
狀況1：若是一個函數中有this，可是它沒有被上一級的對象所調用，那麼this指向的就是window，這裏須要說明在js的嚴格版中this指向的不是window。
狀況2：若是一個函數中有this，這個函數有被上一級的對象所調用，那麼this指向的就是上一級的對象。
狀況3：若是一個函數中有this，這個函數中包含多個對象，儘管這個函數是被最外層的對象所調用，this指向的也只是它上一級的對象，例子3能夠證實。
接下來咱們繼續看幾個例子。
var o = {
a:10,
b:{
// a:12,
fn:function(){
console.log(this.a); //undefined
}
}
}
o.b.fn();
儘管對象b中沒有屬性a，這個this指向的也是對象b，由於this只會指向它的上一級對象，無論這個對象中有沒有this要的東西。
還有一種比較特殊的狀況，例子4：
var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //undefined
console.log(this); //window
}
}
}
var j = o.b.fn;
j();
這裏this指向的是window，這句話一樣相當重要」this永遠指向的是調用它的對象，也就是看它執行的時候是誰調用就指向誰「，例子4中雖然函數fn是被對象b所引用，可是在將fn賦值給變量j的時候並無執行，因此最終指向的是window，這和例子3是不同的，例子3是直接執行了fn。
構造函數版this：
function Fn(){
this.user = " 小明";
}
var a = new Fn();
console.log(a.user); // 小明
這裏之因此對象a能夠點出函數Fn裏面的user是由於new關鍵字能夠改變this的指向，理解這句話能夠想一想咱們的例子3，咱們這裏用變量a建立了一個Fn的實例（至關於複製了一份Fn到對象a裏面），此時僅僅只是建立，並無執行，而調用這個函數Fn的是對象a，那麼this指向的天然是對象a，那麼爲何對象a中會有user，由於你已經複製了一份Fn函數到對象a中，用了new關鍵字就等同於複製了一份。
當this碰到return時
function fn()
{
this.user = ' 小明';
return {};
}
var a = new fn;
console.log(a.user); //undefined
function fn()
{
this.user = ' 小明';
return function(){};
}
var a = new fn;
console.log(a.user); //undefined
function fn()
{
this.user = ' 小明';
return 1;
}
var a = new fn;
console.log(a.user); // 小明
function fn()
{
this.user = ' 小明';
return undefined;
}
var a = new fn;
console.log(a.user); // 小明
從這些例子中能夠總結出，若是返回值是一個對象，那麼this指向的就是那個返回的對象，若是返回值不是一個對象那麼this仍是指向函數的實例。
function fn()
{
this.user = ' 小明';
return undefined;
}
var a = new fn;
console.log(a); //fn {user: " 小明"}
特殊狀況null也是對象，可是在這裏this仍是指向那個函數的實例。
function fn()
{
this.user = ' 小明';
return null;
}
var a = new fn;
console.log(a.user); // 小明
當this遇到call、apply、bind方法時
一、call()
var a = {
user:"小明",
fn:function(){
console.log(this.user); //小明
}
}
var b = a.fn;
b.call(a);
經過在call方法，給第一個參數添加要把b添加到哪一個環境中，簡單來講，this就會指向那個對象。
call方法除了第一個參數之外還能夠添加多個參數，以下：
var a = {
user:"小明",
fn:function(e,ee){
console.log(this.user); //小明
console.log(e+ee); //3
}
}
var b = a.fn;
b.call(a,1,2);
二、apply()
apply方法和call方法有些類似，它也能夠改變this的指向
var a = {
user:"小明",
fn:function(){
console.log(this.user); //小明
}
}
var b = a.fn;
b.apply(a);
一樣apply也能夠有多個參數，可是不一樣的是，第二個參數必須是一個數組，以下：
var a = {
user:"小明",
fn:function(e,ee){
console.log(this.user); //小明
console.log(e+ee); //11
}
}
var b = a.fn;
b.apply(a,[10,1]);
//注意若是call和apply的第一個參數寫的是null，那麼this指向的是window對象
var a = {
user:"小明",
fn:function(){
console.log(this); //Window {external: Object, chrome: Object, document: document, a: Object, speechSynthesis: SpeechSynthesis…}
}
}
var b = a.fn;
b.apply(null);
三、bind()
bind方法和call、apply方法有些不一樣，可是無論怎麼說它們均可以用來改變this的指向。
先來講說它們的不一樣吧。
var a = {
user:"小明",
fn:function(){
console.log(this.user);
}
}
var b = a.fn;
b.bind(a);
咱們發現代碼沒有被打印，對，這就是bind和call、apply方法的不一樣，實際上bind方法返回的是一個修改事後的函數。
var a = {
user:"小明",
fn:function(){
console.log(this.user);
}
}
var b = a.fn;
var c = b.bind(a);
console.log(c); //function() { [native code] }
那麼咱們如今執行一下函數c看看，能不能打印出對象a裏面的user
var a = {
user:"小明",
fn:function(){
console.log(this.user); //小明
}
}
var b = a.fn;
var c = b.bind(a);
c();
總結：call和apply都是改變上下文中的this並當即執行這個函數，bind方法可讓對應的函數想何時調就何時調用，而且能夠將參數在執行的時候添加，這是它們的區別，根據本身的實際狀況來選擇使用。
this遇到-定時器以及箭頭函數時
使用js中的定時器（setInterval，setTimeout），很容易會遇到this指向的問題。
直接上例子：
var name = 'my name is window';
var obj = {
name: 'my name is obj',
fn: function () {
var timer = null;
clearInterval(timer);
timer = setInterval(function () {
console.log(this.name); //my name is window
}, 1000)
}
}
在這裏，從this.name能夠看出this的指向是window。
若是沒有特殊指向，setInterval和setTimeout的回調函數中this的指向都是window。這是由於JS的定時器方法是定義在window下的。可是平時不少場景下，都須要修改this的指向。這裏總結了幾種：
一、最經常使用的方法：在外部函數中將this存爲一個變量，回調函數中使用該變量，而不是直接使用this。
var name = 'my name is window';
var obj = {
name: 'my name is obj',
fn: function () {
var that = this;
var timer = null;
clearInterval(timer);
timer = setInterval(function () {
console.log(that.name); //my name is obj
}, 1000)
}
}
在fn中加了var that = this; 回調函數中使用that代替this便可。這種方法最多見，使用也最普遍。
二、使用bind()方法（bind()爲ES5的標準，低版本IE下有兼容問題，能夠引入es5-shim.js解決）
bind()的做用相似call和apply，都是修改this指向。可是call和apply是修改this指向後函數會當即執行，而bind則是返回一個新的函數，它會建立一個與原來函數主體相同的新函數，新函數中的this指向傳入的對象。
var name = 'my name is window';
var obj = {
name: 'my name is obj',
fn: function () {
var timer = null;
clearInterval(timer);
timer = setInterval(function () {
console.log(this.name); //my name is obj
}.bind(this), 1000)
}
}
在這裏爲何不能用call和apply，是由於call和apply不是返回函數，而是當即執行函數，那麼，就失去了定時器的做用。
三、使用es6的箭頭函數：箭頭函數的最大做用就是this指向。
var name = 'my name is window';
var obj = {
name: 'my name is obj',
fn: function () {
var timer = null;
clearInterval(timer);
timer = setInterval(() => {
console.log(this.name); //my name is obj
}, 1000)
}
}
箭頭函數沒有本身的this，它的this繼承自外部函數的做用域。因此，在該例中，定時器回調函數中的this，是繼承了fn的this。固然箭頭函數也有兼容問題，要是兼容低版本ie，須要使用babel編譯才能夠。