JS函数arguments.callee与this指向原理解析

本文深入解析JavaScript函数内部的两个特殊对象：arguments和this。通过阶乘递归案例说明如何利用arguments.callee实现解耦调用，并详细阐述this在不同执行环境（全局与对象方法）下的指向变化机制，帮助开发者准确理解函数上下文。

arguments对象与递归解耦

1、arguments对象

arguments是一个类数组对象，用于存储传入函数的所有参数。该对象包含一个名为callee的属性，这是一个指针，指向拥有当前arguments对象的函数本身。

经典案例：阶乘函数实现

阶乘函数递归实现


function factorial(num){
  if(num <= 1){
    return 1;
  }else{
    return num * factorial(num-1);
  }
}

通常定义阶乘函数会采用递归算法，如前文所示。但这种写法导致函数执行与函数名factorial强耦合。为解决此问题，可以使用arguments.callee属性。

使用arguments.callee优化递归


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

重写后的代码中，factorial()函数内部不再直接引用函数名factorial。这使得无论外部引用该函数时使用何种变量名，递归调用均能正常执行。例如：

函数引用解耦测试


var trueFac = factorial;

factorial = function(){
  return 0;
}

console.log(trueFac(5)); // 120
console.log(factorial(5)); // 0

this对象的动态指向机制

2、this对象

函数内部的另一个特殊对象是this，它引用函数执行时的环境对象。当在全局作用域中调用函数时，this指向window对象。

this在不同调用上下文中的表现


window.color = "red";
var o = { color: "blue" };

function sayColor(){
  alert(this.color);
}

sayColor(); // "red"

o.sayColor = sayColor;
o.sayColor(); // "blue"

上述sayColor()函数定义在全局作用域，并引用了this。由于在调用前this的值未定，它可能在代码执行过程中指向不同的对象。

当在全局作用域调用sayColor()时，this指向全局对象window；此时对this.color求值等同于对window.color求值，返回"red"。若将该函数赋值给对象o并调用o.sayColor()，则this指向对象o，对this.color求值等同于对o.color求值，返回“blue”。

函数的名称本质上只是一个包含函数指针的变量。

总结

以上介绍了JavaScript函数内部属性arguments和this的实例解析，希望对大家有所帮助。如有疑问欢迎留言，小编会及时回复！

JavaScript函数内部属性arguments与this详解

JavaScript函数内部特殊对象概述