深入理解JavaScript 参数按值传递


Posted in Javascript onMay 24, 2017

定义
ECMAScript中所有函数的参数都是按值传递的。

什么是按值传递呢?

也就是说,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样。

按值传递

举个简单的例子:

var value = 1;
function foo(v) {
  v = 2;
  console.log(v); //2
}
foo(value);
console.log(value) // 1

很好理解,当传递 value 到函数 foo 中,相当于拷贝了一份 value,假设拷贝的这份叫 _value,函数中修改的都是 _value 的值,而不会影响原来的 value 值。

引用传递

拷贝虽然很好理解,但是当值是一个复杂的数据结构的时候,拷贝就会产生性能上的问题。

所以还有另一种传递方式叫做按引用传递。

所谓按引用传递,就是传递对象的引用,函数内部对参数的任何改变都会影响该对象的值,因为两者引用的是同一个对象。

举个例子:

var obj = {
  value: 1
};
function foo(o) {
  o.value = 2;
  console.log(o.value); //2
}
foo(obj);
console.log(obj.value) // 2

哎,不对啊,连我们的红宝书都说了 ECMAScript 中所有函数的参数都是按值传递的,这怎么能按引用传递成功呢?

而这究竟是不是引用传递呢?

第三种传递方式

不急,让我们再看个例子:

var obj = {
  value: 1
};
function foo(o) {
  o = 2;
  console.log(o); //2
}
foo(obj);
console.log(obj.value) // 1

如果 JavaScript 采用的是引用传递,外层的值也会被修改呐,这怎么又没被改呢?所以真的不是引用传递吗?

这就要讲到其实还有第三种传递方式,叫按共享传递。

而共享传递是指,在传递对象的时候,传递对象的引用的副本。

注意: 按引用传递是传递对象的引用,而按共享传递是传递对象的引用的副本!

所以修改 o.value,可以通过引用找到原值,但是直接修改 o,并不会修改原值。所以第二个和第三个例子其实都是按共享传递。

最后,你可以这样理解:

参数如果是基本类型是按值传递,如果是引用类型按共享传递。

但是因为拷贝副本也是一种值的拷贝,所以在高程中也直接认为是按值传递了。

所以,高程,谁叫你是红宝书嘞!

深入系列

JavaScript深入系列目录地址: https://github.com/mqyqingfeng/Blog 。

JavaScript深入系列预计写十五篇左右,旨在帮大家捋顺JavaScript底层知识,重点讲解如原型、作用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等难点概念。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
微信小程序实现animation动画
Jan 26 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
详解Angular 4.x NgTemplateOutlet
May 24 #Javascript
javascript简单写的判断电话号码实例
May 24 #Javascript
Angular2搜索和重置按钮过场动画
May 24 #Javascript
深入理解react-router@4.0 使用和源码解析
May 23 #Javascript
angularjs中ng-bind-html的用法总结
May 23 #Javascript
vue.js实现价格格式化的方法
May 23 #Javascript
js编写选项卡效果
May 23 #Javascript
You might like
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
Python中的getopt函数使用详解
2015/07/28 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
python文字转语音实现过程解析
2019/11/12 Python
基于python实现文件加密功能
2020/01/06 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
幼儿园教学管理制度
2014/02/04 职场文书
《雨点》教学反思
2014/02/12 职场文书
运动员口号
2014/06/09 职场文书
红色旅游心得体会
2014/09/03 职场文书
同学聚会邀请函
2015/01/30 职场文书
邀请函格式范文
2015/02/02 职场文书
《1942》观后感
2015/06/08 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
信息技术课教学反思
2016/02/23 职场文书
Python机器学习之基础概述
2021/05/19 Python
MySQL之select、distinct、limit的使用
2021/11/11 MySQL
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby