JavaScript函式的apply方法與call方法淺析
最近在使用jQuery的$.each方法時很,突然想到$.each($(‘div’),function(index,entity){});中的這個index和entity是哪冒出來的,而且可有可無的,而且這麼高大上的能告訴我們當前遍歷的下標和例項。所以看了一下jQuery原始碼,是這麼寫的:
除錯的時候走的是標紅的這段程式碼,然後用到了callback.call這個函式,於是翻看了一下《js高階程式設計》,其中有比較深的解釋。
首先,function是一個指向Function物件,函式名是一個指向函式的指標。那麼在函式體內,就會有一個作用域,即this關鍵字。
this關鍵字指的是函式執行的作用域,舉個例子來說
<script type="text/javascript"> function funcA() { alert(this); alert("Function A"); } </script>
上面這段程式碼中的函式funcA定義在全域性環境中,那麼函式體內的this即window物件。
下面該到call和apply的說明了。以call函式為例,call的第一個引數,就是改變函式的作用域,後面的引數為傳入函式的所需的引數,必須與原函式的引數一直,舉例說明:
<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函式的中,呼叫了funcA的call函式,這個時候我們改變了funcA中this的指向,原本指向window的,現在指向了call的第一個引數testO這個物件。而且呼叫call時,因為funcA函式有兩個引數,所以如果要想funcA傳遞引數,必須一一指出引數,即後面的兩個引數a和b,或者可以只穿第一個引數
即:funcA.call(testO);或者只傳a,即:funcA.call(testO,a);
而apply與call的區別僅在於,apply的第二個引數可以是陣列形式,而且不必一一指出引數,funcA.apply(testO,[a,b])
介紹完call與apply的基本用法,該說說他哥倆真正的用武之地了,擴充函式賴以執行的作用域。
<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的作用。第一個函式呼叫,this指向了window,所以彈出了window的color屬性。
第二個函式可能有些朋友以為也會彈出透明,但是請先確定我們的函式執行在$(function(){});中,這個jQuery的函式,瞭解jQuery的朋友都很清楚,在
$(function(){});中this的作用域指向的是document,然後我們呼叫testFunc,要彈出document的color,當然是未定義的。
第三個函式將testFunc的this指向了document的親爹window,彈出window的color當然也是沒有問題的。
第四個函式就更加直白了,把window傳進去了
第五個函式,將testFunc的this指向了testObj,彈出了紅色。
講到這裡,用法大家應該都有所瞭解了,但是具體怎麼去理解怎麼去使用還是看自己的套路。
我是這麼理解的,可以把這種用法看成是C#或者java中的泛型方法。比如一個C#方法的定義
public void Test<T>(T a, T b) { }
這樣我們就可以實現對方法的擴充套件,實現通用的目的。
以上都是本人自己的看法和觀點,有什麼不對之處還請大家指出來共同學習。
相關文章
- javascript基礎(函式屬性arguments,方法:call,apply)(二十)JavaScript函式APP
- 快速掌握javascript的apply()和call()方法JavaScriptAPP
- 函式式JavaScript(3):.apply()、.call() 和arguments物件函式JavaScriptAPP物件
- JavaScript中call,apply,bind方法的總結。JavaScriptAPP
- JavaScript中call,apply,bind方法的總結JavaScriptAPP
- JavaScript | 函式與方法JavaScript函式
- JavaScript中bind、call、apply函式用法詳解JavaScriptAPP函式
- 淺談JavaScript中的apply、call和bindJavaScriptAPP
- JavaScript—call, apply, bind 函式能幹啥?(全)(20)JavaScriptAPP函式
- JS中的call、apply、bind方法JSAPP
- JS中的call()和apply()方法JSAPP
- js中call、apply、bind函式JSAPP函式
- 深入淺出 妙用Javascript中apply、call、bindJavaScriptAPP
- 深入淺出妙用 Javascript 中 apply、call、bindJavaScriptAPP
- 手寫JS函式的call、apply、bindJS函式APP
- 徹底理解了call()方法,apply()方法和bind()方法APP
- 理解JS中的call、apply、bind方法(********************************************************JSAPP
- 【轉】JS中的call()和apply()方法JSAPP
- JS中的call()方法和apply()方法用法總結JSAPP
- JavaScript回撥函式應用淺析JavaScript函式
- 理解JS函式之call,apply,bindJS函式APP
- JavaScript方法call,apply,caller,callee,bind的使用詳解及區別JavaScriptAPP
- Javascript - apply、call、bindJavaScriptAPP
- 函式中的apply,call入門介紹函式APP
- JavaScript深入理解系列:call與applyJavaScriptAPP
- JavaScript中的call()和apply()JavaScriptAPP
- JavaScript 中的 apply、call、bindJavaScriptAPP
- JavaScript進階教程(4)-函式內this指向解惑call(),apply(),bind()的區別JavaScript函式APP
- JavaScript中apply、call、bind的區別與用法JavaScriptAPP
- JavaScript-apply、bind、callJavaScriptAPP
- js的繼承方法小結(prototype、call、apply)JS繼承APP
- 重寫JS中的apply,call,bind,new方法JSAPP
- 關於call, apply, bind方法的區別與內部實現APP
- JS核心系列:淺談 call apply 與 bindJSAPP
- 淺談API函式呼叫的方法API函式
- javascript函數語言程式設計 : call 和 applyJavaScript函數程式設計APP
- 淺析C語言中的setjmp與longjmp函式C語言函式
- 詳解 JavaScript的 call() 和 apply()JavaScriptAPP