javascript中caller和callee詳解
最近學(xué)習(xí)javascript,碰到caller和callee的問題,去網(wǎng)上百度了很多。搜到的內(nèi)容大同小益,整理總結(jié)了一下與大家分享。
caller:返回一個對調(diào)用function函數(shù)的函數(shù)的引用(用法:function.caller)
說明:對于函數(shù)來說,caller屬性只有在函數(shù)執(zhí)行時才有定義。如果函數(shù)由頂層調(diào)用,caller則為null。
var time = 3 //控制次數(shù),去掉會一直在caller與handleCaller交替不斷執(zhí)行
function caller() {
caller.caller()//返回調(diào)用caller函數(shù)的函數(shù)引用
}
function handleCaller() {
if (time > 0){
time--
alert(handleCaller.caller)//返回調(diào)用handleCaller函數(shù)的函數(shù)引用
alert(caller.caller)//返回調(diào)用caller函數(shù)的函數(shù)引用
caller()
}
}
handleCaller()
例子分析:第一次handleCaller運(yùn)行的時候,兩個alert返回的都是null,alert(handleCaller.caller)返回null是因?yàn)樗怯身攲诱{(diào)用, alert(caller.caller)返回null是因?yàn)閏aller的默認(rèn)值是null。接下去caller()函數(shù)被調(diào)用,caller.caller返回的是調(diào)用它的函數(shù)(handleCaller)的引用,通過caller.caller()可以再次調(diào)用handleCaller函數(shù)。第二次handleCaller運(yùn)行的時候,alert(handleCaller.caller)返回的是caller代碼(其實(shí)就是caller的引用),alert(caller.caller)返回的是handleCaller代碼。因?yàn)楹瘮?shù)之間的調(diào)用關(guān)系是handleCaller->caller->handleCaller。之后就不斷在2個函數(shù)之間交替執(zhí)行。
caller指向調(diào)用當(dāng)前函數(shù)的函數(shù),但是有一點(diǎn),如果是在全局作用域內(nèi)(即頂層window)被調(diào)用,則返回null。
代碼走起
====================
function testCaller(){
if(testCaller.caller == null){
console.log('accessed at global');
}else{
console.log('accessed at ' + testCaller.caller);
}
}
在全局調(diào)用
testCaller(); // accessed at global
在一個函數(shù)中調(diào)用
function a(){
testCaller();
}
a(); // accessed at function a(){testCaller();}
此時,testCaller.caller指向就是 function a
callee:返回相對應(yīng)的arguments的函數(shù)引用。(多用于匿名函數(shù)遞歸)
說明:也許你在網(wǎng)上看到最多的是callee返回正在執(zhí)行的函數(shù)引用。我是這么理解,每個函數(shù)都有一個自己的arguments,通常是用來存放參數(shù)的。arguments有一個callee 屬性,初始值就是對應(yīng)自身的函數(shù)引用。當(dāng)你函數(shù)執(zhí)行到該語句時,arguments是默認(rèn)對應(yīng)的是你現(xiàn)在執(zhí)行的函數(shù),那么arguments.callee為當(dāng)前正在執(zhí)行的函數(shù)的引用。當(dāng)然如果你有標(biāo)記過其他函數(shù)的arguments(例子中的args),自然可以用args.callee()去再次調(diào)用那個函數(shù)。
function a(){
alert(arguments.callee)
var args = arguments
function c(){
alert(arguments.callee)
args.callee()
}
c()
}
a()
例子分析:例子中的arguments.callee都是默認(rèn)返回當(dāng)前正在執(zhí)行的函數(shù)的引用(a中返回a自身函數(shù)引用,c中返回c自身函數(shù)引用),而通過用args存放a函數(shù)的arguments,在內(nèi)置函數(shù)c中使用args.callee()再次調(diào)用a函數(shù)。
====================
function a(x){
if(x<=1)
return x;
else
return x + a(x-1);
}
a(12) // 78
這是一個極簡的遞歸,運(yùn)行結(jié)果正常。
再看看下面的調(diào)用方法
var b = a; a = null; // 將a回收 b(12); // erro : 'a' is not a function
原因也簡單,b=a,b=function a(){};在b調(diào)用之前,我們用了a=null。所以在 function a 運(yùn)行的時候,其中的return x + a(x-1);中的a,指向的就是null,而不是 function a。
所以就報錯了,如何解決這樣的問題。我們將a換一種寫法
function a(x){
if(x<=1)
return x;
else
return arguments.callee(x-1); // 這句是改變的地方
}
再調(diào)用
var b = a; a = null; b(12); // 78
原因:雖然我們將a=null了,但是函數(shù)a中并沒有用到a,而是通過arguments.callee指向當(dāng)前函數(shù)。
因?yàn)閍rguments.callee的定義就是:返回正在執(zhí)行的函數(shù)。
- js的隱含參數(shù)(arguments,callee,caller)使用方法
- javascript中callee與caller的用法和應(yīng)用場景
- js apply/call/caller/callee/bind使用方法與區(qū)別分析
- javascript下arguments,caller,callee,call,apply示例及理解
- javascript中callee與caller的區(qū)別分析
- js中arguments,caller,callee,apply的用法小結(jié)
- 理解Javascript的caller,callee,call,apply區(qū)別
- Javascript - 全面理解 caller,callee,call,apply
- js arguments,jcallee caller用法總結(jié)
- js中的caller和callee屬性介紹和例子
- JavaScript中callee和caller的區(qū)別與用法實(shí)例分析
相關(guān)文章
HTML+JavaScript實(shí)現(xiàn)筋斗云導(dǎo)航欄效果
這篇文章主要為大家介紹了如何利用HTML+JavaScript+CSS實(shí)現(xiàn)筋斗云導(dǎo)航欄效果,當(dāng)鼠標(biāo)經(jīng)過某個li,筋斗云跟著到當(dāng)前的位置,感興趣的小伙伴可以試一試2022-03-03
詳解JavaScript前端如何實(shí)現(xiàn)截屏功能
這篇文章主要為大家詳細(xì)介紹了JavaScript前端如何實(shí)現(xiàn)截屏功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
JavaScript如何利用Promise控制并發(fā)請求個數(shù)
大家都知道js是單線程,并不存在真正的并發(fā),但是由于JavaScript的Event Loop機(jī)制,使得異步函數(shù)調(diào)用有了“并發(fā)”這樣的假象。這篇文章主要給大家介紹了關(guān)于JavaScript如何利用Promise控制并發(fā)請求個數(shù)的相關(guān)資料,需要的朋友可以參考下2021-05-05
js中的document.querySelector()方法舉例詳解
這篇文章主要給大家介紹了關(guān)于js中document.querySelector()方法的相關(guān)資料,document.querySelector是JavaScript中的一個內(nèi)置方法,用于通過CSS選擇器選擇文檔中的第一個匹配元素,需要的朋友可以參考下2024-01-01
解決前端接收 type:"application/octet-stream" 格
前端接收 type: “application/octet-stream“ 格式的數(shù)據(jù)并下載,還有后端既返回octet-stream還返回JSON數(shù)據(jù)時的處理方法,今天給大家分享前端接收 type:"application/octet-stream" 格式的數(shù)據(jù)并下載(解決后端返回不唯一問題)的解決方案,感興趣的朋友一起看看吧2023-12-12
使用JSX 建立 Markup 組件風(fēng)格開發(fā)的示例(前端組件化)
這篇文章主要介紹了使用JSX 建立 Markup 組件風(fēng)格開發(fā)的示例(前端組件化)本文重點(diǎn)講解如何從0搭建一個組件系統(tǒng),在這里我們會學(xué)習(xí)使用JSX來建立markup 的風(fēng)格,我們基于與React 一樣的 JSX 去建立我們組件的風(fēng)格2021-04-04

