深入解析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 相关文章推荐
jquery 简短右键菜单 多浏览器兼容
Jan 01 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
three.js快速入门【推荐】
Jan 21 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 Javascript
vue获取data数据改变前后的值方法
Nov 07 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
基于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
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
Angular的$http与$location
2016/12/26 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
实例讲解Python中的私有属性
2014/08/21 Python
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
简单了解python关键字global nonlocal区别
2020/09/21 Python
浅析Python requests 模块
2020/10/09 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
结婚典礼证婚词
2014/01/11 职场文书
运动会四百米广播稿
2014/01/19 职场文书
中学自我评价
2014/01/31 职场文书
工程技术员岗位职责
2014/03/02 职场文书
就业协议书样本
2014/08/20 职场文书
优秀家长自荐材料
2014/08/26 职场文书
2014年小学工作总结
2014/11/26 职场文书
慰问信范文
2015/02/14 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书