javaScript中递归和arguments.callee

Dear 丶 2022-11-14 00:54 140阅读 0赞

> **现在已经不推荐使用arguments.callee()；**  
> 原因：访问arguments是个很昂贵的操作，因为它是个很大的对象，每次递归调用时都需要重新创建。影响现代浏览器的性能，还会影响闭包。
> 
> **但是，**arguments并非一无是处，arguments还是有优点的，如下：
> 
> arguments为**函数内部对象**，包含传入函数的所有参数，arguments.callee代表**函数名**，多用于**递归调用**，防止函数执行与函数名紧紧耦合的现象，对于没
> 
> 有函数名的匿名函数也非常起作用.

[javaScript中递归和arguments.callee知识点][javaScript_arguments.callee]

[【JavaScript】arguments.callee的作用及替换方案][JavaScript_arguments.callee]

[arguments.callee的用法][arguments.callee]

[callee和caller][callee_caller]

[arguments.callee][arguments.callee 1]

[命名函数表达式--有标识符的函数表达式][--]

[命名函数表达式][Link 1]

> 对于递归，使用arguments.callee代替函数名，可以确保调用函数不出问题，但是在严格模式下，**不能通过脚本访问argumnts.callee**，这时，可以使用命名函数表达式来达到相同的效果。 如下代码：

var myFun = (function f(num) {
      //console.log(f);
        if (num <= 1) {
            return 1;
        }
        else {
            return num * f(num - 1);
        }
    });

**案例1**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1][]

/*
    现在已经不推荐使用arguments.callee()；
    原因：访问arguments是个很昂贵的操作，因为它是个很大的对象，每次递归调用时都需要重
    新创建。影响现代浏览器的性能，还会影响闭包。
    */
    console.log("***************************");
    
    //一道面试题,接受参数n=5,不用for循环输出数组【1,2,3,4,5】
    //这是用递归的思路，配合arguments.callee，代码如下
    function show(n) {
    	var arr = [];
    	return (function() {
    		arr.unshift(n);
    		n--;
    		if (n != 0) {
    			arguments.callee();
    		}
    		return arr;
    	})();
    }
    
    var result = show(5);
    console.log(result); //[1, 2, 3, 4, 5]
    
    //现在已经不推荐使用arguments.callee()
    //改成如下：
    function show2(n) {
    	var arr = [];
    	return (function fn() {
    		arr.unshift(n);
    		n--;
    		if (n != 0) {
    			fn(); //
    		}
    		return arr;
    	})();
    }
    
    var result2 = show2(5);
    console.log(result2); //[1, 2, 3, 4, 5]
    
    console.log("***************************");

**运行结果如下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2][]

**案例2**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3][]

![20210327225539863.png][]

//
    function factorial(num) {
    	if (num <= 1) {
    		return 1;
    	} else {
    		return num * arguments.callee(num - 1);
    	}
    }
    
    var r1 = factorial(5);
    console.log("**A**", r1);
    
    //同理，可以将上面的代码改成如下：
    function myFactorial(num) {
    	if (num <= 1) {
    		return 1;
    	}
    	var myResult = 1;
    	return (function fn() {
    		myResult *= num;
    		num--;
    		if (num != 0) {
    			fn();
    		}
    		return myResult;
    	})();
    }
    
    var r2 = myFactorial(5);
    console.log("**B**", r2);

**运行结果如下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4][]

**完整代码如下：**

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>javaScript中递归和arguments.callee知识点</title>
    <style type="text/css">
    input[type=button] {
    	background-color: #8E388E;
    	border: 0px solid #8E388E;
    	color: #fff;
    	width: 160px;
    	height: 40px;
    	border-radius: 6px; /*把边框做成圆角*/
    }
    
    </style>
    <script type="text/javascript">
    /*
    现在已经不推荐使用arguments.callee()；
    原因：访问arguments是个很昂贵的操作，因为它是个很大的对象，每次递归调用时都需要重
    新创建。影响现代浏览器的性能，还会影响闭包。
    */
    console.log("***************************");
    
    //一道面试题,接受参数n=5,不用for循环输出数组【1,2,3,4,5】
    //这是用递归的思路，配合arguments.callee，代码如下
    function show(n) {
    	var arr = [];
    	return (function() {
    		arr.unshift(n);
    		n--;
    		if (n != 0) {
    			arguments.callee();
    		}
    		return arr;
    	})();
    }
    
    var result = show(5);
    console.log(result); //[1, 2, 3, 4, 5]
    
    //现在已经不推荐使用arguments.callee()
    //改成如下：
    function show2(n) {
    	var arr = [];
    	return (function fn() {
    		arr.unshift(n);
    		n--;
    		if (n != 0) {
    			fn(); //
    		}
    		return arr;
    	})();
    }
    
    var result2 = show2(5);
    console.log(result2); //[1, 2, 3, 4, 5]
    
    console.log("***************************");
    //
    function factorial(num) {
    	if (num <= 1) {
    		return 1;
    	} else {
    		return num * arguments.callee(num - 1);
    	}
    }
    
    var r1 = factorial(5);
    console.log("**A**", r1);
    
    //同理，可以将上面的代码改成如下：
    function myFactorial(num) {
    	if (num <= 1) {
    		return 1;
    	}
    	var myResult = 1;
    	return (function fn() {
    		myResult *= num;
    		num--;
    		if (num != 0) {
    			fn();
    		}
    		return myResult;
    	})();
    }
    
    var r2 = myFactorial(5);
    console.log("**B**", r2);
    
    </script>
    </head>
    <body style="background-color: #CCE8CF;">
    <h1>javaScript中递归和arguments.callee知识点</h1>
    <input type="button" value="字符串的slice()函数">
    <div id="div1" style="background-color: Wheat; height: 100%;">
    </div>
    </body>
    </html>

**大家可以举一反三，触类旁通！**

[javaScript_arguments.callee]: https://blog.csdn.net/czh500/article/details/115258862
[JavaScript_arguments.callee]: https://blog.csdn.net/u013451157/article/details/78686881
[arguments.callee]: https://blog.csdn.net/weixin_42265852/article/details/89303727
[callee_caller]: https://blog.csdn.net/yc2222/article/details/79268029
[arguments.callee 1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments/callee
[--]: https://blog.csdn.net/xiaoyaopikaqiu/article/details/90138926
[Link 1]: https://www.jianshu.com/p/a90fb5c1bdea
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: /images/20221022/0c19590345bd4f84b58af7d9c82ec06b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210327225211962.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210327225357420.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210327225510425.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA==,size_16,color_FFFFFF,t_70
[20210327225539863.png]: https://img-blog.csdnimg.cn/20210327225539863.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210327225659751.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA==,size_16,color_FFFFFF,t_70