js的函数的按值传递参数(实例讲解)


Posted in Javascript onNovember 16, 2017

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 } ]。

以上这篇js的函数的按值传递参数(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
autoIMG 基于jquery的图片自适应插件代码
Mar 12 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
JS中的回调函数实例浅析
Mar 21 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
Js数组扁平化实现方法代码总汇
Nov 11 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 #Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 #Javascript
图片加载完成再执行事件的实例
Nov 16 #Javascript
详解React 在服务端渲染的实现
Nov 16 #Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 #Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 #Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 #Javascript
You might like
php格式化工具Beautify PHP小小BUG
2008/04/24 PHP
php抓取https的内容的代码
2010/04/06 PHP
CI框架入门示例之数据库取数据完整实现方法
2014/11/05 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
input按钮的事件处理大全
2010/12/10 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
大学毕业感言一句话
2014/02/06 职场文书
培训专员岗位职责
2014/02/26 职场文书
前处理组长岗位职责
2014/03/01 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
小学课外活动总结
2014/07/09 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
机关保密工作承诺书
2015/05/04 职场文书
教你用eclipse连接mysql数据库
2021/04/22 MySQL
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python