JavaScript arguments.callee作用及替换方案详解

一、arguments.callee的作用:返回正被执行的 Function 对象

　　 arguments 的主要用途是保存函数参数， 但这个对象还有一个名叫 callee 的属性，返回正被执行的 Function 对象，也就是所指定的 Function 对象的正文，这有利于匿名函数的递归或者保证函数的封装性。

　　 请看下面这个非常经典的阶乘函数

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

定义阶乘函数一般都要用到递归算法；如上面的代码所示，在函数有名字，而且名字以后也不会变的情况下，这样定义没有问题。
但问题是这个函数的执行与函数名 factorial 紧紧耦合在了一起。为了消除这种紧密耦合的现象，可以像下面这样使用

arguments.callee

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

在这个重写后的 factorial()函数的函数体内，没有再引用函数名 factorial。这样，无论引用函数时使用的是什么名字，都可以保证正常完成递归调用。例如

function factorial(num){
      if(num <= 1){
        return 1;
      }else{
        return num * arguments.callee(num-1);
      }
    }
    var trueFactorial = factorial;
    alert(trueFactorial(5));  //120  

    factorial = function() {
      return 0;
    }
    alert(trueFactorial(5));// 120 如果没有使用arguments.callee，将返回0

在此，变量 trueFactorial 获得了 factorial 的值，实际上是在另一个位置上保存了一个函数的指针。然后，我们又将一个简单地返回 0的函数赋值给 factorial 变量。如果像原来的 factorial() 那样不使用 arguments.callee，调用 trueFactorial()就会返回 0。可是，在解除了函数体内的代码与函数名的耦合状态之后，trueFactorial()仍然能够正常地计算阶乘；至于factorial()，它现在只是一个返回 0的函数。

二、arguments.callee的替换方案

现在已经不推荐使用arguments.callee()；

原因：访问 arguments 是个很昂贵的操作，因为它是个很大的对象，每次递归调用时都需要重新创建。影响现代浏览器的性能，还会影响闭包。

不能用怎么办？

递归时用到arguments.callee（）是常见的事情，比如一道面试题。接受参数n=5,不用for循环输出数组【1,2,3,4,5】，这是用递归的思路，配合arguments.callee，代码如下：

function show(n) {
  var arr = [];
  return (function () {
    arr.unshift(n);
    n--;
    if (n != 0) {
      arguments.callee();
    }
    return arr;
  })()
}
show(5)//[1,2,3,4,5]

现在arguments.callee 被弃用了。怎么办，其实很简单，给内部函数一个名字即可（当函数被调用时，它的arguments.callee对象就会指向自身，也就是一个对自己的引用。）

function show(n) {
  var arr = [];
  return (function fn() {
    arr.unshift(n);
    n--;
    if (n != 0) {
      fn();
    }
    return arr;

  })()
}
show(5)//[1,2,3,4,5]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Javascript中arguments和arguments.callee的区别浅析

    通过一个例子来理解下arguments与arguments.callee的具体区别: 代码如下: 复制代码 代码如下: <script type="text/javascript">                 function check(args){                         var ac = args.length;              var ex = args.callee.length;              document

  • javascript下arguments,caller,callee,call,apply示例及理解

    在提到上述的概念之前,首先想说说javascript中函数的隐含参数:arguments Arguments 该对象代表正在执行的函数和调用它的函数的参数. [function.]arguments[n] 参数function :选项.当前正在执行的 Function 对象的名字. n :选项.要传递给 Function 对象的从0开始的参数值索引. 说明 Arguments是进行函数调用时,除了指定的参数外,还另外创建的一个隐藏对象.Arguments是一个类似数组但不是数组的对象,说它类似数

  • js的隐含参数(arguments,callee,caller)使用方法

    在提到上述的概念之前,首先想说说javascript中函数的隐含参数: arguments arguments 该对象代表正在执行的函数和调用它的函数的参数.[function.]arguments[n]参数function:选项.当前正在执行的 Function 对象的名字. n :选项.要传递给 Function 对象的从0开始的参数值索引.说明Arguments是进行函数调用时,除了指定的参数外,还另外创建的一个隐藏对象.Arguments是一个类似数组但不是数组的对象,说它类似数组是因为

  • js arguments,jcallee caller用法总结

    关键字:arguments,callee,callerarguments:表示传入函数的参数callee:表示函数和函数主体的语句caller:表示调用该函数的函数arguments 该对象代表正在执行的函数和调用它的函数的参数. caller 返回一个对函数的引用,该函数调用了当前函数.functionName.callerfunctionName 对象是所执行函数的名称. 说明对于函数来说,caller属性只有在函数执行时才有定义.如果函数是由顶层调用的,那么 caller包含的就是 nul

  • js arguments.callee的应用代码

    复制代码 代码如下: function f(x){ alert(x); return arguments.callee; } f(0)(1)(2)(3)(4)(5)(6)(7)(8)(9); 复制代码 代码如下: function f(){ var a=arguments,i,l=a.length; for(i=0; i<l;i++){ alert(a[i]); } return arguments.callee; } f(0)(1,2)(3,4,5)(6,7,8,9);

  • Javascript函数中的arguments.callee用法实例分析

    本文实例讲述了Javascript函数中的arguments.callee用法.分享给大话公大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

  • js中arguments,caller,callee,apply的用法小结

    在提到上述的概念之前,首先想说说javascript中函数的隐含参数:arguments Arguments 该对象代表正在执行的函数和调用它的函数的参数. [function.]arguments[n]参数function :选项.当前正在执行的 Function 对象的名字. n :选项.要传递给 Function 对象的从0开始的参数值索引. 说明Arguments是进行函数调用时,除了指定的参数外,还另外创建的一个隐藏对象.Arguments是一个类似数组但不是数组的对象,说它类似数组是

  • javascript中arguments,callee,caller详解

    javascript中arguments,callee,caller详解

    arguments是什么? arguments是函数调用时,创建的一个类似的数组但又不是数组的对象,并且它存储的是实际传递给函数的参数,并不局限于函数声明的参数列表哦. 尼玛,什么意思? 写个demo看看,代码见下 <!DOCTYPE html> <head> <title>arguments</title> <meta http-equiv="Content-Type" content="text/html; chars

  • JavaScript arguments.callee作用及替换方案详解

    一.arguments.callee的作用:返回正被执行的 Function 对象 arguments 的主要用途是保存函数参数, 但这个对象还有一个名叫 callee 的属性,返回正被执行的 Function 对象,也就是所指定的 Function 对象的正文,这有利于匿名函数的递归或者保证函数的封装性. 请看下面这个非常经典的阶乘函数 function factorial(num){ if (num <=1) { return 1; } else { return num * factori

  • js中getBoundingClientRect的作用及兼容方案详解

    js中getBoundingClientRect的作用及兼容方案详解

    1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位置集合. 执行 object.getBoundingClientRect();会得到元素的top.right.bottom.left.width.height属性,这些属性以一个对象的方式返回. getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离

  • JavaScript中arguments.callee属性的作用与替换方案

    arguments.callee的作用 在函数内部,有两个特殊的对象:arguments 和 this.其中, arguments 的主要用途是保存函数参数, 但这个对象还有一个名叫 callee 的属性,该属性是一个指针,指向拥有这个 arguments 对象的函数. 请看下面这个非常经典的阶乘函数 function factorial(num){ if (num <=1) { return 1; } else { return num * factorial(num-1) } } 定义阶乘函

  • JavaScript 中断请求几种方案详解

    目录 1 Promise 中断调用链 中断Promise 包装abort方法--仿照Axios的CancelToken 2 RXJS的unsubscribe方法 3 Axios的CancelToken 1 Promise Promise有一个缺点是一旦创建无法取消,所以本质上Promise是无法被终止的. 但是我们可以通过中断调用链或中断Promise来模拟请求的中断. 中断调用链 中断调用链就是在某一个then/catch执行之后,后续的链式调用(包括then,catch,finally)不再

  • Android中图片压缩方案详解及源码下载

    Android中图片压缩方案详解及源码下载 图片的展示可以说在我们任何一个应用中都避免不了,可是大量的图片就会出现很多的问题,比如加载大图片或者多图时的OOM问题,可以移步到Android高效加载大图及多图避免程序OOM.还有一个问题就是图片的上传下载问题,往往我们都喜欢图片既清楚又占的内存小,也就是尽可能少的耗费我们的流量,这就是我今天所要讲述的问题:图片的压缩方案的详解. 1.质量压缩法 设置bitmap options属性,降低图片的质量,像素不会减少 第一个参数为需要压缩的bitmap图

  • JavaScript开发过程中规范commit msg意义详解

    目录 规范 commit msg 的意义 commitizen commitlint 安装依赖 添加 .commitlint.config.js 文件 配置 git hooks 总结一下: step 1: 安装依赖 step 2: 添加配置文件 git cz 的原理 规范 commit msg 的意义 规范化.格式化的 commit message 可以让我们更好的追踪需求的演进.回滚时能够快速的找到提交.最次也能让我们的仓库显的更专业. 团队如何规范 commit msg呢,靠宣讲.靠文档?当

  • React Native采用Hermes热更新打包方案详解

    React Native采用Hermes热更新打包方案详解

    目录 1, 背景 2,热更新传统方案 3,使用Hermes打包 1, 背景 如果我们打开RN的Android源码,在build.gradle中回看到这样一段代码. if (enableHermes) { def hermesPath = "../../node_modules/hermes-engine/android/"; debugImplementation files(hermesPath + "hermes-debug.aar") releaseImple

  • javascript中的糖衣语法Promise对象详解

    目录 一.Promise的诞生 1.回调地狱 二.Promise的行为 1.Promise的语法 2.Promise的方法 (1)Promise.prototype.then() (2)Promise.prototype.catch() (3)Promise.prototype.finally() (4)Promise.resolve() (5)Promise.reject() (6)Promise.all() (7)Promise.race() 三.Promise的场景 1.Ajax请求 2.

  • JS技巧多状态页面中的mock方案详解

    目录 引言 技术选型 业务逻辑改造 Eruda 插件 Mock 数据整理 引言 我们有时候会遇到一个业务页面存在很多个状态,甚至子状态,比如订单详情就是其中的典型,涉及从订单创建到订单结束,以及售后等流程.维护起来每个状态对应一份数据,虽然我们 QA 提供了数据构造平台,但构造一份对应状态的数据还是需要花费不少时间,而且串行流程一旦出错的话只能重新来一遍. 后期维护阶段也不容易构造对应状态的数据,导致排查页面问题比较耗时. 另外一个问题就是从头熟悉业务的话成本比较高,如果有一个直观的页面能够看到

  • Angular中$cacheFactory的作用和用法实例详解

    Angular中$cacheFactory的作用和用法实例详解

    先说下缓存: 一个缓存就是一个组件,它可以透明地储存数据,以便以后可以更快地服务于请求.多次重复地获取资源可能会导致数据重复,消耗时间.因此缓存适用于变化性不大的一些数据,缓存能够服务的请求越多,整体系统性能就能提升越多. $cacheFactory介绍: $cacheFactory是一个为Angular服务生产缓存对象的服务.要创建一个缓存对象,可以使用$cacheFactory通过一个ID和capacity.其中,ID是一个缓存对象的名称,capacity则是描述缓存键值对的最大数量. 1.

随机推荐