javascript系列--this指向和apply，call，bind三者的區別

1、前言

this指向，apply，call，bind的區別是一個經典的面試問題，同時在項目中會常用到的原生的js方法。同時也是ES5中的衆多坑的一個。ES6中可能會極大的避免了this產生的錯誤，有時候須要維護老的項目仍是有必要了解一下this的指向和apply，call，bind三者的區別。

2、this的指向

在ES5中，其實this的指向，始終堅持一個原理：this永遠指向最後一個調用它的那個對象。

首先咱們看一個栗子1：

var name = "windowsName";
function a() {
    var name = "Cherry";
    console.log(this.name);          // windowsName
    console.log("inner:" + this);    // inner: Window
}
a();
console.log("outer:" + this)         // outer: Window

輸出windowsName，是由於「this永遠指向最後調用它的那個對象」，咱們看到調用a的地方a()，前面沒有調用的對象那麼就是全局對象window，就是全局對象調用a()，至關於window.a()。

若是使用嚴格模式，全局對象就是undefined，會報錯name of undefined

栗子2：

var name = "windowsName";
var a = {
    name: "Cherry",
    fn : function () {
        console.log(this.name);      // Cherry
    }
}
a.fn();

在這個栗子中，函數fn是對象a調用的，因此console是a中的name

栗子3:

var name = "windowsName";
    var a = {
        name: "Cherry",
        fn : function () {
            console.log(this.name);      // Cherry
        }
    }
    window.a.fn();

這個栗子中，記住「this永遠指向最後一個調用它的那個對象」，調用fn的對象有window，a，可是最後調用fn是a對象，因此this指向對象a中的name。

栗子4：

var name = "windowsName";
var a = {
    // name: "Cherry",
    fn : function () {
        console.log(this.name);      // undefined
    }
}
window.a.fn();

爲啥undefined，調用fn的對象有：window，a，最後一個調用fn是a，可是a中沒有對那麼進行定義，也不會繼續向上一個對象尋找 this.name，而是直接輸出 undefined，因此this.name爲undefined。

栗子5（比較坑）：

var name = "windowsName";
var a = {
    name : null,
    // name: "Cherry",
    fn : function () {
        console.log(this.name);      // windowsName
    }
}
var f = a.fn;
f();

這個栗子比較坑，爲啥 不是null，由於雖然將a對象的fn方法賦值給變量f，可是沒有調用，「this永遠執行最後一個調用ta的那個對象」，因爲剛剛的f沒有調用，因此fn()最後仍然是被window調用的，因此this指向的也就是window。

注意：this的指向並非在建立的時候能夠肯定，在ES5中，永遠都是this永遠指向最後調用它的那個對象。

栗子6:

var name = "windowsName";
function fn() {
    var name = 'Cherry';
    innerFunction();
    function innerFunction() {
        console.log(this.name);      // windowsName
    }
}
fn()

3、怎樣改變this的指向

改變this的指向，我總結如下的方法：

（1）使用ES6中箭頭函數

（2）函數內部使用_this = this

（3）使用apply，call，bind方法

（4）new實例化一個對象

舉個栗子7：

var name = "windowsName";
var a = {
    name : "Cherry",
    func1: function () {
        console.log(this.name)     
    },
    func2: function () {
        setTimeout(  function () {
            this.func1()
        },100);
    }
};
a.func2()     // this.func1 is not a function

在這個栗子中，不使用箭頭函數狀況下，會報錯的，由於最後調用setTimeout的對象時window，可是在window並無func1函數。

咱們改變this的指向這一節將吧這個栗子做爲demo進行改造。

一、ES6中的箭頭函數

衆所周知，ES6的箭頭函數是能夠避免ES5中this的坑，箭頭函數的this始終指向函數定義時候的this，而並非執行時候。箭頭函數須要記住這句話：「箭頭函數沒有this綁定，必須經過查找做用域來決定其值，若是箭頭函數被非箭頭函數包含，則this的綁定的是最近一層非箭頭函數的this，不然，this爲undefined」

栗子8：

var name = "windowsName";
var a = {
    name : "Cherry",
    func1: function () {
        console.log(this.name)     
    },
    func2: function () {
        setTimeout( () => {
            this.func1()
        },100);
    }
};
a.func2()     // Cherry

二、在函數內部使用_this = this

在不使用ES6中，那麼這種方式應該是最簡單的不會出錯的方式，咱們先將調用這個函數的對象保存在變量_this中，而後在函數中都使用這個_this，這樣_this就不會改變了。

栗子9：

var name = "windowsName";
var a = {
    
    name : "Cherry",
    func1: function () {
        console.log(this.name)     
    },
    func2: function () {
        var _this = this;
        setTimeout( function() {
            _this.func1()
        },100);
    }
};
a.func2()       // Cherry

在func2中，首先設置var _this = this，這裏this是調用func2的對象a，爲了防止在func2中的setTimeout被window調用而致使的在setTimeout中的this爲window。咱們將this賦值給一個變量_this，這樣在func2中咱們使用_this就是指向對象a了。

三、使用apply

栗子10：

var a = {
    name : "Cherry",
    func1: function () {
        console.log(this.name)
    },
    func2: function () {
        setTimeout(  function () {
            this.func1()
        }.apply(a),100);
    }
};
a.func2()            // Cherry

在栗子中，apply()方法調用一個函數，其具備一個指定的this值，以及做爲一個數組（或者相似數組的對象）提供的參數，fun.apply(thisArg, [argsArray])

thisArg：在fun函數運行時指定的this值。指定this的值並不必定是函數執行時真正的this值，若是是原始值的this會指向該原始值的自動包裝對象。

argsArray：一個數組或者類數組對象，其中的數組元素將做爲單獨的參數傳給fun函數。參數爲null或者undefined，則表示不須要傳入任何參數。

四、使用call

栗子11：

var a = {
    name : "Cherry",
    func1: function () {
        console.log(this.name)
    },
    func2: function () {
        setTimeout(  function () {
            this.func1()
        }.call(a),100);
    }
};
a.func2()            // Cherry

在栗子中，call()方法調用一個函數，其具備一個指定的this值，以及若干個參數列表，fun.call(thisArg, arg1, arg2, ...)

thisArg：在fun函數運行時指定的this值。指定this的值並不必定是函數執行時真正的this值，若是是原始值的this會指向該原始值的自動包裝對象。

arg1, arg2, ...：若干個參數列表

五、使用bind

栗子12：

var a = {
    name : "Cherry",
    func1: function () {
        console.log(this.name)
    },
    func2: function () {
        setTimeout(  function () {
            this.func1()
        }.bind(a)(),100);
    }
};
a.func2()            // Cherry

在栗子中，bind()方法建立一個新的函數，當被調用時，將其this的關鍵字設置爲提供的值，在調用新函數時，在任何提供一個給定的參數序列。

bind建立了一個新函數，必須手動去調用。

4、apply，call，bind區別

一、apply和call的區別

apply和call基本相似，他們的區別只是傳入的參數不一樣。apply傳入的參數是包含多個參數的數組，call傳入的參數是若干個參數列表。

栗子13：

var a ={
    name : "Cherry",
    fn : function (a,b) {
        console.log( a + b);
        console.log( this.name );
    }
}
var b = a.fn;
b.apply(a,[1,2])     // 3   Cherry

栗子14：

var a ={
    name : "Cherry",
    fn : function (a,b) {
        console.log( a + b);
        console.log( this.name );
    }
}
var b = a.fn;
b.call(a,1,2)       // 3   Cherry

二、bind和apply、call區別

bind方法會建立一個新的函數，當被調用的時候，將其this關鍵字設置爲提供的值，咱們必須手動去調用。

var a ={
    name : "Cherry",
    fn : function (a,b) {
        console.log( a + b);
        console.log( this.name );
    }
}
var b = a.fn;
b.bind(a,1,2)()   //3   //Cherry