callee和caller的区别和作用是什么？

在前端开发中，callee 和 caller 是函数的两个属性，用于访问函数执行上下文。虽然曾经很常见，但它们现在已被弃用，甚至在严格模式下被禁止使用，因为它们会阻碍引擎优化，并带来安全风险。 建议避免使用它们，并采用更现代的方法。

以下是它们曾经的含义和作用：

• arguments.callee: 指代当前正在执行的函数。

  • 作用： 在匿名函数内部递归调用自身时很有用。由于匿名函数没有名称，arguments.callee 提供了一种引用自身的方式。

  • 例子：

  // 过去的使用方式 (已弃用)
  var factorial = function(n) {
    if (n === 0) {
      return 1;
    } else {
      return n * arguments.callee(n - 1); // 使用 arguments.callee 递归调用
    }
  };
  
  // 现代的替代方案 (推荐)
  const factorial = (n) => {
    if (n === 0) {
      return 1;
    } else {
      return n * factorial(n - 1); // 直接使用函数名递归调用
    }
  };
  
  
  // 或者命名函数表达式:
  const factorial = function fact(n) {
    if (n === 0) {
      return 1;
    } else {
      return n * fact(n - 1); // 使用命名函数表达式递归调用
    }
  };
  

• function.caller: 指代调用当前函数的函数。

  • 作用： 用于调试或创建函数调用链的日志记录。

  • 例子：

  // 过去的使用方式 (已弃用)
  function foo() {
    console.log("foo is called by: ", foo.caller); 
  }
  
  function bar() {
    foo();
  }
  
  bar(); // 输出 foo is called by: function bar() { ... }
  
  
  //  现代的替代方案，使用console.trace()
  function foo() {
    console.trace("foo is called");
  }
  
  function bar() {
    foo();
  }
  
  bar(); //  输出完整的调用栈信息
  

为什么callee和caller被弃用？

• 性能问题: arguments.callee 和 function.caller 妨碍了 JavaScript 引擎的优化，例如内联函数。因为引擎无法确定函数是否会被修改或在运行时被不同的函数调用，所以它不能安全地进行优化。

• 严格模式: 在 ECMAScript 5 的严格模式下，arguments.callee 和 function.caller 被禁止使用，访问它们会抛出错误。

• 安全性: caller 属性可能会暴露调用栈信息，这可能构成安全风险。

总结:

尽量避免使用 arguments.callee 和 function.caller。对于递归，使用命名函数表达式或箭头函数。对于调试，使用 console.trace() 获取调用栈信息。 这些现代方法更安全、更高效，并且与当前的 JavaScript 标准兼容。