讲解JavaScript 之arguments的详解,arguments.callee,arguments.caller的使用方法和实例

时间: 2017-11-07阅读: 3082标签: js知识

arguments是什么?

arguments 是一个对应于传递给函数的参数的类数组对象。在(非箭头)函数调用时,创建的一个 它类似于Array,但除了长度之外没有任何Array属性 的对象 ,它存储的是实际传递给函数的参数(局限于函数声明的参数列表)。此对象包含传递给函数的每个参数的条目,第一个条目的索引从0开始。例如:

function fn(){ //利用instanceof判断arguments
    console.log( 'arguments instanceof Array? ' + (arguments instanceof Array) );//false
    console.log( 'arguments instanceof Object? ' + (arguments instanceof Object) );//true
    console.log(arguments);
    console.log(arguments[0]);//string
    console.log(arguments[1]);//1
}
fn('string',1);

控制台显示如下:


从输出我们可以看出arguments 是一个‘object’,带有2个常用的属性callee和caller(文章最后面介绍)。对应的参数可以通过条目的索引来获取(从0开始),虽然它不拥有数组的属性,但是我们可以把它转换为一个正在的数组,通过js中的apply和call,或者es6中的参数扩展的方法,代码如下:

//call
var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);
//由于slice会阻止某些js引擎中的优化 (v8)产生一些性能问题,可以采用如下方法
var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));
var args = Array.from(arguments);
var args = [...arguments];

通过上面的方法,我们就可以让arguments成为一个真正的Array,我们就能获取参数的长度length,使用array中一些方法,如Join,concat,indexOf等等。

需要注意一点的是只有函数被调用时,arguments对象才会创建,未调用时其值为null,例如

console.log(new Function().arguments);//return null


arguments的例子
下面将介绍arguments在实际项目中,常用于传递任意数量的参数到该函数,来对参数进行操作。

1.累加:
function add(...args) {
  let sum=0;
  for(let i of args){
   sum+=parseFloat(i);
  }
  return sum
}
add(1,2,3);//输出6


2.字符串链接:

function concat(o) {
  let args = Array.prototype.slice.call(arguments, 1);
  return args.join(o);
}
concat('.','a','b','c');//输出a.b.c


arguments.callee的使用

callee是arguments对象的一个成员,arguments.callee的值包含当前正在执行的函数,由于arguments在函数被调用时才有效,因此arguments.callee在函数未调用时是不存在的(即null.callee)。

值得注意的是:在严格模式下,ES5禁止使用 arguments.callee,当一个函数必须调用自身的时候, 避免使用 arguments.callee, 通过要么给函数表达式一个名字,要么使用一个函数声明。


arguments.callee的例子
在递归函数必须能够引用它本身。很典型的,函数通过自己的名字调用自己。然而,匿名函数没有名称。因此如果没有可访问的变量指向该函数,唯一能引用它的方式就是通过arguments.callen,例如
function create() {
   return function(n) {
      if (n <= 1)
         return 1;
      return n * arguments.callee(n - 1);
   };
}

var result = create()(5); // returns 120 (5 * 4 * 3 * 2 * 1)

定义了一个函数,按流程,定义并返回了一个阶乘函数。该例并不是很实用,并且几乎都能够用 命名函数表达式 实现同样结果的例子 。例如我们经常是这样实现的:

function create(n) {
    if(n <= 1)
      return 1;
    return n*create(n - 1);
}
var result = create(5);//120


arguments.caller的使用

arguments.caller属性原先用在函数执行的时候调用自身。在一个函数调用另一个函数时,被调用函数会自动生成一个caller属性,指向调用它的函数对象。如果该函数当前未被调用,或并非被其他函数调用,则caller为null。 

但是arguments.caller在严格模式下是无法访问的,它已经被废弃了,至于移除原因是因为它潜在的不安全性。 所以这里就不介绍他的例子了。。。



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/59

1000多个项目中的十大JavaScript错误以及如何避免

通过统计数据库中的1000多个项目,我们发现在 JavaScript 中最常出现的错误有10个。下面会向大家介绍这些错误发生的原因以及如何防止。对于这些错误发生的次数,我们是通过收集的数据统计得出的。

javascript不可变性是什么?

不可变性即某个变量在进行了某个操作之后,其本身没有发生变化,比如对于字符串而言,对字符串的任何操作都会改变字符串本身的值,而是在字符串的基础上复制出来一个然后再改变,这样我们就说是不可变的

前端与编译原理——用JS写一个JS解释器

说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念。作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于“抽象语法树(AST)”。但这仅仅是个开头而已。编译原理的使用,甚至能让我们利用JS直接写一个能运行JS代码的解释器。

js实现获取手机相册并上传

当初有很多人说使用form方法将文件封装来上传,可是因为要照顾到从相机中选择图片,所以一直没有去做。 后来看到了Uploader的方法来传文件,感觉自己找到了 。是使用plus.uploader来完成的

JS方法整理_js常用函数大全

都是日常工作中使用的一些js方法,整理出来以便大家学习使用。主要包括:Js获取页面地址参数 、千分位 、判断是否数字 、图片按比例压缩、截取指定字节数的字符串、判断是否微信 、获取时间格式的几个举例 、获取字符串字节长度 、对象克隆、深拷贝 ...

js的微任务和宏任务

宏任务:当前调用栈中执行的代码成为宏任务。微任务: 当前(此次事件循环中)宏任务执行完,在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。

JavaScript弹框、对话框、提示框方法,以及原创JS模拟Alert弹出框效果

通过js实现网页弹出各种形式的窗口,常用的:弹出框、对话框、提示框等。弹出对话框并输出一段提示信息 、弹出一个询问框,有确定和取消按钮 ,利用对话框返回的值 (true 或者 false) 、弹出一个输入框,输入一段文字,可以提交、window.open 弹出新窗口的命令

适配器在JavaScript中的体现

适配器设计模式在JavaScript中非常有用,在处理跨浏览器兼容问题、整合多个第三方SDK的调用,都可以看到它的身影。适配器模式是一种软件设计模式,允许从另一个接口使用现有类的接口。它通常用于使现有的类与其他类一起工作,而无需修改其源代码。

JavaScript支持宏吗?

与其它类 Lisp 语言不同,不支持宏是 JavaScript 与生俱来的一个问题,这是因为宏会在编译时操作语法树,而这在像 JavaScript 这样的语言中几乎是不可能的。

解密JavaScript执行上下文

首先我们先了解一下什么是执行上下文栈(Execution context stack)。分别展示了栈、堆和队列,其中栈就是我们所说的执行上下文栈;堆是用于存储对象这种复杂类型,我们复制对象的地址引用就是这个堆内存的地址

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!