javaScript中递归和arguments.callee知识点

Bertha 。 2022-11-13 13:23 115阅读 0赞

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

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

[javaScript中递归和arguments.callee][javaScript_arguments.callee]

**直接上代码和截图**

![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][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3][]

![20210327055154750.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4][]

**运行结果如下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 5][]

<!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 是个很昂贵的操作，因为它是个很大的对象，每次递归调用时都需要重
    新创建。影响现代浏览器的性能，还会影响闭包。
    */
      
    function fn1() {
    	console.log("我是fn1....");
    }
    
    var fn2 = fn1;
    
    fn1 = function() {
    	console.log("哈哈哈....");
    }
    
    fn2(); //我是fn1....
    
    fn1(); //哈哈哈....
    
    fn2(); //我是fn1....
    
    console.log("************************");
    
    function a(){
    	console.log("a....");
    }
    
    a(); //a....
    
    a = function() {
    	console.log("go....");
    }
    
    a(); //go....
    
    console.log("************************");
    
    
    function factorial(number) {
    /*
    arguments为函数内部对象，包含传入函数的所有参数，arguments.callee代表函数名，多用于递
    归调用，防止函数执行与函数名紧紧耦合的现象，对于没有函数名的匿名函数也非常起作用.
    */
    	console.log("###", arguments, arguments[0]);
    	if (number <= 1) {
    		return 1;
    	} else {
    		//arguments.callee代表factorial(即自我调用，说白了就是递归)
    		//现在已经不推荐使用arguments.callee()
    		return number * arguments.callee(number - 1);
    /*
    如下这种写法也可以，但是坏处就是外面一旦把函数的名字改了，那么这里也要跟着改名字，说白了，就
    是如下写法会造成耦合，不够灵活.
    如果后面有和factorial函数同名的函数，那么如下的factorial函数会被后面的同名函数覆盖掉，
    所以，使用arguments.callee这种写法更灵活
    */
    // 		return number * factorial(number - 1);
    	}
    }
    
    var trueFactorial = factorial;
    
    factorial = function(){
        return 0;
    }
    
    //如果没有使用arguments.callee，将返回0
    console.log(trueFactorial(5));//120
    
    console.log(factorial(5));//0
    
    console.log("****************");
    //匿名函数的递归
    //第一种写法
    var result = (function(number) {
    	if (number <= 1) {
    		return 1;
    	} else {
    		return number * arguments.callee(number - 1);
    	}
    })(5);
    
    console.log("***A***", result); //***A*** 120
    
    console.log("****************");
    //第二种写法
    var result2 = (function(number) {
    	if (number <= 1) {
    		return 1;
    	} else {
    		return number * arguments.callee(number - 1);
    	}
    }(5));
    
    console.log("***B***", result2); //***B*** 120
    
    console.log("****************");
    
    /*
    在javaScript中，如果函数名相同、参数列表不同，不会构成函
    数的重载，而是在最后的函数会覆盖掉前面的同名函数
    */
    function fn66(parm) {
    	console.log("****" + parm);
    }
    
    fn66("黄晓明"); //江西省赣州市于都县
    fn66(); //江西省赣州市于都县
    
    function fn66() {
    	console.log("江西省赣州市于都县");
    }
    
    fn66("周杰伦"); //江西省赣州市于都县
    fn66(); //江西省赣州市于都县
    
    </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/u013451157/article/details/78686881
[arguments.callee]: https://blog.csdn.net/weixin_42265852/article/details/89303727
[javaScript_arguments.callee]: https://blog.csdn.net/czh500/article/details/115273387
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: /images/20221022/7916ef860e104472a8a6c79214345606.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1]: /images/20221022/c793f862404d46d7b24bf93bb64aa197.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210327054929376.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/20210327055015327.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA==,size_16,color_FFFFFF,t_70
[20210327055154750.png]: https://img-blog.csdnimg.cn/20210327055154750.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210327055246922.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 5]: https://img-blog.csdnimg.cn/20210327055429299.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA==,size_16,color_FFFFFF,t_70