深入理解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对象的支持
Jul 25 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
介绍一下28个JS常用数组方法
May 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自动更新新闻DIY
2006/10/09 PHP
谈谈PHP语法(2)
2006/10/09 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
php url路由入门实例
2014/04/23 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
Python使用getpass库读取密码的示例
2017/10/10 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
浅析python的Lambda表达式
2019/02/27 Python
Python的log日志功能及设置方法
2019/07/11 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
三星英国官网:Samsung英国
2018/09/25 全球购物
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
公司成本主管岗位责任制
2014/02/21 职场文书
超市店庆活动方案
2014/08/31 职场文书
趣味运动会广播稿
2014/09/13 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
创业计划书之宠物店
2019/09/19 职场文书
Python实现智慧校园自动评教全新版
2021/06/18 Python