首页
所有分类
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 相关文章推荐
JavaScript中this关键字使用方法详解
Mar 08 Javascript
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
javascript 动态加载 css 方法总结
Jul 11 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
jquery animate图片模向滑动示例代码
Jan 26 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
基于jquery实现五星好评
Nov 18 jQuery
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
VUE安装使用教程详解
Jun 03 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 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
内置模块(1) 人人对战(1) 双人对弈(1) Parser(1) 递归(1) tokenizer(1) 限速(1) 后端(1) 限流(2) 算法(1)
You might like
php命令行使用方法和命令行参数说明
2014/04/08 PHP
smarty实现多级分类的方法
2014/12/05 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
插件：检测javascript的内存泄漏
2007/03/04 Javascript
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
javascript下过滤数组重复值的代码
2007/09/10 Javascript
Document 对象的常用方法
2009/07/31 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
javascript版的in_array函数（判断数组中是否存在特定值）
2014/05/09 Javascript
jQuery+HTML5加入购物车代码分享
2020/10/29 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
利用aardio给python编写图形界面
2017/08/21 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
文明礼仪小标兵事迹
2014/01/12 职场文书
财产公证书样本
2014/04/04 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
docker 制作mysql镜像并自动安装
2022/05/20 Servers