一、this指向詳解

this的指向在函式定義的時候是確定不了的，只有函式執行的時候才能確定this到底指向誰，實際上this的最終指向的是那個呼叫它的物件（這句話不那麼嚴謹，作為一般情況下是可以的）

再加下面的補充，就完美啦：

情況1：如果一個函式中有this，但是它沒有被上一級的物件所呼叫，那麼this指向的就是window，這裡需要說明的是在js的嚴格版中this指向的不是window，但是我們這裡不探討嚴格版的問題(在嚴格版中的預設的this不再是window，而是undefined。)

function a(){
    var user = "追夢子";
    console.log(this
 
.user); //undefined
    console.log(this); //Window
}
a(); //相當於window.a();
//this最終指向的是呼叫它的物件，這裡的函式a實際是被Window物件所點出來的

情況2：如果一個函式中有this，這個函式有被上一級的物件所呼叫，那麼this指向的就是上一級的物件。

var o = {
    user:"追夢子",
    fn:function(){
        console.log(this.user); //追夢子
        console.log(this); //{user: "追夢子", fn: ƒ}
    }
}
o.fn(); //this執行時被它的上一級物件o{user: "追夢子", fn: ƒ}呼叫
 

情況3：如果一個函式中有this，這個函式中包含多個物件，儘管這個函式是被最外層的物件所呼叫，this指向的也只是它上一級的物件

var o = {
    a:10,
    b:{
        //a:12,
        fn:function(){
            console.log(this.a); //undefind  有兩個物件b和o,所以此this.a指向它的上一級
        }
    },
    fn1:function(){
        console.log(this.a);  //10 
    }
}
o.fn1();
o.b.fn();

另外還有兩種種特殊情況：

第一種：當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); //追夢子

function fn()  
{  
    this.user = '追夢子';  
    return null;
}
var a = new fn;  
console.log(a.user); //追夢子

總結：如果返回值是一個物件，那麼this指向的就是那個返回的物件，如果返回值不是一個物件那麼this還是指向函式的例項。
還有一點就是雖然null也是物件，但是在這裡this還是指向那個函式的例項，因為null比較特殊。
第二種：

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
　　

二、改變this指向的方法

第一種： new關鍵字改變this指向

//建構函式版this
function Fn(){
    this.user = "追夢子";
}
var a = new Fn();
console.log(a.user); //追夢子

用變數a建立了一個Fn的例項（相當於複製了一份Fn到物件a裡面），此時僅僅只是建立，並沒有執行，而呼叫這個函式Fn的是物件a，那麼this指向的自然是物件a，那麼為什麼物件a中會有user，因為你已經複製了一份Fn函式到物件a中，用了new關鍵字就等同於複製了一份

第二種： call（）

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

把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（）

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

apply方法和call方法有些相似，它也可以改變this的指向，也可以有多個引數，但是不同的是，第二個引數必須是一個數組，如下：

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方法有些不同，如下：

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();

同樣bind也可以有多個引數，並且引數可以執行的時候再次新增，但是要注意的是，引數是按照形參的順序進行的。

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

總結： call和apply都是改變上下文中的this並立即執行這個函式，bind方法可以讓對應的函式想什麼時候調就什麼時候呼叫，並且可以將引數在執行的時候新增，這是它們的區別