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

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


代码如下:

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);

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

回到文章开头的例子：


代码如下:

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小西山子

赞 (0)

相关推荐

  • jQuery下扩展插件和拓展函数的写法（匿名函数使用的典型例子）

    我选择了jQuery,最主要是它的思想"write less,do more",因为我是一个挑剔的人,以前写过的代码,会时不时翻出来,看看有没有可以精简,优化的地方.一来是对不断学习的推动,二来可以将新的思想,技术应用到里面去. 对于jQuery插件的写法,以前就有介绍过,网上也有很多例子. 这里简要地进行些写法,主要是简写的说明,见下列代码: <script type="text/javascript" src="jquery-1.4.2.js&q

  • C++形参与实参的区别实例解析

    本文以实例阐述了C++中形参与实参的区别,有助于读者加深对于C++形参与实参的认识. 形参出现在函数定义中,在整个函数体内都可以使用, 离开该函数则不能使用.实参出现在主调函数中,进入被调函数后,实参变量也不能使用. 形参和实参的功能是作数据传送.发生函数调用时, 主调函数把实参的值传送给被调函数的形参从而实现主调函数向被调函数的数据传送. 1.形参变量只有在被调用时才分配内存单元,在调用结束时, 即刻释放所分配的内存单元.因此,形参只有在函数内部有效. 函数调用结束返回主调函数后则不能再使用该

  • jquery封装插件时匿名函数形参和实参的写法解释

    在jquery插件中我们经常看到以下这段代码 ;(function ( $, window, document, undefined ){ //函数体内具体代码 })(jQuery, window,document); 1.代码最前面的分号,可以防止多个文件压缩合并以为其他文件最后一行语句没加分号,而引起合并后的语法错误. 2.匿名函数(function(){})();:由于Javascript执行表达式是从圆括号里面到外面,所以可以用圆括号强制执行声明的函数.避免函数体内和外部的变量冲突. 3

  • php中函数的形参与实参的问题说明

    当实参个数<形参个数 时php会发出警告,因为php的解释机制会认为,有参数被定义了却没有被使用,那很可能会影响函数的功能.所以会发出警告.然而,当 实参个数>形参个数 时,php是不会报错的,它只会取前面的几个参数,多余的则将会丢弃. 在PHP中编写函数,一般情况下调用函数的时候,改变的值都是形参而不是实参.但是如果在形参中加入地址符时候就会改变实参的值,为什么? 请看下面的例子: 复制代码 代码如下: <?php //编写一个函数swap(),测试该函数的实参值无改变 functio

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

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

    引子: 今天看到别人的一个题目: 复制代码 代码如下: function fn(x){ x = 10; arguments[0] = 20; console.log(x,arguments[0]) } fn() 感觉自己对这也是一知半解,自己也可以试一下,于是就特地分析一下. 本想从语言的角度来分析,无奈功力不够,只能粗浅的尝试一下,于是称之管中窥豹,还望大牛指正. 这是昨天写的,今天吃饭的时候又想了一下,想来想去感觉有些问题还是说得不靠谱,于是又试着修改了一下. 每一本js入门书籍都会提到,J

  • c++指针使用形参改变实参的方法

    将10个整数按由小到大的顺序排列 #include <iostream> using namespace std; int main() { //使用形参改变实参数 //将10个整数按由小到大的顺序排列 void select_sort(int *p, int n);//函数声明 int a[10], i; cout << "enter the originl array:" << endl; for (i = 0; i < 10; i++)

  • C语言中形参和实参详解及实例代码

    形式参数和实际参数 函数的参数分为形参和实参两种.在本小节中,进一步介绍形参.实参的特点和两者的关系.形参出现在函数定义中,在整个函数体内都可以使用,离开该函数则不能使用.实参出现在主调函数中,进入被调函数后,实参变量也不能使用.形参和实参的功能是作数据传送.发生函数调用时,主调函数把实参的值传送给被调函数的形参从而实现主调函数向被调函数的数据传送. 函数的形参和实参具有以下特点: 1.形参变量只有在被调用时才分配内存单元,在调用结束时,即刻释放所分配的内存单元.因此,形参只有在函数内部有效.函

  • Python的形参和实参使用方式

    形参可以设置参数默认值,设置遵循从右至左原则 例如:fun(x=0,y=1),fun(x,y=1),但不可以是fun(x=1,y) 形参设置可以为数字字符串变量.元组和字典等任意类型数据,元组形参是在变量名前加*,字典形参是在变量名前加** 例如:fun(var),fun(*tuple),fun(*list),fun(**dict) 实参接受也可以是任意类型数据,当接收数据为元组列表或者字典时,同样是在数据变量前加*和** 例如:fun(x),fun(*seq),fun(*list),fun(*

  • Java形参和实参的实例之Integer类型与Int类型用法说明

    经常会有这样一道面试题,有两个整形变量分别是a = 1 ,b = 2.编写一个方法swap互换他们的值. 
class
 
Main
 
{


 
public
 
static
 
void
 main
(
String
[]
 args
)
 
{


 
Integer
 a 
=
 
1
;


 
Integer
 b 
=
 
2
;


 
System
.
out
.
println
(
"a="
 
+
 a 
+
 
",b="
 
+
 b


  • Java必踩的坑之方法中形参、实参传递

    首先亮明Java中方法参数传递的规则,这两点很重要: 如果实参是基本类型(包括包装类型)或者String,则实参不会变(传的是值): 如果实参是对象集合或者数组,则实参会改变(传的是引用). 上面这两条比较简单,笔者就不展开说了,这里只说一点,关于方法中引用的传递,很多人会踩坑,如下: 我们先以数组举例,如下代码,很简单的几行,大家猜一下会最终输出的结果是什么样子的呢? public class PassByValueDemo { public static void main(String[]

  • C语言形参和实参传值和传址详解刨析

    C语言形参和实参传值和传址详解刨析

    目录 例题 分析 实参与形参 实际参数(实参): 形式参数(形参): 修改 分析 传值和传址 传值调用 传址调用 讲解知识点之前,我们先来做一道题! 例题 写一个函数可以交换两个整形变量的内容 例如: 交换前:20 30 交换后:30 20 题目让我们用函数的方式写 #include <stdio.h> void Swap1(int x, int y) { int z = 0; z = x; x = y; y = z; } int main() { int a = 0; int b = 0;

随机推荐