比較call( ) apply( ) bind( )

cheng10 發(fā)布于2019-08-20 15:20 / 1624人閱讀

摘要：簡(jiǎn)單比較一下與和的第一個(gè)實(shí)參是要調(diào)用函數(shù)的母對(duì)象，它是調(diào)用上下文，在函數(shù)體內(nèi)通過(guò)來(lái)獲得對(duì)它的引用。而則會(huì)立即執(zhí)行函數(shù)。

簡(jiǎn)單比較一下call() apply() bind()

《JavaScript: The Definitive Guide》

call()與apply()

call()和apply()的第一個(gè)實(shí)參是要調(diào)用函數(shù)的母對(duì)象，它是調(diào)用上下文，在函數(shù)體內(nèi)通過(guò)this來(lái)獲得對(duì)它的引用。簡(jiǎn)單來(lái)說(shuō)就是把一個(gè)方法綁定到一個(gè)對(duì)象上去調(diào)用：

栗如，要想以對(duì)象o的方法來(lái)調(diào)用函數(shù)f()：

f.call(o);
f.apply(o);

其實(shí)相當(dāng)于：

o.m = f; //將f存儲(chǔ)為o的臨時(shí)方法
o.m(); //調(diào)用它，不傳入?yún)?shù)
delete o.m; //將臨時(shí)方法刪除

--> 對(duì)于call()，第一個(gè)實(shí)參之后的所有實(shí)參就是要傳入待調(diào)用函數(shù)的值。栗如：

//以對(duì)象o的方法的形式調(diào)用函數(shù)f()，并傳入兩個(gè)參數(shù)
f.call(o, 1, 2);

--> 對(duì)于apply()，它的實(shí)參都放入一個(gè)數(shù)組當(dāng)中：

f.apply(o,[1, 2]);

給apply()傳入的參數(shù)數(shù)組可以是任意長(zhǎng)度的，栗如：

//找出一個(gè)數(shù)組中最大的數(shù)值元素
var biggest = Math.max.apply(Math, array_of_numbers);

傳入apply()的參數(shù)數(shù)組可以是類數(shù)組對(duì)象也可以是真實(shí)數(shù)組。實(shí)際上，可以將當(dāng)前函數(shù)的arguments數(shù)組直接傳入apply()來(lái)調(diào)用另一個(gè)函數(shù)：

//將對(duì)象o中名為m的方法替換為另一個(gè)方法
//可以在調(diào)用原始方法之前和之后記錄日志消息
function trace(o, m) {
    var original = o[m];//在閉包中保存原始方法
    o[m] = function() {//定義新的方法
        console.log(new Date(), "Entering", m);
        var result = original.apply(this, arguments);//調(diào)用原始函數(shù)
        console.log(new Date(), "Exiting", m);
        return result;
     };
}
//這個(gè)新方法是包裹原始方法的另一個(gè)泛函數(shù) (monkey-patching)?

bind() 方法

bind()是ES5中的方法。
當(dāng)在函數(shù)f()上調(diào)用bind()方法并傳入一個(gè)對(duì)象o作為參數(shù)，這個(gè)方法將返回一個(gè)新的函數(shù)，（以函數(shù)調(diào)用的方式）調(diào)用新的函數(shù)將會(huì)把原始的函數(shù)f()當(dāng)作o的方法來(lái)調(diào)用。傳入新的函數(shù)的任何實(shí)參都講傳入原始函數(shù)。栗如：

function f(y) { return this.x + y; }
var o =  { x: 1 };
var g = f.bind(o);
g(2); //=> 3

可以用ES3簡(jiǎn)單模擬：

function bind(f, o) {
    if(f.bind) return f.bind(o);
    else return function() {
        return f.apply(o, arguments);
    }
}

然而，bind()方法不僅僅是將函數(shù)綁定至一個(gè)對(duì)象----除了第一個(gè)參數(shù)外，傳入bind()的實(shí)參也會(huì)綁定至this，這個(gè)附帶的應(yīng)用是一種常見(jiàn)的函數(shù)式編程技術(shù)，也被稱為“柯里化“。

function f(y, z) { return this.x + y + z }
var g = f.bind({ x: 1 }, 2);
g(3);//=> 6 this.x綁定到1， y綁定到2， z綁定到3

如果用ES3模擬：

if(!Function.prototype.bind){
    Function.prototype.bind = function(o /*, args*/){
        //將this和arguments的值保存至變量中
        //以便在后面嵌套的函數(shù)中可以使用它們
        var self = this, boundArgs = arguments;
        
        //bind方法的返回值是一個(gè)函數(shù)
        return function(){
            //創(chuàng)建一個(gè)實(shí)參列表，將傳入bind()的第二個(gè)及后續(xù)的實(shí)參傳入這個(gè)參數(shù)
            var args = [], i;
            for(i=1; i
http://web.jobbole.com/83642/
深入淺出妙用 Javascript 中 apply、call、bind
一個(gè)比較：
var obj = {
    x: 81,
};
 
var foo = {
    getX: function() {
        return this.x;
    }
}
 
console.log(foo.getX.bind(obj)());  //81
console.log(foo.getX.call(obj));    //81
console.log(foo.getX.apply(obj));   //81
三個(gè)輸出的都是81，但是注意看使用 bind() 方法的，他后面多了對(duì)括號(hào)。
也就是說(shuō)，區(qū)別是，當(dāng)你希望改變上下文環(huán)境之后并非立即執(zhí)行，而是回調(diào)執(zhí)行的時(shí)候，使用 bind() 方法。而 apply/call 則會(huì)立即執(zhí)行函數(shù)。
一個(gè)總結(jié)：

apply 、 call 、bind 三者都是用來(lái)改變函數(shù)的this對(duì)象的指向的；

apply 、 call 、bind 三者第一個(gè)參數(shù)都是this要指向的對(duì)象，也就是想指定的上下文；

apply 、 call 、bind 三者都可以利用后續(xù)參數(shù)傳參；

bind 是返回對(duì)應(yīng)函數(shù)，便于稍后調(diào)用；apply 、call 則是立即調(diào)用 。


一道題：
定義一個(gè) log 方法，讓它可以代理 console.log 方法
function log(){
    console.log.apply(console, arguments);
}
若要給每一個(gè) log 消息添加一個(gè)”(app)”的前輟?
//該怎么做比較優(yōu)雅呢?這個(gè)時(shí)候需要想到arguments參數(shù)是個(gè)偽數(shù)組，通過(guò) //Array.prototype.slice.call 轉(zhuǎn)化為標(biāo)準(zhǔn)數(shù)組，再使用數(shù)組方法unshift
function log(){
    var args = Array.prototype.slice.call(arguments);
    args.unshift("(app)");
    console.log.apply(console, args);
}