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ù)制代碼 代碼如下:
f.call(o);
f.apply(o);
可以按如下的代碼來理解：
復(fù)制代碼 代碼如下:
o.m = f; //將f存儲為o的臨時方法
o.m(); //調(diào)用這個臨時方法
delete o.m; //將這個臨時方法刪除
來個示例吧。
復(fù)制代碼 代碼如下:
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為怎樣？來看下面的一個例子：
復(fù)制代碼 代碼如下:
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ù)制代碼 代碼如下:
f.call(o, 1, 2);
而apply方法則將第一個實參之后的所有實參放入一個數(shù)組內(nèi)，
復(fù)制代碼 代碼如下:
f.apply(o, [1, 2]);
來個例子吧
復(fù)制代碼 代碼如下:
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 判斷控件獲得焦點的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
近期在做項目的時候,遇到了一些JS浮點數(shù)精度的問題,這個問題其實說大不大,說小不小,下面這篇文章主要給大家介紹了關(guān)于js運算精度丟失的2個解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了客戶端驗證用戶名和密碼 的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
本篇文章給大家講解html中用canvas函數(shù)配合JS畫出一個圓錐形的圖形實例，有需要的朋友學習測試下吧。2017-12-12
這篇文章主要為大家詳細介紹了js制作輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
Javascript的表單驗證-揭開正則表達式的面紗在本文重點介紹，感興趣的朋友一起學習吧2016-03-03
js 實現(xiàn)數(shù)值的千分位及保存小數(shù)方法(推薦)
下面小編就為大家?guī)硪黄猨s 實現(xiàn)數(shù)值的千分位及保存小數(shù)方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
利用js異或算法實現(xiàn)腳本加解密的代碼2008-02-02![完美解決input[type=number]無法顯示非數(shù)字字符的問題](http://img.jbzj.com/images/xgimg/bcimg8.png)
完美解決input[type=number]無法顯示非數(shù)字字符的問題
下面小編就為大家?guī)硪黄昝澜鉀Qinput[type=number]無法顯示非數(shù)字字符的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
一道超經(jīng)典js面試題Foo.getName()的故事
Foo.getName算是一道比較老的面試題了,大致百度了一下在17年就有相關(guān)文章在介紹它,下面這篇文章主要給大家介紹了關(guān)于一道超經(jīng)典js面試題Foo.getName()的相關(guān)資料,需要的朋友可以參考下2022-03-03