深入理解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 HTML中的table
Apr 15 Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
javascript 事件绑定问题
Jan 01 Javascript
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
javascript初学者常用技巧
Sep 02 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
Node.js安装配置图文教程
May 10 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 生成文字png图片的代码
2011/04/17 PHP
详解Yii实现分页的两种方法
2017/01/14 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
2020/09/10 Javascript
浅析Python中signal包的使用
2015/11/13 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
Python中标准模块importlib详解
2017/04/16 Python
python2.7实现邮件发送功能
2018/12/12 Python
python 输出所有大小写字母的方法
2019/01/02 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
大学生职业生涯规划书前言
2014/01/09 职场文书
中秋节活动总结
2014/08/29 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
合同补充协议书
2016/03/24 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers