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

Near_Li 發布于2019-08-21 17:04 / 3401人閱讀

摘要：原文章發表在的個人博客一細節中函數存在定義時上下文，運行時上下文上下文是可變的為改變某個函數運行時的上下文而存在的，換句話說，是為了改變函數內部的指向沒有方法，但是有呀所以可以去把方法的運行時上下文也就是運行時的的指向，指向這個時候低啊用

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

一、細節

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()方法

二、總結

利用上面的call(),apply()和bind()方法，可以在代碼復用減少代碼的冗余上面有很大的幫助，以前編碼的過程中，的確是沒有很好的利用，希望在今后的編碼的過程中自己可以努力的去嘗試，去試錯。

enjoy~

GPU云服務器云服務器 JS中bind、call和apply的作 js中的call和apply apply與call的區別 javascript中apply

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89095.html

可能遇到假的面試題：不用call和apply方法模擬實現ES5的bind方法

摘要：來自朋友去某信用卡管家的做的一道面試題，用原生模擬的方法，不準用和方法。他們的用途相同，都是在特定的作用域中調用函數。不同之處在于，方法傳遞給調用函數的參數是逐個列出的，而則是要寫在數組中。本文首發我的個人博客：前端小密圈，評論交流送1024邀請碼，嘿嘿嘿?。來自朋友去某信用卡管家的做的一道面試題，用原生JavaScript模擬ES5的bind方法，不準用call和bind方法。 ...

李世贊 2019-08-29 12:31 評論0 收藏0
可能遇到假的面試題：不用call和apply方法模擬實現ES5的bind方法

摘要：來自朋友去某信用卡管家的做的一道面試題，用原生模擬的方法，不準用和方法。他們的用途相同，都是在特定的作用域中調用函數。不同之處在于，方法傳遞給調用函數的參數是逐個列出的，而則是要寫在數組中。本文首發我的個人博客：前端小密圈，評論交流送1024邀請碼，嘿嘿嘿?。來自朋友去某信用卡管家的做的一道面試題，用原生JavaScript模擬ES5的bind方法，不準用call和bind方法。 ...

ConardLi 2019-08-22 11:03 評論0 收藏0
JS中的call、apply、bind方法詳解

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

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

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

lastSeries 2019-08-21 12:10 評論0 收藏0