深入理解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 相关文章推荐
javascript 数组的方法集合
Jun 05 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
初识SmartJS - AOP三剑客
Jun 08 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
vue自定义全局共用函数详解
Sep 18 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 Javascript
微信小程序开发之转发分享功能
Oct 22 Javascript
JS原生实现轮播图的几种方法
Mar 23 Javascript
详解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实现批量修改文件后缀名的方法
2015/07/30 PHP
详解php比较操作符的安全问题
2015/12/03 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
js 函数的副作用分析
2011/08/23 Javascript
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
VUE重点问题总结
2018/03/19 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
Python变量和数据类型详解
2017/02/15 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
python nmap实现端口扫描器教程
2020/05/28 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
wxPython实现整点报时
2019/11/18 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
Python中pass语句的作用是什么
2016/06/01 面试题
生物技术研究生自荐信
2013/11/12 职场文书
工程造价与管理专业应届生求职信
2013/11/23 职场文书
文明风采获奖感言
2014/02/18 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
解除财产保全担保书
2014/05/20 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
会计毕业生自荐书
2014/06/12 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书