059_arguments.callee和arguments.callee.caller

原创于 2021-09-06 10:10:00 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript学习专栏收录该内容

105 篇文章

订阅专栏

本文详细探讨了JavaScript中arguments.callee和arguments.callee.caller的概念，通过实际代码演示了它们如何跟踪函数调用关系，并展示了如何利用它们生成唯一ID和追踪顶层调用。此外，还涉及到了函数对象和闭包的运用。

1. arguments.callee指向函数本身。

2. arguments.callee.caller指向调用函数的函数。

3. 例子

3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>arguments.callee和arguments.callee.caller</title>
	</head>
	<body>
		<script type="text/javascript">
			// arguments.callee指向函数本身
			// arguments.callee.caller指向调用函数的函数
			function fun1(){
				console.log(arguments.callee);
				console.log(arguments.callee.caller);
			}
			function fun2(){
				console.log(arguments.callee);
				console.log(arguments.callee.caller);
				fun1();
			}
			function fun3(){
				console.log(arguments.callee);
				console.log(arguments.callee.caller);
				fun2();
			}
			fun3();

			// 利用arguments.callee生成学生唯一id
			var tools = {
				id: function(){
					return (arguments.callee.id === undefined) ? (arguments.callee.id = 1001) : (++arguments.callee.id);
				}
			}

			function ClassPeople(firstName, lastName){
				this.id = tools.id();
				this.firstName = firstName;
				this.lastName = lastName;
			}

			ClassPeople.prototype.fullName = function(){
				return this.firstName + this.lastName;
			};

			var zhangsan = new ClassPeople('张', '三');
			console.log('id = ' + zhangsan.id + ', fullName = ' + zhangsan.fullName());

			var lisi = new ClassPeople('李', '四');
			console.log('id = ' + lisi.id + ', fullName = ' + lisi.fullName());

			// 利用arguments.callee.caller找到顶层调用函数
			function topFun1(){
				var c = arguments.callee.caller;

				do{
					console.log(c.name);
				}while(c = c.caller);
			}
			function topFun2(){
				topFun1();
			}
			function topFun3(){
				topFun2();
			}
			topFun3();
		</script>
	</body>
</html>

3.2. 效果图