浅析js的函数的按值传递参数

js的函数传参的方式是按值传递,正常情况下,改变函数参数的值,并不会对函数外部的变量造成影响。例如:

‘use strict‘;var list = [1, 2, 3];
list.forEach(function(item) {
    item ++;
});
console.log(list);    //    [ 1, 2, 3 ]

这是因为js的函数在接收参数时,会生成一个副本变量,该副本变量等于参数的值,可以分析js这样运行的:

‘use strict‘;
var list = [1, 2, 3];
list.forEach(function(item, i) {
    // 第一个item是副本,第二个item是数组元素list[i]
    var item = item;
    // 副本item++
    item ++;
    // 打印的是副本的值
    console.log(item); //    2, 3, 4
});
// 原数组不会改变
console.log(list);    //    [ 1, 2, 3 ]

但是当函数的参数传递的是一个对象呢?

‘use strict‘;var list = [{a: 1, b: 2}];
list.forEach(function(item) {
    item.a ++;
});
console.log(list);    //    [ { a: 2, b: 2 } ]

发现函数内部居然改变了函数外部变量的值,那这又是为什么呢?

我们来分析js是如何运行这段代码的

‘use strict‘;
var list = [{a: 1, b: 2}];
list.forEach(function(item, i) {
    // 第一个item是副本,第二个item是数组元素list[i]
    var item = item;
    // 此时item和list[i]指向的是同一地址,故两者完全一样
    console.log(item === list[i]);    //    true
    // 此时item.a++ 亦即 list[i].a++
    item.a ++;
    // list[i]的值已经改变
    console.log(list[i]);    //    { a: 2, b: 2 }
});
console.log(list);    //    [ { a: 2, b: 2 } ]

那么为什么会产生这种情况呢?

由于js中对象属于引用类型,var item = item 这一步相当于把 list[i] 的地址赋值给了item,他们两个指向的都是原对象的地址,所以通过其中的一个去修改值时其实是修改他们指向的那个对象。例子中通过 item.a++ 方法改变了原对象的值,因此最后应该输出 [ { a: 2, b: 2 } ]。

时间: 2024-10-09 18:14:53

浅析js的函数的按值传递参数的相关文章

js 获取函数的所有参数和遍历JavaScript某个对象所有的属性名称和值的方法

获取所有参数 function test(){ for(var i=0;i<arguments.length;i++)  document.write(arguments[i]); } 遍历某个对象所有的属性名称和值的方法 <script language="javascript"> var obj = new Object(); obj.myname = "我是对象"; obj.pro2 = "23"; obj.pro3 = 

php向js的函数内传递参数-用经纬度计算2点间距离

有时候需要从php传递数据到js,这时候该怎么办呢?实例;php微信开发,用经纬度计算2点间的距离,2个坐标分别从php和js获得. 基于tp5框架的开发. 说一下注意事项: 1.php实际不能直接传递数据到js,他们两个没办法直接交互 2.可以通过一个桥梁交互,就是html 3.做法就是把js写在html页面内,然后再把把php传递过来的数据变量写在js代码内. 主要易混点在html页面 核心代码如下,从857行开始: <!DOCTYPE html> <!-- saved from u

js 获取函数的所有参数名

具体思路: 利用Function.toString()方法,获取到函数的源码,再利用正则匹配获取到参数名字. 实现代码(代码基于ES6): // 获取函数的参数名 function getParameterName(fn) { if(typeof fn !== 'object' && typeof fn !== 'function' ) return; const COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg; const DEFAULT_PA

【js】函数问题

一.函数重载问题: 由于js的函数传入的参数当做arguments对象(和数组类似,但不是Array的实例),传入的参数类型和数量没有限制,没有函数签名,所以如果要实现重载功能 的话,只能是不够完美得实现: function doAdd(num1,num2){ if(arguments.length==1){ console.log(num1+10); } else if (arguments.length==2){ console.log(num1+num2); } } 这里可以通过传入的参数

JS多个函数之间传递参数问题

JS多个函数之间传递参数的一个重要思想是在页面定义一个隐藏域,当第一个函数请求到数据时候修改隐藏域的值,第二个函数用jQuery的选择器选择页面中隐藏域的值. 比如: 页面中定义一个隐藏的页号. <!-- 隐藏查询条件的页号 --> <input type="hidden" name="currentPage" id="currentPage"> 第一个ajax函数获取页面中的页号: function queryNum(c

JS调用C#后台函数获得后台参数(html获得C#参数)

    C#有自己的后台控件,跟后台交互很简单和方便,但有的时候不得不用html控件,要如何与后台交互是个问题.例如html获得后台参数后传到PHP进行数据库操作.下面简单介绍JS调用后台函数获得要传到前台的参数 C#后台代码(Default.aspx.cs): 1 public string getParameter() 2 { 3 string parameter = "这是要传到前台的参数"; 4 return parameter; 5 } Default.aspx部分代码: 注

js 四舍五入函数 toFixed(),里面的参数 就是保留小数的位数。

js 四舍五入函数 toFixed(),里面的参数 就是保留小数的位数. <script language="javascript"> document.write("<h1>JS保留两位小数例子</h1><br>"); var a=2.1512131231231321; document.write("原来的值:"+a+"<br>"); document.write

js 的函数参数的默认值问题

js函数参数设置默认值 php有个很方便的用法是在定义函数时可以直接给参数设默认值,如: function simue ($a=1,$b=2){ return $a+$b; } echo simue(); //输出3 echo simue(10); //输出12 echo simue(10,20); //输出30 但js却不能这么定义,如果写function simue(a=1,b=2){}会提示缺少对象. js函数中有个储存参数的数组arguments ,所有函数获得的参数会被编译器挨个保存到

js设置函数参数默认值的3种方法

js默认是不支持funtion f($a=a){}这种写法的,如果想设置函数参数的默认值,可以参考如下三种方法: 第一种方法: 使用arguments,函数所有的参数都会存入arguments数组离去,所以我们可以从中获取相应的参数然后赋值 function example(a,b){ var a = arguments[0] ? arguments[0] : 1;//设置参数a的默认值为1 var b = arguments[1] ? arguments[1] : 2;//设置参数b的默认值为