理解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 相关文章推荐
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
js实现金山打字通小游戏
Jul 24 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
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
js文字滚动停顿效果代码
2008/06/28 Javascript
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
jquery阻止后续事件只执行第一个事件
2014/07/24 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
Python多线程编程(一):threading模块综述
2015/04/05 Python
Python解析nginx日志文件
2015/05/11 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
详解Python中的路径问题
2020/09/02 Python
python 动态绘制爱心的示例
2020/09/27 Python
创先争优标语
2014/06/27 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
苏州园林导游词
2015/02/03 职场文书
离婚案件被告代理词
2015/05/23 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
Python中with上下文管理协议的作用及用法
2022/03/18 Python