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. dutacm.club_1094_等差区间_(线段树)(RMQ算法)

    1094: 等差区间 Time Limit:5000/3000 MS (Java/Others)   Memory Limit:163840/131072 KB (Java/Others)Total ...

  2. 梦想CAD控件网页版标注样式

    增加标注样式 _DMxDrawX::AddDimStyle 增加一个新的标注样式,如果当前已经有指定名的标注样式,就直接失败返回.详细说明如下: 参数 说明 BSTR pszName 新增加的标注样式 ...

  3. Java基础(三)--final关键字

    final通常是指"不可改变的",例如我们使用的常量 通常可以有三种使用情况: 一.final修饰数据 如果final修饰数据,也就是通常所说的常量,从字面上看,常量就是不能修改的 ...

  4. Java基础(六)--枚举Enum

    枚举: 刚开始项目中没怎么用过,只知道能够实现作为项目中类似定义Constant的功能,然后知道枚举实现的单例模式几乎是最优雅的,所以, 想要深入完整的了解一下 1.基本特性: Enum.values ...

  5. vuecli3.x config

    module.exports = { // 基本路径 baseUrl: process.env.NODE_ENV === 'production' ? '/' : '/', // 输出文件目录 out ...

  6. code blocks 安装与实践

    背景 因为不是主要修习C/C++,仅用于写算法和数据结构,code blocks轻量但是安装老是出现问题,故有此记录 安装 官方地址:http://www.codeblocks.org/downloa ...

  7. Java生成PDF文件(转)

    原文地址:https://www.cnblogs.com/shuilangyizu/p/5760928.html 一.前言 前几天,做ASN条码收货模块,需要实现打印下载收货报表,经一番查找,选定iT ...

  8. 团队一致性的PHP开发环境之Vagrant

    Vagrant 简介 Vagrant是一个基于Ruby的工具,用于创建和部署虚拟化开发环境. 它的主要意义是让所有开发人员都使用和线上服务器一样的环境,本质上和你新建一个虚拟机 安装 # https: ...

  9. language support图标消失

    在控制台下输入sudo apt-get install language-selector-gnome即可

  10. Python面向对象之面向对象封装案例

    面向对象封装案例 封装 封装是面型对象编程的一大特点 面向对象编程的第一步--将属性和方法封装到一个抽象的类中: 外界使用类创建对象,然后让对象调用方法: 对象方法的细节都被封装在类的内部. 一个对象 ...