理解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 相关文章推荐
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
JavaScript导出Excel实例详解
Nov 25 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
Javascript的this用法
Jan 16 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
Mar 01 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 Javascript
基于JavaScript实现随机点名器
Feb 25 Javascript
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
理解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
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
php注册登录系统简化版
2020/12/28 PHP
接收键盘指令的脚本
2006/06/26 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
Angularjs 基础入门
2014/12/26 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
解决vue-router中的query动态传参问题
2018/03/20 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
解决uWSGI的编码问题详解
2017/03/24 Python
python连接数据库的方法
2017/10/19 Python
Python返回数组/List长度的实例
2018/06/23 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
广告设计专业自荐信范文
2013/11/14 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
语文教育专业求职信
2014/06/28 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
公司租房协议书
2014/10/14 职场文书
离职证明格式样本
2015/06/12 职场文书
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS