javascript中call和apply方法淺談
更新時間：2013年09月27日 15:27:59 作者：
我們可以將call和apply看做是某個對象的方法，通過調(diào)用方法的形式來間接調(diào)用函數(shù)
call和apply的第一個實參是要調(diào)用函數(shù)的母對象，它是調(diào)用上下文，在函數(shù)體內(nèi)通過this來獲得對它的引用。
例如，如果要想以對象o的方法來調(diào)用函數(shù)f，可以按如下的方式使用call和apply方法：
f.call(o);
f.apply(o);
可以按如下的代碼來理解：
o.m = f; //將f存儲為o的臨時方法
o.m(); //調(diào)用這個臨時方法
delete o.m; //將這個臨時方法刪除
來個示例吧。
function testFun(){
return this.a + this.b;
}
var o = {a:1, b:2};
testFun.call(o); //3
testFun.apply(o); //3
上述代碼執(zhí)行的結(jié)果均為3，可以理解為return o.a + o.b。
考慮一個問題，如果call和apply方法的第一個實參為null或者undefined為怎樣？來看下面的一個例子：
var a = 10, b = 20;
function testFun(){
return this.a + this.b;
}
testFun.call();
testFun.apply();
上述代碼執(zhí)行的結(jié)果均為30。這是因為call和apply的第一個實參如果傳入的是null或者undefined，則會被全局對象代替。
那call和apply這兩個方法有什么區(qū)別呢？
對于call方法來說，第一個調(diào)用上下文實參之后的所有實參就是要傳入待調(diào)用函數(shù)的值。比如，以對象o的方法的形式調(diào)用函數(shù)f，并傳入兩個參數(shù)，就可以使用如下的代碼：
f.call(o, 1, 2);
而apply方法則將第一個實參之后的所有實參放入一個數(shù)組內(nèi)，
f.apply(o, [1, 2]);
來個例子吧
function testFun(x, y){
return this.a + this.b + x + y;
}
var o = {a:1, b:2};
testFun.call(o, 10, 20);
testFun.apply(o, [10, 20]);
上述代碼的執(zhí)行結(jié)果為33，可以理解為 return o.a + o.b + 10 + 20
例如，如果要想以對象o的方法來調(diào)用函數(shù)f，可以按如下的方式使用call和apply方法：
復制代碼 代碼如下:
f.call(o);
f.apply(o);
可以按如下的代碼來理解：
復制代碼 代碼如下:
o.m = f; //將f存儲為o的臨時方法
o.m(); //調(diào)用這個臨時方法
delete o.m; //將這個臨時方法刪除
來個示例吧。
復制代碼 代碼如下:
function testFun(){
return this.a + this.b;
}
var o = {a:1, b:2};
testFun.call(o); //3
testFun.apply(o); //3
上述代碼執(zhí)行的結(jié)果均為3，可以理解為return o.a + o.b。
考慮一個問題，如果call和apply方法的第一個實參為null或者undefined為怎樣？來看下面的一個例子：
復制代碼 代碼如下:
var a = 10, b = 20;
function testFun(){
return this.a + this.b;
}
testFun.call();
testFun.apply();
上述代碼執(zhí)行的結(jié)果均為30。這是因為call和apply的第一個實參如果傳入的是null或者undefined，則會被全局對象代替。
那call和apply這兩個方法有什么區(qū)別呢？
對于call方法來說，第一個調(diào)用上下文實參之后的所有實參就是要傳入待調(diào)用函數(shù)的值。比如，以對象o的方法的形式調(diào)用函數(shù)f，并傳入兩個參數(shù)，就可以使用如下的代碼：
復制代碼 代碼如下:
f.call(o, 1, 2);
而apply方法則將第一個實參之后的所有實參放入一個數(shù)組內(nèi)，
復制代碼 代碼如下:
f.apply(o, [1, 2]);
來個例子吧
復制代碼 代碼如下:
function testFun(x, y){
return this.a + this.b + x + y;
}
var o = {a:1, b:2};
testFun.call(o, 10, 20);
testFun.apply(o, [10, 20]);
上述代碼的執(zhí)行結(jié)果為33，可以理解為 return o.a + o.b + 10 + 20
您可能感興趣的文章:
- AngularJS中$apply方法和$watch方法用法總結(jié)
- JavaScript中apply方法的應(yīng)用技巧小結(jié)
- JS中使用apply方法通過不同數(shù)量的參數(shù)調(diào)用函數(shù)的方法
- JavaScript中的call方法和apply方法使用對比
- 從JQuery源碼分析JavaScript函數(shù)的apply方法與call方法
- 使用apply方法實現(xiàn)javascript中的對象繼承
- js中apply方法的使用詳細解析
- JavaScript 學習筆記（九）call和apply方法
- javascript call和apply方法
- Js apply方法詳解
相關(guān)文章
js實現(xiàn)首屏延遲加載實現(xiàn)方法 js實現(xiàn)多屏單張圖片延遲加載效果
這篇文章主要介紹了js實現(xiàn)首屏延遲加載實現(xiàn)方法，以及js實現(xiàn)多屏單張圖片延遲加載效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
在線游戲大家來找茬II...2006-09-09
Bootbox.js 是一個小型的 JavaScript 庫用來創(chuàng)建簡單的可編程對話框，基于 Twitter 的 Bootstrap 開發(fā)。今天我們就來研究下，如何使用bootbox插件來實現(xiàn)自定義彈窗。2015-04-04
uni-app是近年來一種新興的多端混合開發(fā)框架,適合開發(fā)跨平臺應(yīng)用,方便多端運行,下面這篇文章主要給大家介紹了關(guān)于uni-app如何構(gòu)建小程序的相關(guān)資料,需要的朋友可以參考下2022-11-11
Javascript基于AJAX回調(diào)函數(shù)傳遞參數(shù)實例分析
這篇文章主要介紹了Javascript基于AJAX回調(diào)函數(shù)傳遞參數(shù)的方法,結(jié)合實例形式較為詳細的分析了JavaScript使用ajax傳遞參數(shù)的相關(guān)技巧以及回調(diào)函數(shù)的實現(xiàn)技巧,需要的朋友可以參考下2015-12-12
webpack3里使用uglifyjs壓縮js時打包報錯的解決
這篇文章主要介紹了webpack3里使用uglifyjs壓縮js時打包報錯的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
用javascript 控制表格行的展開和隱藏的代碼...2007-08-08
ie6下png圖片背景不透明的解決辦法使用js實現(xiàn)
我們時常在使用png圖片的時候，在ie6下發(fā)生背景不透明的問題，解決的方法實在是太多了，下面給大家介紹下一個js解決的方式，感興趣的朋友可以了解下的2013-01-01
layui結(jié)合form,table的全選、反選v1.0示例講解
今天小編就為大家分享一篇layui結(jié)合form,table的全選、反選v1.0示例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了javascript 事件處理示例分享,需要的朋友可以參考下2014-12-12