2021-08-08函数递归_function changecolor(col, color)-CSDN博客

本文链接：https://blog.csdn.net/weixin_54436925/article/details/119516260

案例5:点谁谁变色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body id="box">
		<button type="button" id="tomato">番茄色</button>
		<button type="button" id="skyblue">天蓝色</button>
		<button type="button" id="yellow">黄色</button>
		<button type="button" id="blue">蓝色</button>
		
		<script type="text/javascript">
			var body = document.getElementById('box');
			var tomato = document.getElementById('tomato');
			var skyblue = document.getElementById('skyblue');
			var yellow = document.getElementById('yellow');
			var blue = document.getElementById('blue');
			
			function changeColor(col){
				body.style.backgroundColor = col;
			}
			
			tomato.onclick = function (){
				changeColor('tomato');
			}
			
			skyblue.onclick = function (){
				changeColor('skyblue');
			}
			
			yellow.onclick = function (){
				changeColor('yellow');
			}
			
			blue.onclick = function (){
				changeColor('blue');
			}
		</script>
	</body>
</html>

3.callee属性

arguments.callee打印出的是函数本身的函数体,一般与递归配合

	function f1(){
	// 默认情况下 callee是有一个（）的 但是我们不会使用它  所以要把圆括号去掉   callee的作用  是获取函数的函数体
	console.log(arguments.callee);
	}	
	f1();

8.函数的递归

函数的递归调用,就是在函数内部自己调用自己

能用到递归的地方,都不会用递归

递归必须要有个结束的条件,否则会一直调用自己,造成内存泄漏

1.设计不好的递归

function fn(){
			console.log('今天起了个早');
			fn();
		}
		fn()

2.正常递归

// 打印1-10
var i = 1;
		function fn(){
			if(i <= 10){
				console.log(i);
				i++;
				fn();
			}
		}
		fn()

3.防止递归名字被修改

var i = 1;
		function f1(){
			if(i <= 10){
				console.log(i);
				i++;
				f1 = 666;
				// 此时会报错f1不是一个函数,因为给f1赋值等于666,函数被篡改,要使用callee防止函数被修改
				arguments.callee();
				// f1();
			}
		}
		f1()

4.递归实现阶乘

function f2(n){
			// 结束条件,n = 1时,就return1
			if(n == 1){
				return 1;
			}
			// 在函数内调用自己,当n = 5时,调用自己 - 1,当n = 4时,调用自己 - 1
			return n * f2(n - 1);
		}
		console.log(f2(5));