理解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 相关文章推荐
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 Javascript
原型和原型链 prototype和proto的区别详情
Nov 02 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
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
用PHP读取超大文件的实例代码
2012/04/01 PHP
php中stream(流)的用法
2014/03/25 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
js中this用法实例详解
2015/05/05 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
Python自动创建Excel并获取内容
2020/09/16 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
HTML5进度条特效
2014/12/18 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
数据库专业英语
2012/11/30 面试题
五好党支部事迹材料
2014/02/06 职场文书
个人自我鉴定总结
2014/03/25 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android
python中validators库的使用方法详解
2022/09/23 Python