js中 call() ，apply()，bing()方法三者的用法和區別

面試中常常會被問到的，或者作筆試題的時候也會有這樣的問題，因此今天專門對這個問題作個總結；

先看個例子：

var age = '19'
var myObj = {
    name:'小賴',
    myAge:this.age,
    sayName:function(){
        console.log(this.name + '今年' + this.age)
    }
}
myObj.sayName(); // 小賴今年 undefined

var hero = {
    name:'艾希',
    age:'100'
}
myObj.sayName.call(hero); //艾希今年100
myObj.sayName.apply(hero); //艾希今年100
myObj.sayName.bind(hero)(); //艾希今年100

上面的例子看出 使用call(),apply(),bind()都是用來改變this指向的；

以上除了 bind 方法後面多了個 () 外 ，結果返回都同樣！ 這樣是由於bind()返回的是一個函數，必須調用才能執行。

而後我再稍微改下這個例子；

再往下看：

var myObj1 = {
    name:'小王',
    myAge:this.age,
    sayName:function(add, front){
        console.log(this.name + '今年' + this.age + '在'+add+'作'+front)
    }
}
var heros ={
    name:'艾希尼亞',
    age:'20'
}
myObj1.sayName.call(heros,'上海','前端'); //艾希尼亞今年20在上海作前端
myObj1.sayName.apply(heros,['上海','前端']); //艾希尼亞今年20在上海作前端
myObj1.sayName.bind(heros,['上海','前端'])(); // 艾希尼亞今年20在上海,前端作undefined  ；這裏有錯亂
myObj1.sayName.bind(heros,'上海','前端')(); // 艾希尼亞今年20在上海作前端
myObj1.sayName.bind(heros)('上海','前端'); // 艾希尼亞今年20在上海作前端

從上面的例子能夠看出call，apply, bind 這三個方法的第一個參數都是this的要指向的對象，

第二個參數就有差異了call的參數是一個一個放進去的中間用 ，參數全都用 ，逗號隔開；

apply的第二個參數都必須放在一個數組裏面傳進去 數組裏面的值和sayName方法中是一一對應的；

bind方法除了返回的是一個函數外 它的第二個參數和call同樣。

三者參數不僅限定是字符串類型，能夠是各類類型 函數，對象等均可以，另外能夠看出bind方法的第二個參數還能夠在調用的時候再傳。