Detailed explanation of caller and callee in javascript_javascript skills

I recently learned JavaScript and encountered problems with caller and callee, so I went to Baidu online a lot. The content found is of great benefit to everyone. I have compiled and summarized it to share with you.

caller: Returns a reference to the function that calls the function function (usage: function.caller)

Note: For functions, the caller attribute is only defined when the function is executed. If the function is called from the top level, caller is null.

var time = 3 //控制次数，去掉会一直在caller与handleCaller交替不断执行
function caller() {
  caller.caller()//返回调用caller函数的函数引用
}
function handleCaller() {
  if (time > 0){
    time--
    alert(handleCaller.caller)//返回调用handleCaller函数的函数引用
    alert(caller.caller)//返回调用caller函数的函数引用
    caller()
  }
}
handleCaller()

Example analysis: When handleCaller is run for the first time, both alerts return null. alert(handleCaller.caller) returns null because it is called from the top level, and alert(caller.caller) returns null because caller The default value is null. Next, the caller() function is called. caller.caller returns a reference to the function that called it (handleCaller). The handleCaller function can be called again through caller.caller(). When handleCaller runs for the second time, alert(handleCaller.caller) returns the caller code (actually a reference to caller), and alert(caller.caller) returns the handleCaller code. Because the calling relationship between functions is handleCaller->caller->handleCaller. After that, it will continue to alternate between the two functions.

caller points to the function that calls the current function, but there is one thing. If it is called in the global scope (that is, the top-level window), null will be returned.
Code starts

====================
function testCaller(){
if(testCaller.caller == null){
console.log('accessed at global');
}else{
console.log('accessed at ' + testCaller.caller);
}
}

Call globally

testCaller(); // accessed at global

Call
in a function

function a(){
testCaller();
}
a(); // accessed at function a(){testCaller();} 

At this time, testCaller.caller points to function a

callee: Returns the function reference of the corresponding arguments. (Mostly used for anonymous function recursion)

Note: Perhaps what you see most on the Internet is that callee returns a reference to the function being executed. This is how I understand it. Each function has its own arguments, which are usually used to store parameters. arguments has a callee attribute, and the initial value is the function reference corresponding to itself. When your function executes this statement, arguments by default correspond to the function you are currently executing, then arguments.callee is a reference to the currently executing function. Of course, if you have marked arguments of other functions (args in the example), you can naturally use args.callee() to call that function again.

function a(){
  alert(arguments.callee)
  var args = arguments
  function c(){
    alert(arguments.callee)
    args.callee()
  }
  c()
}
a()

Example analysis: arguments.callee in the example returns a reference to the currently executing function by default (a returns a's own function reference, c returns c's own function reference), and by using args to store the arguments of a function , use args.callee() in built-in function c to call function a again.

====================
function a(x){

if(x<=1)
return x;
else
return x + a(x-1);
}
a(12) // 78

This is a minimalist recursion with normal results.

Take a look at the calling method below

var b = a;
a = null; // 将a回收
b(12); // erro : 'a' is not a function

The reason is also simple, b=a, b=function a(){}; before calling b, we used a=null. So when function a is running, a in return x a(x-1); points to null, not function a.
So I reported an error, how to solve this problem. Let’s change a to another way

function a(x){
if(x<=1)
return x;
else
return arguments.callee(x-1); // 这句是改变的地方
}

Call again

var b = a;
a = null;
b(12); // 78

Reason: Although we set a=null, a is not used in function a, but points to the current function through arguments.callee.
Because the definition of arguments.callee is: return the executing function.