比較call( ) apply( ) bind( )

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

摘要：簡單比較一下與和的第一個實參是要調用函數(shù)的母對象，它是調用上下文，在函數(shù)體內通過來獲得對它的引用。而則會立即執(zhí)行函數(shù)。

簡單比較一下call() apply() bind()

《JavaScript: The Definitive Guide》

call()與apply()

call()和apply()的第一個實參是要調用函數(shù)的母對象，它是調用上下文，在函數(shù)體內通過this來獲得對它的引用。簡單來說就是把一個方法綁定到一個對象上去調用：

栗如，要想以對象o的方法來調用函數(shù)f()：

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

其實相當于：

o.m = f; //將f存儲為o的臨時方法
o.m(); //調用它，不傳入參數(shù)
delete o.m; //將臨時方法刪除

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

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

--> 對于apply()，它的實參都放入一個數(shù)組當中：

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

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

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

傳入apply()的參數(shù)數(shù)組可以是類數(shù)組對象也可以是真實數(shù)組。實際上，可以將當前函數(shù)的arguments數(shù)組直接傳入apply()來調用另一個函數(shù)：

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

bind() 方法

bind()是ES5中的方法。
當在函數(shù)f()上調用bind()方法并傳入一個對象o作為參數(shù)，這個方法將返回一個新的函數(shù)，（以函數(shù)調用的方式）調用新的函數(shù)將會把原始的函數(shù)f()當作o的方法來調用。傳入新的函數(shù)的任何實參都講傳入原始函數(shù)。栗如：

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

可以用ES3簡單模擬：

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

然而，bind()方法不僅僅是將函數(shù)綁定至一個對象----除了第一個參數(shù)外，傳入bind()的實參也會綁定至this，這個附帶的應用是一種常見的函數(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方法的返回值是一個函數(shù)
        return function(){
            //創(chuàng)建一個實參列表，將傳入bind()的第二個及后續(xù)的實參傳入這個參數(shù)
            var args = [], i;
            for(i=1; i
http://web.jobbole.com/83642/
深入淺出妙用 Javascript 中 apply、call、bind
一個比較：
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
三個輸出的都是81，但是注意看使用 bind() 方法的，他后面多了對括號。
也就是說，區(qū)別是，當你希望改變上下文環(huán)境之后并非立即執(zhí)行，而是回調執(zhí)行的時候，使用 bind() 方法。而 apply/call 則會立即執(zhí)行函數(shù)。
一個總結：

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

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

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

bind 是返回對應函數(shù)，便于稍后調用；apply 、call 則是立即調用 。


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

云服務器 GPU云服務器 JS中bind、call和apply的作 apply與call的區(qū)別 js中的call和apply apply()

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/82171.html

JS中的call、apply、bind方法詳解

摘要：不能應用下的等方法。首先我們可以通過給目標函數(shù)指定作用域來簡單實現(xiàn)方法保存，即調用方法的目標函數(shù)考慮到函數(shù)柯里化的情況，我們可以構建一個更加健壯的這次的方法可以綁定對象，也支持在綁定的時候傳參。原因是，在中，多次是無效的。 bind 是返回對應函數(shù)，便于稍后調用；apply 、call 則是立即調用。 apply、call 在 javascript 中，call 和 apply 都是...

zombieda 2019-08-23 15:27 評論0 收藏0
JS基礎篇--call、apply、bind方法詳解

摘要：首先我們可以通過給目標函數(shù)指定作用域來簡單實現(xiàn)方法保存，即調用方法的目標函數(shù)考慮到函數(shù)柯里化的情況，我們可以構建一個更加健壯的這次的方法可以綁定對象，也支持在綁定的時候傳參。原因是，在中，多次是無效的。而則會立即執(zhí)行函數(shù)。 bind 是返回對應函數(shù)，便于稍后調用；apply 、call 則是立即調用。 apply、call 在 javascript 中，call 和 apply 都是...

lastSeries 2019-08-21 12:10 評論0 收藏0
bind()、call()、apply()理解及用法

摘要：首先，我們判斷是否存在方法，然后，若不存在，向對象的原型中添加自定義的方法。指向調用它的對象?？傊齻€的使用區(qū)別都是用來改變函數(shù)的對象的指向的第一個參數(shù)都是要指向的對象都可以利用后續(xù)參數(shù)傳參是返回對應函數(shù)，便于稍后調用，是立即調用 apply和call都是為了改變某個函數(shù)運行時的上下文而存在的（就是為了改變函數(shù)內部this的指向），F(xiàn)unction對象的方法，每個函數(shù)都能調用；使用a...

hoohack 2019-08-23 15:31 評論0 收藏0
JavaScript函數(shù)的call，apply和bind

摘要：它們有明確的和成員函數(shù)的定義，只有的實例才能調用這個的成員函數(shù)。用和調用函數(shù)里用和來指定函數(shù)調用的，即指針的指向。同樣，對于一個后的函數(shù)使用或者，也無法改變它的執(zhí)行，原理和上面是一樣的。函數(shù)里的this指針要理解call，apply和bind，那得先知道JavaScript里的this指針。JavaScript里任何函數(shù)的執(zhí)行都有一個上下文（context），也就是JavaScri...

alighters 2019-08-22 14:48 評論0 收藏0
js 面試官想了解你有多理解call,apply,bind?

摘要：返回值這段在下方應用中有詳細的示例解析?；卣{函數(shù)丟失的解決方案綁定回調函數(shù)的指向這是典型的應用場景綁定指向，用做回調函數(shù)。 showImg(https://segmentfault.com/img/remote/1460000019971331?w=1024&h=680); 函數(shù)原型鏈中的 apply，call 和 bind 方法是 JavaScript 中相當重要的概念，與 this...

wuaiqiu 2019-08-26 10:33 評論0 收藏0