简析JavaScript中的Function类型(四)——函数的内部属性

我只是一个虾纸丫 提交于 2019-12-02 10:14:24

函数的内部属性主要有三个:arguments, this, caller。其中this简析JavaScript中的this关键字中探讨的已经比较清楚了,这里来说下argumentscaller

1. arguments

看下面的代码:

function sayHello(){
  console.log(arguments[0], arguments[1], arguments[2]);
}
sayHello('Bob', 'Jack', 'Rose');// Bob Jack Rose

如代码所示,声明sayHello时没有显式地声明参数,但是在函数内部依然可以通过arguments访问传递给函数的参数。arguments是一个类数组对象,包含着传入函数中的所有参数。

arguments除了可以保存参数以外,它还有一个名叫callee的属性,该属性指向包含arguments的函数,如下代码所示:

function sayHello(){
  console.log(arguments.callee);
}
sayHello();
/*
控制台输出:
ƒ sayHello(){
      console.log(arguments.callee);
    }
*/

那么将函数的引用保存在arguments.callee中有什么用处呢?下面是一个使用示例:

//阶乘函数
function factorial(num){
  if(num <= 1){
    return 1;
  }else{
    return num * factorial(num - 1);
  }
}
console.log(factorial(4));//24

这种写法在函数有名字,而且名字以后也不会变的情况下是没有问题的。但是函数的执行与函数名factorial紧紧耦合在了一起,当函数名发生变化时,调用就出现了问题:

var trueFactorial = factorial;
factorial = null;
console.log(trueFactorial(4));//Uncaught TypeError: factorial is not a function

使用arguments.callee可以达到解耦的目的:

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

var trueFactorial = factorial;
factorial = null;
console.log(trueFactorial(4));// 24

如代码所示,无论将来函数名如何变化,始终都能保证正确的执行结果。

2. caller

从字面意思理解,为调用者。这个属性保存着当前函数的调用函数,如果是在全局作用域中调用,它的值为null。来看下面的例子:

function inner(){
  console.log(inner.caller);
}

function outer(){
  inner();
}

inner();// null
outer();// 结果如下:
/*
ƒ outer(){
      inner();
    }
*/

如代码所示,在全局作用域中调用时结果为null,在outer中调用时结果为outer。同样,为了解耦合,也可以将inner改写如下:

function inner(){
  console.log(arguments.callee.caller);
}

需要注意的是严格模式是不支持argumentscaller属性的。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!