javascript中call(),apply().bind()方法的做用和異同

原文章發表在 Klay-Clam的我的博客

1、細節

• javascript 中函數存在「定義時上下文」，「運行時上下文」
• 上下文是可變的

1. call()

call(),爲改變某個函數運行時的上下文(context)而存在的，換句話說，是爲了改變函數內部的this指向.

// demo1
var sayKlay = {
    name :"Klay",
    say : function(){
        console.log(this.name);
    }
}
var sayClam = {
    name : 'Clam' 
}
/* 
sayClam()沒有say方法，可是sayKlay()有呀
因此能夠去把sayKlay.say()方法的運行時上下文
也就是運行時的this的指向，指向sayClam()
這個時候低啊用say()方法就能夠sayClam了。
*/
sayKlay.say.call(sayClam); // Clam

// demo2
function a(xx) {         
    this.b = xx; 
} 
var o = {}; 
a.call(o, 5); 
console.log(a.b);    // undefined 
console.log(o.b);    // 5

參考：MDN call()方法

2.apply()

apply()與call()做用沒有區別，用法與call()方法稍有區別，就是call()的第二個參數(調用函數使用的參數)，是一個一個傳入的；

而apply()的第二個參數的值是使用數組的形式傳入的

function add(a,b) {         
    this.sum = a + b; 
} 
var o = {}; 
add.call(o, 5,5);
console.log(o.sum);    // 10
add.apply(o,[3,5]);
console.log(o.sum);    // 8

參考 MDN apply()方法

3.bind()

bind()的做用其實與call()以及apply()都是同樣的，都是爲了改變函數運行時的上下文，bind()與後面二者的區別是，call()和apply()在調用函數以後會當即執行，而bind()方法調用並改變函數運行時的上下文的以後，返回一個新的函數，在咱們須要調用的地方去調用他。

// bind()方法並不會直接調用，只是改變了函數的上下文，併成爲一個副本
var button = document.getElementById("button"),
    text = document.getElementById("text");
button.onclick = function() {
    alert(this.id); // 彈出text
}.bind(text);
// ie6-ie8不支持bind()方法，因此要用下面的方法去模擬bind()
if (!function() {}.bind) {
    Function.prototype.bind = function(context) {
        var self = this
            , args = Array.prototype.slice.call(arguments);
            
        return function() {
            return self.apply(context, args.slice(1));    
        }
    };
}

參考MDN bind()方法

2、總結

利用上面的call(),apply()和bind()方法，能夠在代碼複用減小代碼的冗餘上面有很大的幫助，之前編碼的過程當中，的確是沒有很好的利用，但願在從此的編碼的過程當中本身能夠努力的去嘗試，去試錯。

enjoy~