理解Javascript_14_函数形式参数与arguments


Posted in Javascript onOctober 20, 2010

注:在阅读本博文前请先阅读《理解javascript_13_执行模型详解》
注:本文的部分内容是自已的一些推论,并无官文文档作依据,如有错误之后,还望指正。
生涩的代码
我们先来看一段比较生涩的代码:

function say(msg,other,garbage){ 
alert(arguments[1]);//world 
var other = 'nice to meet you!'; 
var msg; 
alert(arguments.length); 
alert(msg);//hello 
alert(other);//nice to meet you! 
alert(arguments[1]);//nice to meet you! 
alert(garbage);//undefined 
} 
say('hello','world');

你能正确的解释代码的执行结果吗?思考一下.

我想代码运行的结果,应该会和你的想象有很大的出入吧!为什么msg正常输出为hello,而不是undefined呢?函数定义的参数和函数内部定义的变量重复了会发生什么呢?arguments和函数定义时的参数有什么关系呢?让我们来一一解答:
简单的内存图
理解Javascript_14_函数形式参数与arguments
注:虚线表示的是曾经引用的指向。

解答

首先,我们来了解两个概念,形式参数和实际参数。形式参数指的是定义方法时所明确指定的参数,由于Javascript语言的灵活性,javascript并不要求方法调用时,所传递的参数个数与形式参数一致.而javascript实际调用时所传递的参数就是实际参数。arguments指的就是实际参数。从say方法中可以看出,say定义了三个形式参数,而实际调用时只传递了两个值。因此arguments.length的值为2,而不是3.接着我们来看一下arguments的特殊行为,个人感觉arguments会将所有的实际参数都当作对象来看待,对于基本数据类型的实际参数则会转换为其对应的对象类型。这是根据在函数内定义与形式参数同名的变量并赋值,arguments对应的值会跟着改变来判断的。
接着我们来分析一下构建say方法执行上下文的过程,由于逻辑比较复杂,这里我写一些'伪代码'来进行说明:

function say(msg,other,garbage){ 
//先对函数声明的变量进行'预解析',内部执行流程,它是是不可见的 
var msg = undefined; 
var other = undefined; 
var garbage = undefined; 
//再对函数内部定义的变量进行'预解析' 
var other = undefined;//很明显,此时这个定义已经无意义了。 
var msg = undefined;//无意义 
//对实际参数进行赋值操作 
msg = new String('hello');//arguments的会将所有实际参数当作对象看待 
other = new String('world'); 
//正式进入函数代码部分 
alert(arguments[1]);//world 
other = 'nice to meet you!'; 
//var msg;这个已经被预解析了,因此不会再执行 
alert(arguments.length);//2 
alert(msg);//hello 
alert(other);//nice to meet you! 
alert(arguments[1]);//nice to meet you! 
alert(garbage);//undefined 
}

这段代码已经可以解释一面的所有的问题了。我就不多说了。
唯一强调的一点是在内部用var定义与形式参数同名的变量是无意义的,因为在程序'预解析'后,会将它们看作为同一个变量。

其它
关于arguments还有很多特性,我在《伪数组》一文中提到也提到了arguments,有兴趣的读者可以去看一下。arguments的实际应用你还可以参考一下这一篇文章 :
http://www.gracecode.com/archives/2551/

好了,也就这么多了。希望大家能多多指正,多提意见吧。

Javascript 相关文章推荐
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 Javascript
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 Javascript
javascript无刷新评论实现方法
May 13 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
JS面向对象编程详解
Mar 06 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 Javascript
理解Javascript_13_执行模型详解
Oct 20 #Javascript
用jquery与css打造个性化的单选框和复选框
Oct 20 #Javascript
Jquery插件之多图片异步上传
Oct 20 #Javascript
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 #Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 #Javascript
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 #Javascript
Javascript技巧之不要用for in语句对数组进行遍历
Oct 20 #Javascript
You might like
PHP 和 MySQL 基础教程(二)
2006/10/09 PHP
一个简单的PHP&MYSQL留言板源码
2020/07/19 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
php数组转换js数组操作及json_encode的用法详解
2013/10/26 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
XML的代替者----JSON
2007/07/21 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
python检查指定文件是否存在的方法
2015/07/06 Python
Python装饰器简单用法实例小结
2018/12/03 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
干部培训自我鉴定
2014/01/22 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
店面销售职位的职责
2014/03/09 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
新郎答谢词
2015/01/04 职场文书
乌镇导游词
2015/02/02 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
详解JVM系列之内存模型
2021/06/10 Javascript
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸