一、this指向的詳解

概括：this的指向到底是指向哪裏？通常來說，只有當函數執行的時候才可以確定this指向的到底是誰，簡單的也可以這麽說：this最終指向的是那個調用它的對象。

常見的一般有以下幾種情況：

第一種：在一個函數中有this，但是函數沒有被上一級對象所調用，所以此時的this指向的是window（註意在嚴格模式下則不是），如以下代碼：

function blue() {
 var blue = "藍源";
 console.log(this.blue);//undefind
 console.log(this);//window
}
blue();//this指向調用它的那個對象，在這裏相當於window

第二種：在函數中有一個this，而且該函數被上一級對象所調用，所以此時的this指向的是調用該函數的上一級對象，如以下代碼：

var o = {
 name: "blue",
 fn: function(){
 console.log(this.name);//blue
 console.log(this);//指向o對象
 }
 }
o.fn();//此時this指向的是調用函數的對象o。

第三種：有一個函數中有this，函數中有多個對象，盡管這個函數是被最外層的對象調用，但是其中的this指向的只是它的上一級對象，如以下代碼：

var o = {
 name: "blue",
 a: {
 fn: function(){
 
 console.log(this.name);//undefind，這裏有兩個對象o和a,調用的時候都指向上一層對象a，這裏找不到聲明的name
 }
 },
 fn1: function(){
 console.log(this.name);//blue
 }
}
o.fn1();
o.a.fn();

第四種（特殊情況）：如果函數中有return，而且return返回的是一個對象，那麽調用時候的this指向不再是指向調用這個函數的實例了，而是指向這個函數返回的對象，如以下代碼：

function fn() 
{ 
 this.name = ‘blue‘; 
 return {}; 
}
var a = new fn; 
 
console.log(a.name); //undefined,這裏指向的是return返回的對象，是一個空對象

二、改變this指向的方法

第一種：使用call()

var a = {
 user:"blue",
 fn:function(){
 console.log(this.user); //blue
 }
}
var b = a.fn;
b.call(a); //若不用call，則b()執行後this指的是Window對象

call方法除了第一個參數以外還可以添加多個參數，如下：

var a = {
 user:"blue",
 fn:function(c,d){
 console.log(this.user); //blue
 console.log(e+ee); //3
 }
}
var b = a.fn;
b.call(a,1,2);

第二種：使用apply()

var a = {
 user:"blue",
 fn:function(){
 console.log(this.user); //blue
 }
}
var b = a.fn;
b.apply(a);

apply方法和call方法很類似，也可以接收多個參數，但是第二個參數必須是數組，如下：

var a = {
 user:"blue",
 fn:function(e,ee){
 console.log(this.user); //blue
 console.log(c+d); //11
 }
}
var b = a.fn;
b.apply(a,[10,1]);

第三種：使用bind()

bind和call，apply的使用方法有些不同，如果我們還是按照上面的方法寫代碼，會發現一些問題，如下：

var a = {
 user:"blue",
 fn:function(){
 console.log(this.user);
 }
}
var b = a.fn;
b.bind(a); //代碼沒有被打印

為什麽代碼沒有被打印呢？這就是不同的地方所在，實際上執行bind之後返回的是一個函數，想下面這樣寫才是正確的：

var a = {
 user:"blue",
 fn:function(){
 console.log(this.user); //blue
 }
}
var b = a.fn;
var c = b.bind(a);
c();

bind()方法也可以接收多個參數，並且參數可以執行的時候再次添加，但是要註意的是，參數是按照形參的順序進行的，如下：

var a = {
 user:"blue",
 fn:function(e,d,f){
 console.log(this.user); //blue
 console.log(e,d,f); //10 1 2
 }
}
var b = a.fn;
var c = b.bind(a,10);
c(1,2);

總結：

call(),apply()以及bind()方法都可以改變this指向，只是所使用的場景有點不一樣，bind()改變後的函數想什麽時候調用就什麽時候調用，call和apply都是改變指向後立即調用此方法。

JavaScript-改變this指向