关于用arguments.callee实现递归的问题

起因:今天我在写一个递归函数时,使用arguments.callee时出现了一点问题。于是有了这篇文章来记录遇到的这一bug

介绍

先来简单说一下arguments.callee
我们都知道函数内部有一个arguments属性,arguments是一个类数组对象,它的用途主要是用于保存传入函数的实参,也是因为有它的存在,在js当中,我们对形参的要求变得不那么严格,比如说下面这个函数:

function getID(name){
	return name.id;
}

虽然这个函数形参只有一个,按照我们其他强类型的语言的语法规则就必须传入一个实参,但是在js中却可以传入多个参数,因为访问实参时,实际上都是访问函数内部的arguments这个类数组。
而arguments中还有一个属性叫做arguments.callee,它实际上是一个指针,指向拥有这个arguments的函数,比如上面的getID函数的,arguments.callee则指向getID,所以我们经常会在递归中使用到argumetns.callee,例如一个简单的求阶乘的函数:

function factorial(num){
	if(num==0||num==1){
		return 1;
	}else{
		return num*arguments.callee(--num);
	}
}

可能有人觉得,为什么不直接用函数名,而要用arguments.callee这么麻烦的东西呢,因为考虑这样一种情况,在js中函数是可以作为值的,也就是我们可以把函数赋值给另一个变量,例如:

function printHello(){
	console.log('hello');
}
var p = printHello;

js中是允许这样的语法的,所以,当我使用递归时,如果将函数与一个变量绑定了,那么我们这样赋值了以后,想要在使用递归就会报错,所以,我们就一般使用arguments.callee来替换函数名。

但是今天我在实现数组扁平化时,却遇到了一个bug,使用arguments.callee得不到正确的递归结果。先来简单的说一下这道题吧,数组扁平化就是将一个多维数组变成一维数组,或者低维数组。看下我的实现代码:

function flatArray(arr,deep){
	// var deep=deep||1;
	var farr = [];
	arr.forEach(function(value){
		if(!Array.isArray(value)){
			farr.push(value);
		}else if(Array.isArray(value)&&deep>1){
			farr = farr.concat(arguments.callee(value,--deep));//该写法不正确
			// farr = farr.concat(flatArray(value,--deep));
		}else{
			farr.push(value);
		}
	});
	return farr;
}
var arr=[1,2,[3,4],5];
console.log(flatArray(arr,2));

我本意是将arr变为一维数组,但是我使用argumetns.callee时,得到的结果如下图:
这里写图片描述,很明显问题很严重,于是我调试了一下:
发现当进入递归条件时,本应该把此时的value的值传给arr,也就是arr此时并没有出现在scope中,也就是根本就没有把value的值传入到形参arr中:
这里写图片描述
这个问题可能时一个小bug吧,我去mdn上也没有找到答案,但是知道arguments.callee在ecmascript5中已经被废除了,可能确实存在一些问题。所以特地写出来与大家分享一下。
附MDN链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments/callee

在 JavaScript 中,`arguments.callee` 用于引用当前正在执行的函数。然而,由于使用 `arguments.callee` 会导致性能问题,现代 JavaScript 已经不再支持该属性。因此,我们应该使用命名函数表达式或箭头函数来替代 `arguments.callee`。 例如,一个使用 `arguments.callee` 的递归函数可以被重写为命名函数表达式: ```javascript // 使用 arguments.callee 实现递归函数 var factorial = function(n) { if (n <= 1) { return 1; } else { return n * arguments.callee(n - 1); } }; // 使用命名函数表达式替代 arguments.callee var factorial = function factorial(n) { if (n <= 1) { return 1; } else { return n * factorial(n - 1); } }; ``` 在这个例子中,我们将函数名 `factorial` 显式地赋值给了函数表达式,并在函数体内使用它来递归调用自身。 另外,箭头函数没有自己的 `this` 和 `arguments`,因此也不需要使用 `arguments.callee`。我们可以使用命名函数表达式来替代箭头函数的递归调用。例如: ```javascript // 使用箭头函数实现递归函数(错误的方式) const factorial = (n) => { if (n <= 1) { return 1; } else { return n * factorial(n - 1); // TypeError: factorial is not a function } }; // 使用命名函数表达式替代箭头函数 const factorial = function fac(n) { if (n <= 1) { return 1; } else { return n * fac(n - 1); } }; ``` 在这个例子中,我们使用了命名函数表达式 `function fac(n)` 来替代箭头函数,并在函数体内使用 `fac` 来递归调用自身。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值