深入理解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实现手把手教你月入万刀(转贴)
Nov 07 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
理解javascript异步编程
Jan 27 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
微信小程序背景音乐开发详解
Dec 12 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
十大“创意”战术!
2020/03/04 星际争霸
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
Python的re模块正则表达式操作
2016/05/25 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
使用python进行拆分大文件的方法
2018/12/10 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
英文自荐信格式
2013/11/28 职场文书
销售文员岗位职责
2013/11/29 职场文书
建筑安全责任书范本
2014/07/24 职场文书
小学大队长竞选稿
2015/11/20 职场文书
详解MySQL中的主键与事务
2021/05/27 MySQL
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL