深入理解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 相关文章推荐
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
jquery获取节点名称
Apr 26 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 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中最容易忘记的一些知识点总结
2013/04/28 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
python连接mysql实例分享
2016/10/09 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
Python可迭代对象操作示例
2019/05/07 Python
python实现月食效果实例代码
2019/06/18 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
python飞机大战游戏实例讲解
2020/12/04 Python
旧时光糖果:Old Time Candy
2018/02/05 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
简单说下OSPF的操作过程
2014/08/13 面试题
个人简历自我评价范文
2014/02/04 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
摄影展策划方案
2014/06/02 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
检讨书格式
2019/04/25 职场文书
导游词之山东孔庙
2019/11/04 职场文书