深入理解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 相关文章推荐
jQuery 学习入门篇附实例代码
Mar 16 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
axios取消请求的实践记录分享
Sep 26 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
使用vue判断当前环境是安卓还是IOS
Apr 12 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
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
js创建对象的几种常用方式小结(推荐)
2010/10/24 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
python读文件的步骤
2019/10/08 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
Python 日期与时间转换的方法
2020/08/01 Python
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
《神奇的克隆》教学反思
2014/04/10 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
超市周年庆活动方案
2014/08/16 职场文书
电信营业员岗位职责
2015/04/14 职场文书
Pygame Draw绘图函数的具体使用
2021/11/17 Python