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 相关文章推荐
Javascript操作cookie的函数代码
Oct 03 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
JavaScript中string对象
Jun 12 Javascript
laypage分页控件使用实例详解
May 19 Javascript
原生JS实现不断变化的标签
May 22 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
微信小程序排坑指南详解
May 23 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
详解React项目中碰到的IE问题
Mar 14 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
JavaScript数组 几个常用方法总结
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数组内存耗用太多问题的解决方法
2010/04/05 PHP
关于php mvc开发模式的感想
2011/06/28 PHP
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
让您的菜单不离网站
2006/10/03 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
用Python实现KNN分类算法
2017/12/22 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
python七夕浪漫表白源码
2019/04/05 Python
python配置文件写入过程详解
2019/10/19 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
Python项目跨域问题解决方案
2020/06/22 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
大三学生入党思想汇报
2014/01/02 职场文书
给领导的致歉信范文
2014/01/13 职场文书
元旦晚会感言
2014/03/12 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
基石观后感
2015/06/12 职场文书
组织委员竞选稿
2015/11/21 职场文书