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

 更新时间:2020年09月02日 11:08:12   作者:vickylinj  
这篇文章主要介绍了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]

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

相关文章

  • JavaScript中的作用域与闭包、原型与原型链、异步与单线程

    JavaScript中的作用域与闭包、原型与原型链、异步与单线程

    JavaScript的三座大山指的是:作用域和闭包、原型和原型链、异步与单线程,这些概念在日常的开发工作中经常被提及,并对我们理解和编写高质量的JavaScript代码至关重要
    2024-02-02
  • uniapp自定义多列瀑布流组件项目实战总结

    uniapp自定义多列瀑布流组件项目实战总结

    这篇文章主要为大家介绍了uniapp自定义多列瀑布流组件实战总结,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • js实现透明度渐变效果的方法

    js实现透明度渐变效果的方法

    这篇文章主要介绍了js实现透明度渐变效果的方法,涉及javascript实现渐变效果的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 基于Bootstrap框架菜鸟入门教程(推荐)

    基于Bootstrap框架菜鸟入门教程(推荐)

    下面小编就为大家带来一篇基于Bootstrap框架菜鸟入门教程(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Bootstrap Table使用整理(一)

    Bootstrap Table使用整理(一)

    基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能
    2017-06-06
  • js打开新窗口方法整理

    js打开新窗口方法整理

    js打开新窗口的方法有很多,本文大致整理了一些,需要的朋友可以参考下
    2014-02-02
  • 详解TypeScript2.0标记联合类型

    详解TypeScript2.0标记联合类型

    这篇文章主要介绍了TypeScript2.0标记联合类型,对TS感兴趣的同学,可以参考下
    2021-05-05
  • 分享JavaScript 中的几种继承方式

    分享JavaScript 中的几种继承方式

    这篇文章主要介绍了分享JavaScript 中的几种继承方式,JavaScript中的继承主要是通过原型链实现的,具体实现需要的小伙伴可以参考下面文章详细内容
    2022-05-05
  • 使用Vite从零搭建前端项目的详细过程

    使用Vite从零搭建前端项目的详细过程

    这篇文章主要介绍了使用Vite从零搭建前端项目的详细过程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • JavaScript ES6中CLASS的使用详解

    JavaScript ES6中CLASS的使用详解

    class是es6引入的最重要特性之一。在没有class之前,我们只能通过原型链来模拟类。这篇文章我们将详细的介绍关于ES6中CLASS的使用,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-11-11

最新评论