深入理解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 相关文章推荐
extjs 为某个事件设置拦截器
Jan 15 Javascript
JQuery选择器特辑 详细小结
May 14 Javascript
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 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中memcache的应用
2013/06/18 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
javascript常用方法总结
2015/05/14 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
Python文件操作基本流程代码实例
2017/12/11 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
英国精品买手店:Browns Fashion
2016/09/29 全球购物
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
高中毕业自我评价
2014/02/08 职场文书
办公室主任岗位承诺书
2014/05/29 职场文书
民生工作实施方案
2014/05/31 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
关爱空巢老人感想
2015/08/11 职场文书
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android