首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javascript管中窥豹 形参与实参浅析

Posted in Javascript onDecember 17, 2011

引子：
今天看到别人的一个题目： 

function fn(x){ 
x = 10; 
arguments[0] = 20; 
console.log(x,arguments[0]) 
} 
fn()

感觉自己对这也是一知半解，自己也可以试一下，于是就特地分析一下。
本想从语言的角度来分析，无奈功力不够，只能粗浅的尝试一下，于是称之管中窥豹，还望大牛指正。
这是昨天写的，今天吃饭的时候又想了一下，想来想去感觉有些问题还是说得不靠谱，于是又试着修改了一下。
每一本js入门书籍都会提到，JS的函数内部有一个Arguments的对象arguments，用来函数调用的时候实际传入函数的参数，fn.length保存形参的长度。
这些对分析来说略有用处，可是我想得到更多形参的信息，不知道有谁有比较好的办法，我暂时无解。
于是只能模拟了。
先不理会模拟，从实际问题出发： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
</head> 
<body> 
<script type="text/javascript"> 
//形参中含有隐形的声明var x = undefined 
function fn(x){ 
console.log(x,arguments[0]); 
arguments[0] = 2; 
console.log(x,arguments[0]); 
} 
console.log('fn():'); 
fn(); 
//undefined , undefined 
//undefined , 2 
console.log('fn(1):'); 
fn(1); 
//1,1 
//2,2

重点关注后面两个函数（fn_1,fn_2）的执行，在这里，我们直接重新声明了形参对应的x，看到网上有的人说这是声明的一个局部变量x。
也是，不过这个局部变量不是一般的局部变量，x直接关联对应的arguments，上面的实例中就是x关联arguments[0]；
所以我猜测这个赋值的流程应该是
1、函数定义的时候，声明了形参，如果函数体内有相同名称的局部变量，则忽略此声明。同时函数体内同时会有一个对象arguments；
（乱入一句：个人以为arguments当初不定义成数组的一个考虑是否是因为在函数定义内无法确定实际参数的个数[运行时动态确定]，那么要么这个数组无限大，要么数组一取值就越界）。
回到正题：
对于fn_2,初始化形参相当于var x；（此时x没有赋值，默认为undefined，赋值是在语句执行的时候赋值的）
所以如果可以这么写的话，fn_2就应该是这样： 
function fn_2(var x){ 
x = 3; 
console.log(x,arguments[0]); 
arguments[0] = 2; 
console.log(x,arguments[0]); 
}

2、函数语法检测通过，执行的时候，函数内部的arguments对象一开始就得到赋值，赋值完毕后，函数体内的语句开始执行。
下面的一段表述是我自己想的，不知道正确不正确（特别是关联的说法）： 
一旦发现形参（对应的变量）被赋值，那么会去寻找arguments对应的项，如果发现了arguments对应的项，那么设置形参与arguments对应项的关联。如果没有发现arguments里面对应的项（undefined），那么形参和arguments还是保持独立。这里寻找的是arguments在函数运行开始的一个快照。反过来arguments赋值也是一样。

上面的删除的部分是昨天的，红字部分是写到一半的时候发现有问题加上去的。今天回过神来，昨天为什么要傻逼的想到快照呢，这个不就是函数开始运行时直接
判断关联么？于是改了一下表述： 
在函数开始执行时，设置形参与arguments的关联信息。如果形参与对应的arguments里面能找到对应的项（均为undefined），那么两者关联。后面不论怎么处理，都不会改变整个函数体内的关联信息。

于是后面的实例说明的说法也要改变：
回到例子，fn_2函数语法检测通过，从第二步开始执行:
不带参数的情况 
fn_2(); 
function fn_2(x){//arguments赋值完成，由于没有实参，于是arguments参数列表为空。同时判断关联信息，显然形参有，arguments空，两者相互独立，以后都不会再关联 
var x = 3;//x赋值为3，x与arguments[0]相互独立，arguments[0]还是为undefined 
console.log(x,arguments[0]);//打印x=3，arguments[0]为undefined 
arguments[0] = 2;//arguments被赋值，x与arguments[0]相互独立。因此x=3不改变 
console.log(x,arguments[0]);//打印x = 3，arguments[0]=2 
}

带参数的情况 
带参数的情况 fn_2(1); 
function fn_2(x){//arguments赋值完成，arguments[0]=1。同时形参x有值，两者相关联，永结同心。 
var x = 3;//x赋值为3，x与arguments[0]关联，于是arguments[0]被赋值为3，。 
console.log(x,arguments[0]);//打印x=3，arguments[0] = 3 
arguments[0] = 2;//arguments[0]被赋值2，由于x与arguments[0]已经关联到一起，于是x同时改变 
console.log(x,arguments[0]);//打印x = 2，arguments[0]=2 
}

反过来应该也是一样的：
不带参数 
fn_2(); 
function fn_2(x){//不关联 
arguments[0] = 2;//找不到对应的x(undefined),相互独立 
console.log(x,arguments[0]);//undefined，2 
x = 3;//相互独立，快照。虽然arguments动态添加了，老死不相往来，所以依旧失败 
console.log(x,arguments[0]);//3,2 
}

带参数 
fn_2(1); 
function fn_2(x){ 
arguments[0] = 2;//关联 
console.log(x,arguments[0]);//2，2 
x = 3;//关联 
console.log(x,arguments[0]);//3,3 
}

由于我们只有一个形参，可能说服力不够，现在增加到两个。
只有一个实参的情况： 
fn_2(1); 
function fn_2(x,y){ //arguments赋值完成，arguments[0]=1,arguments[1]=undefined，因此只有x与arguments[0]关联，y与arguments[1]老死不往来 
console.log(x,y,arguments[0],arguments[1]); //1,undefined,1,undefined 
var x = 3; //x赋值为3，x与arguments[0]关联，于是arguments[0]被赋值为3。 
console.log(x,y,arguments[0],arguments[1]); //3，undefined，3，undefined 
var y = 4; //y赋值为3，y与arguments[1]相互独立，arguments[1]还是为undefined 
console.log(x,y,arguments[0],arguments[1]); //3,4,3,undefined 
arguments[0] = 2; //arguments[0]被赋值2，由于x与arguments[0]已经关联到一起，于是x同时改变 
console.log(x,y,arguments[0],arguments[1]); //2,4,2，undefined 
arguments[1] = 5; //arguments[1]被赋值5，y与arguments[1]相互独立，于是y还是保持为4 
console.log(x,y,arguments[0],arguments[1]); //x=2,y=4,arguments[0]=2,arguments[1]=5 
}

有两个实参的情况： 
fn_3(1,6); 
function fn_3(x,y){ //arguments赋值完成，arguments[0]=1,arguments[1]=6，x与arguments[0],y与arguments[1]都相互关联 
console.log(x,y,arguments[0],arguments[1]); //1,6,1,6 
var x = 3; //x赋值为3，x与arguments[0]关联,于是arguments[0]被赋值为3。 
console.log(x,y,arguments[0],arguments[1]); //3，6，3，6 
var y = 4; //y赋值为3，y与arguments[1]关联,于是arguments[1]被赋值为4。 
console.log(x,y,arguments[0],arguments[1]); //3,4,3,4 
arguments[0] = 2; //arguments[0]被赋值2，由于x与arguments[0]已经关联到一起，于是x同时改变 
console.log(x,y,arguments[0],arguments[1]); //2,4,2，4 
arguments[1] = 5; //arguments[1]被赋值5，由于y与arguments[1]已经关联到一起，于是y同时改变 
console.log(x,y,arguments[0],arguments[1]); //x=2,y=5,arguments[0]=2,arguments[1]=5 
}

以上全部是推测，因为实际中没有办法形参的信息，所以我按照推测写了一个小测试：
下面的也改了： 
function _Function(){//获得的形参列表为数组：_args 
var _args = []; 
for(var i = 0; i < arguments.length - 1; i++){ 
var obj = {}; 
obj['key'] = arguments[i]; 
obj[arguments[i]] = undefined; 
_args.push(obj); 
} 
//this._argu = _args; 
var fn_body = arguments[arguments.length - 1]; 
//下面的方法获取实参_arguments，这里_arguments实现为一个数组，而非arguments对象 
this.exec = function(){ 
//函数运行时，实参_arguments被赋值 
var _arguments = []; 
for(var i = 0; i < arguments.length; i++){ 
_arguments[i] = arguments[i]; 
} 
//下面执行函数体 
eval(fn_body); 
} 
}

替换成： 
function _Function(){//获得的形参列表为数组：_args 
var _args = []; 
for(var i = 0; i < arguments.length - 1; i++){ 
var obj = {}; 
obj['key'] = arguments[i]; 
obj[arguments[i]] = undefined; 
_args.push(obj); 
} 
//this._argu = _args; 
var fn_body = arguments[arguments.length - 1]; 
//下面的方法获取实参_arguments，这里_arguments实现为一个数组，而非arguments对象 
this.exec = function(){ 
//函数运行时，实参_arguments被赋值 
var _arguments = []; 
for(var i = 0; i < arguments.length; i++){ 
_arguments[i] = arguments[i]; 
} 
//在运行开始就判断关联信息 
for(var j = 0; j < Math.min(_arguments.length,_args.length); j++){ 
_args[j]["link"] = true; 
} 
//下面执行函数体 
eval(fn_body); 
} 
}

上面按理来说，关联应该是把两者指向同一个对象，可是我只需要分析例子，没打算做得那么精细，所以是在函数体里面用if语句判断的 。
把例子中fn_2换成对应的形式就是： 
// function fn_2(x){ 
// var x = 3; 
// console.log(x,arguments[0]); 
// arguments[0] = 2; 
// console.log(x,arguments[0]); 
// } 
// fn_2(1) 
//在fn_2body中，用_args[i]["link"] = true;来表示形参与实参相关联 
var fn_2body = ''+ 
'_args[0][_args[0]["key"]] = 3;'+ 
'if(_args[0]["link"]){ _arguments[0] = _args[0][_args[0]["key"]];}' + 
'console.log(_args[0][_args[0]["key"]],_arguments[0]);'+ 
'_arguments[0] = 2;'+ 
'if(_args[0]["link"]){ _args[0][_args[0]["key"]] = _arguments[0]}' + 
'console.log(_args[0][_args[0]["key"]],_arguments[0]);'; 
var fn_2 = new _Function('x',fn_2body); 
fn_2.exec(1);

画了一张图来表示实例与改写函数两者的关系，顺便也改了一下：

javascript管中窥豹 形参与实参浅析

回到文章开头的例子： 
function fn(x){ 
x = 10; 
arguments[0] = 20; 
console.log(x,arguments[0]) 
} 
fn()

显然，两者相互独立：
x = 10，arguments[0] = 20;
推测一下： 
function fn(x){ 
x = 10; 
arguments[0] = 20; 
console.log(x,arguments[0]) 
} 
fn(1)

应该都是输出20,20 
function fn(x){ 
arguments[0] = 20; 
console.log(x,arguments[0]) 
} 
fn(1)

应该也都是输出20,20 
function fn(x){ 
arguments[0] = 20; 
console.log(x,arguments[0]) 
} 
fn()

应该是undefined和20
原文来自cnblogs小西山子

javascript管中窥豹 形参与实参浅析

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
JavaScript 学习历程和心得分享
Dec 12 Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
JS函数重载的解决方案
May 13 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
jquery focus(fn),blur(fn)方法实例代码
Dec 16 #Javascript
JS获取整个页面文档的实现代码
Dec 15 #Javascript
jQuery版仿Path菜单效果
Dec 15 #Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 #Javascript
js 可拖动列表实现代码
Dec 13 #Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 #Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 #Javascript
晶体管(2) 收信机(3) VOLVO(1) 66-XI(1) BOSE(2) 军机(1) MOTOROLA(1) 77A(2) 沃尔沃(1) 摩托罗拉(1)
You might like
点评山进PR-D3L三波段收音机
2021/03/02 无线电
php多用户读写文件冲突的解决办法
2013/11/06 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
Vue 过渡（动画）transition组件案例详解
2017/01/22 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
通过JQuery，JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
python 中文乱码问题深入分析
2011/03/13 Python
python计数排序和基数排序算法实例
2014/04/25 Python
Python中的localtime()方法使用详解
2015/05/22 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
Python表示矩阵的方法分析
2017/05/26 Python
numpy数组拼接简单示例
2017/12/15 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
Python常见数字运算操作实例小结
2019/03/22 Python
Python continue语句实例用法
2020/02/06 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
印度婴儿用品在线商店：Firstcry.com
2016/12/05 全球购物
什么是测试驱动开发(TDD)
2012/02/15 面试题
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
毕业证代领委托书
2014/09/26 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
2014年业务工作总结
2014/11/17 职场文书
Redis实现订单过期删除的方法步骤
2022/06/05 Redis