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

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



Web Worker 详细介绍_Web Workers的使用

web worker 是运行在后台的 JavaScript,独立于其他脚本,也就是说在Javascript单线程执行的基础上,开启一个子线程,进行程序处理,而不影响主线程的执行。Service Worker 是一个由事件驱动的 worker,它由源和路径组成,以加载 .js 文件的方式实现的。

数字在JavaScript中是如何编译的

JavaScript中的所有数字都是浮点数。这篇博客文章解释了这些浮点数如何在64位二进制内部表示。浮点数并不一定等于小数,定点数也并不一定就是整数。所谓浮点数就是小数点在逻辑上是不固定的,而定点数只能表示小数点固定的数值

window.location.href的用法(动态输出跳转)

javascript中的location.href有很多种用法,window.location.href 语句可以实现一个框架的页面在执行服务器端代码后刷新另一个框架的页面

js的解析的两个阶段_预解析阶段、执行阶段

js不像C语言那样只要编译一次之后成.exe文件之后就不用在编译可以直接使用了,js是一种解释型语言,js同理是边解析边执行。js的解析分为两个阶段 1.预解析阶段 2.执行阶段。

js秒数转换成时分秒_js如何将秒拼接为时分秒显示?

接口返回的是int类型的秒数,在前端显示要求拼接为时分秒显示,这篇文章主要讲解实现js秒数转换成时分秒的方法。

JavaScript中变量提升和函数提升的意义理解

在ES6之前,Js中是没有块级作用域的,只存在全局作用域和函数作用域。变量提升即将变量声明提升到它所在作用域的最开始的部分;函数提升只有函数声明中才发生。

JavaScript中公有、私有、静态、受保护的属性和方法

在开发中,我们需要限制某些属性和方法的暴露程度,使得它们不能通过对象实例本身被访问、修改或调用。要了解js面向对象,就必需先了解js中什么是公有、私有、静态、受保护。

基于规则评分的密码强度检测算法分析及实现(JavaScript)

用正则表达式做用户密码强度的通过性判定,过于简单粗暴,不但用户体验差,而且用户帐号安全性也差。那么如何准确评价用户密码的强度,保护用户帐号安全呢?本文分析介绍了几种基于规则评分的密码强度检测算法

js设备判断_判断移动端还是PC端?判断android还是ios?判断移动端浏览器类型?

js判断用户的浏览设备是移动设备还是PC?判断详细浏览器设备信息。判断微信、新浪、QQ打开。判断是android系统还是ios系统...

javascript中关键词in用法介绍【js 关键字 in 的使用方法】

js中关键词...in... 从字面上理解就是什么在什么中,在js中差不多也是表达这个意思,主要作用:1用于数组和对象的判断、2 遍历数组或者对象