call,apply,bind的區別及使用

javascript一切都來源於對象，函數也不例外。所以函數也有屬性和方法。每一個函數都包括length和prototype以及函數對象上的屬性和方法。好比call()、apply()、bind(),這三個方法都是用來改變調用的函數內部this的指向。在非函數後是不能使用的，都是在函數後去調用這些方法從而改變this的指向。簡單的來講，就是將函數內的this對象改成本身須要的this對象。

1. call()

調用一個對象的一個方法,並以另外一個對象去替換當前的上下對象。call方法能夠一個方法中的上下文對象從初始化的上下文替換成由thisObj指定的新對象。若是沒有設置thisObj,會被全局的global替代。

語法: Function.call(thisObj,[params1[,params2[,paramsN]]])
參數解析: thisObj: 當前須要被指定的this的那個新對象              
     params1,...,paramsN: 傳遞被調用的函數的參數值

例子：
    ```
    function Person(name,sex){
        this.name = name;
        this.sex = sex;
    }

    function Student(name,grade,sex){
        Person.call(this,name,sex)
        this.grade = grade
    }

    let stu = new Student('cherry','女','99')

    stu.name; // cherry
    stu.sex; // 女
    stu.grade; // 99
    ```
解析：student自己只有grade屬性，但在student中call person時，
將person中的this指向了student對象。因此後面的this.name,this.sex
都是將屬性建立到student上了。

2. apply()

將方法中的上下文對象從初始化上下文替換成由thisObj指向的新對象。

語法: Function.apply(thisObj,[params1,...,paramsN])
參數解析: thisObj: 當前須要被指定的this的那個新對象
        [params1,...,paramsN]: **數組類型的參數**,若是此函數非
        數組或非類數組會致使報錯。

1.使用shift()獲取數組第一個值

/*
* 這裏假設arguments是類數組對象，想獲取第一個的值
*/
const context = Array.prototype.shift.apply(arguments)

2.使用slice()將類數組轉爲數組

/*
* 一樣假設arguments是類數組對象
*/
const arr = Array.prototype.slice(arguments)

2.1 call()與apply()的異同點

它們的功能是同樣的，都是改變當前方法的this指向。只是傳參的形式不同，第一個參數都是當前要指定的this的值。第二個參數不一樣，call()是一個值，一個值的排列傳遞。apply()是將參數放在一個數組中進行傳遞。

2.2 call()與apply()的選取問題

主要看傳遞給函數參數的形式，若是參數的形式是數組或類數組則選擇apply(),若是是須要一個個的指明順序或者說傳遞給函數參數自身都是一個單獨的變量可選用call()。好比上面call()中的例子,若是Student中函數的順序與Person中須要的順序相同，可直接使用apply()方法(Person.apply(this,agruments))

2.3 apply()巧妙用法

調用apply()方法時,第一個參數是對象(this), 第二個參數是一個數組集合。那麼代表經過apply()的轉化能夠將一個數組對象[params1,...,paramsN]轉成參數列表(params1,...,paramsN)

1.Math.max()獲取最大值
數組是沒法直接使用Math.max方法的，而且接收的參數形式是參數列表(num1,num2,...,numN)

// Math.max的正常使用
Math.max(1,3,6) // 6 
Math.max.apply(null,[1,3,6])   // 等價於Math.max(1,3,6) 輸出6

這裏的thisObj設置爲null,是由於並無對象去調用這個方法,只是得到一個結果而已,因此直接設置爲null便可。

2.使用push()合併兩個數組
咱們都知道push沒法合併兩個數組，可是它支持push(params1,...,paramsN)

let arr = [1,3,4];
 /*
 * 1. 這裏的this是a數組，則是a數組調用push方法，參數是[5,6]
 * 2. 經過apply方法，[5,6]轉化成(5,6)並做爲函數參數傳遞給push
 * 則等價於 a.push(5,6)
 */
 Array.prototype.push.apply(a,[5,6]) // [1,3,4,5,6]

3. bind()

定義：第一個參數是當前要綁定的this對象，從第二個參數開始的參數會在調用原函數時將參數傳遞給原函數。主要做用改變當前函數的this指向，並將this的值傳遞給bind綁定的函數的值，同時返回一個新的函數實例，因此不會在bind的時候運行這個綁定函數。
語法：Function.bind(thisObj,args)
參數解析：thisObj: 當前須要被指定的this的那個新對象
args: 傳遞給原函數的參數

const name = "cherry";
cosnt obj = { name: "qq"};

function getName(){
    console.log(this.name)
}

/*
* 沒有強制指定this的值，而且前面也沒有調用改函數的對象
* 這時this指向全局window
*/ 
getName()  // cherry

/*
* bind以後this指向obj對象
*/
var newFn = getName.bind(obj)
newFn() // qq

這個方法會返回一個新函數，稱爲綁定函數。當調用這個綁定的函數時，第一個參數是改變這個綁定函數的this指向，從第二個參數以及後面的參數時在綁定函數運行時將做爲函數參數按順序傳遞給原參數

4. 總結

這三個函數都是改變當前函數的this指向，call和apply都是當即調用這個函數並返回結果。不一樣的使用call時的所需的函數參數時一個個順序傳遞的，apply則是使用數組列表傳遞的。針對於bind是建立一個新函數，再調用這個新函數纔會真正運行綁定函數。