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: , b: }];
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 } ]。

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

  1. js 获取函数的所有参数名

    具体思路: 利用Function.toString()方法,获取到函数的源码,再利用正则匹配获取到参数名字. 实现代码(代码基于ES6): // 获取函数的参数名 function getParame ...

  2. js 以函数名作为参数动态执行 函数

    function myFunc() { console.log(11111); } test("myFunc"); function test(funcName) { if(typ ...

  3. js 事件函数中的参数带换行符或换行标签都不能起作用的解决方法

    把问题参数值赋给标签的属性data-value,通过属性值获取参数值.

  4. 【js】函数问题

    一.函数重载问题: 由于js的函数传入的参数当做arguments对象(和数组类似,但不是Array的实例),传入的参数类型和数量没有限制,没有函数签名,所以如果要实现重载功能 的话,只能是不够完美得 ...

  5. JS:函数多个参数默认值指定

    函数有一个参数时,以往这样定义(参数为p1): function mfun(p1){ … } 当需要为p1设定一个默认值时 function mfun(p1){ if(p1===undefined) ...

  6. js调用函数时传入的参数个数与函数定义时的参数个数不符时的操作

    在js中函数没有重载的概念,如果声明了多个重名的函数,不管函数的形参个数是否一样,只有最有一个有效,其他的函数声明都是无效的.比如说声明了两个函数fn(),第一次声明时没有形参,第二次声明时形参有两个 ...

  7. JS中函数参数和函数返回值的理解

    函数本质就是功能的集合 JS中函数是对象,因此,函数名实际上仅仅是一个指向函数对象的指针,不会与某个函数绑定,所以,JS中没有重载(重载就是通过传递不同类型的参数,使两个相同函数名的函数执行不同的功能 ...

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

    js 四舍五入函数 toFixed(),里面的参数 就是保留小数的位数. <script language="javascript"> document.write(& ...

  9. 关于js 中函数的参数

    var a = 100; function test(a){ a++; //a(形参)是局部变量 console.log(a); } test(a); console.log(a); //结果是 10 ...

随机推荐

  1. 在iframe内页面完全加载完后,关闭父页面生成的div遮罩层

    遮罩层div为iframe父页面生成,需在iframe内页面完全加载完后,关闭遮罩层 alertMsgClose() :函数为关闭遮罩层函数 此段代码在iframe页面内: <script> ...

  2. JS实现LOGO像雪花一样落下特效

    <HTML><HEAD><TITLE>LOGO从上落下</TITLE> <SCRIPT language=JavaScript> //窗口改 ...

  3. js一般用法

    <1> 通过id查找html元素 var x=document.getElementById("intro");   <2> 通过标签名查找html元素 v ...

  4. 一个简单的java年龄计算器

    制作一个如下图年龄计算器 根据题目,我做了一个由Calendar类以及年月日各相减得到的年龄,当然正确的方法不止一个,以下为我的源代码和结果截图: package com.Date; import j ...

  5. 类模板成员函数默认值问题:an out-of-line definition of a member of a class template cannot have default arguments

    template <typename T> class A { ); }; template<typename T> ) { /* */ } 对于类似上文代码,VS编译器会报 ...

  6. 洛谷——P2659 美丽的序列

    P2659 美丽的序列 单调栈维护区间最小值,单调递增栈维护区间最小值, 考虑当前数对答案的贡献,不断加入数,如果加入的数$>$栈顶,说明栈顶的元素对当前数所在区间是有贡献的,同时加入当前的数. ...

  7. 【代码段】Android Studio使用DatePicker选择日期

    布局文件中放一个TextView就好了 Java文件如下: public class TestDatePickerActivity extends AppCompatActivity { privat ...

  8. OS X中微信双开

    1.打开系统终端: 2.下载插件,输入命令(不包括括号) git clone https://github.com/Sunnyyoung/WeChatTweak-macOS.git 并回车: 3.进入 ...

  9. display math in cnblog

    $a=b+c$ this is a example \(a=\frac{b}{c}\)

  10. 带你全面分析嵌入式linux系统启动过程中uboot的作用

    资料链接:http://mp.weixin.qq.com/s/rYVchD-xy7Bdkc1O3fW2Wg