深入理解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 相关文章推荐
游戏人文件夹程序 ver 3.0
Jul 14 Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 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类的使用 实例代码讲解
2009/12/28 PHP
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
浅谈PHP表单提交(POST&GET&URL编/解码)
2017/04/03 PHP
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
python numpy 反转 reverse示例
2019/12/04 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
python实现ftp文件传输功能
2020/03/20 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
EntityManager都有哪些方法
2013/11/01 面试题
建龙钢铁面试总结
2014/04/15 面试题
工厂厂长岗位职责
2013/11/08 职场文书
医学专业大学生求职的自我评价
2013/11/27 职场文书
寄语是什么意思
2014/04/10 职场文书
对教师的评语
2014/04/28 职场文书
诚信承诺书
2015/01/19 职场文书
保研推荐信格式
2015/03/25 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
办公用品管理制度
2015/08/04 职场文书
导游词之广西漓江
2019/11/02 职场文书
基于python实现银行管理系统
2021/04/20 Python
maven依赖的version声明控制方式
2022/01/18 Java/Android
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers