從JQuery源碼分析JavaScript函數(shù)的apply方法與call方法
最近在使用jQuery的$.each方法時(shí)很,突然想到$.each($(‘div'),function(index,entity){});中的這個(gè)index和entity是哪冒出來的,而且可有可無的,而且這么高大上的能告訴我們當(dāng)前遍歷的下標(biāo)和實(shí)例。所以看了一下jQuery源代碼,是這么寫的:
調(diào)試的時(shí)候走的是標(biāo)紅的這段代碼,然后用到了callback.call這個(gè)函數(shù),于是翻看了一下《js高級(jí)程序設(shè)計(jì)》,其中有比較深的解釋。
首先,function是一個(gè)指向Function對(duì)象,函數(shù)名是一個(gè)指向函數(shù)的指針。那么在函數(shù)體內(nèi),就會(huì)有一個(gè)作用域,即this關(guān)鍵字。
this關(guān)鍵字指的是函數(shù)運(yùn)行的作用域,舉個(gè)例子來說:
<script type="text/javascript">
function funcA() {
alert(this);
alert("Function A");
}
</script>
上面這段代碼中的函數(shù)funcA定義在全局環(huán)境中,那么函數(shù)體內(nèi)的this即window對(duì)象。
下面該到call和apply的說明了。以call函數(shù)為例,call的第一個(gè)參數(shù),就是改變函數(shù)的作用域,后面的參數(shù)為傳入函數(shù)的所需的參數(shù),必須與原函數(shù)的參數(shù)一直,舉例說明:
<script type="text/javascript">
var testO = { name: "Lily" };
function funcA(a,b) {
alert(this);
alert("Function A");
}
function funcB(a, b) {
funcA.call(testO, a, b);
}
funcB(1,2); //this變成了testO
</script>
我們定義funcB函數(shù)的中,調(diào)用了funcA的call函數(shù),這個(gè)時(shí)候我們改變了funcA中this的指向,原本指向window的,現(xiàn)在指向了call的第一個(gè)參數(shù)testO這個(gè)對(duì)象。而且調(diào)用call時(shí),因?yàn)閒uncA函數(shù)有兩個(gè)參數(shù),所以如果要想funcA傳遞參數(shù),必須一一指出參數(shù),即后面的兩個(gè)參數(shù)a和b,或者可以只穿第一個(gè)參數(shù)
即:funcA.call(testO);或者只傳a,即:funcA.call(testO,a);
而apply與call的區(qū)別僅在于,apply的第二個(gè)參數(shù)可以是數(shù)組形式,而且不必一一指出參數(shù),funcA.apply(testO,[a,b])
介紹完call與apply的基本用法,該說說他哥倆真正的用武之地了,擴(kuò)充函數(shù)賴以運(yùn)行的作用域。
<script type="text/javascript">
window.color = "透明";
var testObj = { color: "紅色" };
function testFuc() {
alert(this.color);
}
$(function () {
1.testFuc(); //彈出“透明”
2.testFuc(this); //彈出“undefined”
3.testFuc.call(this.parent); //彈出“透明”
4.testFuc.call(window); //彈出“透明”
5.testFuc.call(testObj); //彈出“紅色”
});
</script>
上面這段代碼演示了call的作用。第一個(gè)函數(shù)調(diào)用,this指向了window,所以彈出了window的color屬性。
第二個(gè)函數(shù)可能有些朋友以為也會(huì)彈出透明,但是請(qǐng)先確定我們的函數(shù)運(yùn)行在$(function(){});中,這個(gè)jQuery的函數(shù),了解jQuery的朋友都很清楚,在
$(function(){});中this的作用域指向的是document,然后我們調(diào)用testFunc,要彈出document的color,當(dāng)然是未定義的。
第三個(gè)函數(shù)將testFunc的this指向了document的親爹window,彈出window的color當(dāng)然也是沒有問題的。
第四個(gè)函數(shù)就更加直白了,把window傳進(jìn)去了
第五個(gè)函數(shù),將testFunc的this指向了testObj,彈出了紅色。
講到這里,用法大家應(yīng)該都有所了解了,但是具體怎么去理解怎么去使用還是看自己的套路。
我是這么理解的,可以把這種用法看成是C#或者java中的泛型方法。比如一個(gè)C#方法的定義
public void Test<T>(T a, T b) { }
這樣我們就可以實(shí)現(xiàn)對(duì)方法的擴(kuò)展,實(shí)現(xiàn)通用的目的。
以上都是本人自己的看法和觀點(diǎn),有什么不對(duì)之處還請(qǐng)大家指出來共同學(xué)習(xí)。
- JavaScript函數(shù)的4種調(diào)用方法詳解
- JavaScript函數(shù)的調(diào)用以及參數(shù)傳遞
- 深入理解JavaScript函數(shù)參數(shù)(推薦)
- 超鏈接怎么正確調(diào)用javascript函數(shù)
- 改變javascript函數(shù)內(nèi)部this指針指向的三種方法
- 用apply讓javascript函數(shù)僅執(zhí)行一次的代碼
- JavaScript函數(shù)之call、apply以及bind方法案例詳解
- JavaScript函數(shù)apply()和call()用法與異同分析
- 詳解JavaScript函數(shù)callee、call、apply的區(qū)別
- 玩轉(zhuǎn)JavaScript函數(shù):apply/call/bind技巧
相關(guān)文章
JS讀取XML文件數(shù)據(jù)并以table形式顯示數(shù)據(jù)的方法(兼容IE與火狐)
這篇文章主要介紹了JS讀取XML文件數(shù)據(jù)并以table形式顯示數(shù)據(jù)的方法,涉及javascript針對(duì)xml節(jié)點(diǎn)操作及HTML表格操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06confirm的用法示例用于按鈕操作時(shí)確定是否執(zhí)行
這篇文章主要介紹了confirm的用法,confirm一般用于按鈕操作時(shí)確定是否執(zhí)行,需要的朋友可以參考下2014-06-06Object.keys() 和 Object.getOwnPropertyNames() 的區(qū)別詳解
這篇文章主要介紹了Object.keys() 和 Object.getOwnPropertyNames() 的區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05javascript 進(jìn)度條 實(shí)現(xiàn)代碼
這個(gè)例子是通過測(cè)試的。是真真正正根據(jù)記錄的條數(shù)掛鉤的。2009-07-07javascript圓盤抽獎(jiǎng)程序?qū)崿F(xiàn)原理和完整代碼例子
這篇文章主要介紹了javascript圓盤抽獎(jiǎng)程序?qū)崿F(xiàn)原理和完整代碼例子,需要的朋友可以參考下2014-06-06JavaScript判斷日期時(shí)間差的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了js判斷日期時(shí)間差的方法,文章給大家補(bǔ)充介紹了js求時(shí)間差的代碼,需要的朋友參考下吧2018-03-03javascript實(shí)現(xiàn)簡易的計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡易的計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03js實(shí)現(xiàn)使用鼠標(biāo)拖拽切換圖片的方法
這篇文章主要介紹了js實(shí)現(xiàn)使用鼠標(biāo)拖拽切換圖片的方法,涉及javascript操作圖片實(shí)現(xiàn)輪播效果的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05JS獲取子窗口中返回的數(shù)據(jù)實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫S獲取子窗口中返回的數(shù)據(jù)實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05