深入解析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实现居中弹出层代码
Aug 25 Javascript
js带按钮的提示框可供选择示例代码
Sep 17 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 Javascript
vue调用语音播放的方法
Sep 27 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中Memcache操作类及用法实例
2014/12/12 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python字符串连接方法分析
2016/04/12 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
python绘制热力图heatmap
2020/03/23 Python
深入理解Django-Signals信号量
2019/02/19 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
html5菜单折纸效果
2014/04/22 HTML / CSS
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
公益广告语集锦
2014/03/13 职场文书
授权委托书
2014/07/31 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
Python进程池与进程锁之语法学习
2022/04/11 Python