深入解析JavaScript中的arguments对象


Posted in Javascript onJune 12, 2016

arguments定义

所有的函数都有一个自己的arguments对象,用来储存它实际接受到的参数,而不局限于函数声明时所定义的参数列表。它不是数组却类似数组,具有数组一样的访问性质及方式,可以由arguments[n]来访问对应的单个参数的值,并拥有数组长度属性length。但是却不具有数组的一些方法。可以通过call把arguments转化成真正的数组,然后进行数组的操作。

var args = Array.prototype.slice.call(arguments);

类数组

1. 判断ARGUMENTS是不是数组

alert(arguments instanceof Array);
alert(arguments instanceof Object);

2. 如何严格的判断一个数据是数组(ARRAY)类的实例

function isArray(value){
  if (typeof Array.isArray === "function") {
    return Array.isArray(value);
  }else{
    return Object.prototype.toString.call(value) === "[object Array]";
  }
}

3. 把ARGUMENTS转换成数组
方法一:内置的类型可以通过prototype找到内置的属性方法,Array.prototype.slice就是访问Array的内置方法slice。通过slice方法,返回一个数组。call是调用一个对象的方法,以另外一个对象替换当前对象。

var arg = Array.prototype.slice.call(arguments,0);

方法二:比方法一性能要差一点,因为它是先创建一个数组,然后再进行的

var arg = [].slice.call(arguments,0);

方法三:通过循环转变成数组

function toArray(arguments){
  var a = [];
  for(var i=0;i<arguments.length;i++){
    a.unshift(arguments.[i]);
  }
  return a;
}

caller

当一个函数被另一个函数调用的时候,被调用的函数会自动生成一个caller属性,指向调用它的函数对象,如果函数未被调用,则caller为null。

function testCaller() {
  var caller = testCaller.caller;
  alert(caller);
}
function aCaller() {
  testCaller();
}
aCaller();

弹出的是函数aCaller的内容。

arguments.callee
arguments.callee指向正在运行的函数自身,返回正被执行的 Function 对象,也就是所指定的 Function 对象的正文。
注意:arguments.length是实参长度,arguments.callee.length是形参长度,通常用来判断形参与实参长度是否一致
通过arguments获得函数的实参,通过arguments.callee获得函数的形参。
在闭包中应用的也比较广泛。

var i = 0;

  function b(num) {

    if (num < 10) {

      num++;

      i++;

      //如果有参数,callee也要把参数带上;

      arguments.callee(num);

    } else {

      //输出2次

      alert("调用了"+i+"次callee!");

    }

  }

  b(8);

 Arguments.callee在闭包中的应用,它提供了一种递归调调用的功能。

//用arguments.callee计算10的阶乘,例如: 1×2×3×4×5×6×7....

  function c(x) {

    return x > 1 ? x * arguments.callee(x - 1) : 1

  } (10);

  //输出6

  alert(c(3));

  //输出3628800

  alert(c(10));

例:callee求1-n的和

function fn(n){
  if(n==1) return n;
  else return n+arguments.callee(n-1);
}

它可以让一个匿名函数自己调用自己

例:

function list(type){
  var result = "<"+type+"l><li>";
  var args = Array.prototype.slice.call(arguments,1);
  result += args.join("</li><li>");
  result += "</li></"+type+"l>";
  return result;
}
var listHtml = list("o","one","two");
console.log(listHtml);

例2:面试题:下面的console.log结果是[1,2,3,4]的是?

function foo(x){
  console.log(arguments);
  return x;
}
foo(1,2,3,4);
function foo(x){
  console.log(arguments);
  return x;
}(1,2,3,4)

在预解释的时候,function fn(){}(1);会被分开处理,分成两个函数,第一个是function fn() {},而第二个则为匿名函数:(1)。如果第二个不带参数,就会报错,但是上面的函数包含在一个()里面,则是正确的。

(function fn(){
  console.log(arguments);
}(1,2,3,4));
(function foo(x){
  console.log( arguments);
  return x;
})(1,2,3,4)
function foo(){
  bar.apply(null,arguments);
}
function bar(x){
  console.log(arguments);
}
foo(1,2,3,4);
Javascript 相关文章推荐
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
js 3秒后跳转页面的实现代码
Mar 10 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
layui自定义工具栏的方法
Sep 19 Javascript
js模拟实现百度搜索
Jun 28 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 #Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 #Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 #Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 #Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 #Javascript
浅谈如何实现easyui的datebox格式化
Jun 12 #Javascript
JQuery的attr 与 val区别
Jun 12 #Javascript
You might like
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
php生成mysql的数据字典
2016/07/07 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
javascript 学习之旅 (1)
2009/02/05 Javascript
jquery dialog键盘事件代码
2010/08/01 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
javascript版2048小游戏
2015/03/18 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
Java的五个基础面试题
2016/02/26 面试题
实习生个人的自我评价
2013/12/08 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
班级旅游计划书
2014/05/03 职场文书
效能监察建议书
2014/05/19 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript