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

时间: 2017-11-07阅读: 643标签: 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在严格模式下是无法访问的,它已经被废弃了,至于移除原因是因为它潜在的不安全性。 所以这里就不介绍他的例子了。。。



js常见知识点整理总结

一些常用的JavaScript 知识点整理,包括:两个函数是否等价、NaN是什么?它是什么类型?如何检测一个变量是否是NaN?作用域相关问题?js小数计算不准确的bug,js算法/思路相关,js类型强制转换

JavaScript中的魔幻代理Proxy

什么是 JavaScript 代理?通过 Proxy 我们可以拦截并改变一个对象的几乎所有的根本操作,包括但不限于属性查找、赋值、枚举、函数调用等等。利用 Proxy,我们可以拦截并不存在的属性的读取

适配器在JavaScript中的体现

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

JavaScript中的循环和作用域

JavaScript有一个特点,也许会让开发者头痛, 是与循环和作用域相关的.const。最简单的方案是用 let 声明、另外一个非常普遍的解决这个问题是使用pre-ES6代码, 同时它被称作即时调用函数表达式(IIFE)

JavaScript中的行为委托

行为委托简单来说就是一种设计模式,不同于传统的构造函数的类式设计。这里每个例子会通过构造函数,class和行为委托来不同实现,不过不会评论class,是否使用class取决于你的观点。

打造自己的JavaScript武器库

作为战斗在业务一线的前端,要想少加班,就要想办法提高工作效率。这里提一个小点,我们在业务开发过程中,经常会重复用到日期格式化、url参数转对象、浏览器类型判断、节流函数等一类函数,这些工具类函数

(...)这三个点在JavaScript中意味着什么?

解释JavaScript中三个点的作用:数组/对象扩展运算符、rest运算符(使用函数的参数时,无论是完全替换参数还是与函数的参数一起替换参数,这三个点也称为rest运算符)

await在forEach不起作用解决

我们知道await这个机制肯定是没问题的,如果真的有问题肯定不会轮到我测出来,那么其实剩下来的问题只能是for遍历的原因了。lodash的forEach和[].forEach不支持await,如果非要一边遍历一边执行await,可使用for-of

你不知道的 js 保留字

先是笼统的说一下有什么保留字,保留字的话根据犀牛书的划分,可有分为以下几类:基础保留字、严格模式下的保留字、严格模式下的不完全保留字、ECMAScript3的保留字、ECMAScipt 5 的保留字、全局变量和函数

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

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