理解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 相关文章推荐
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
JavaScript数值转换的三种方式总结
Jul 31 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
Vue.js实现的计算器功能完整示例
Jul 11 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
ionic2.0双击返回键退出应用
Sep 17 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 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
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
PHP面向对象程序设计之接口用法
2014/08/20 PHP
php学习笔记之基础知识
2014/11/08 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
JavaScript 事件查询综合
2009/07/13 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
主管会计岗位责任制
2014/02/10 职场文书
王老吉广告词
2014/03/20 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
Python中else的三种使用场景
2021/06/16 Python
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript
bose降噪耳机音能消除人声吗
2022/04/19 数码科技