JavaScript中的值是按值传递还是按引用传递问题探讨


Posted in Javascript onJanuary 30, 2015

最近遇到个有趣的问题:“JS中的值是按值传递,还是按引用传递呢?”
 
在分析这个问题之前,我们需了解什么是按值传递(call by value),什么是按引用传递(call by reference)。在计算机科学里,这个部分叫求值策略(Evaluation Strategy)。它决定变量之间、函数调用时实参和形参之间值是如何传递的。
 
按值传递 VS. 按引用传递

按值传递(call by value)是最常用的求值策略:函数的形参是被调用时所传实参的副本。修改形参的值并不会影响实参。
 
按引用传递(call by reference)时,函数的形参接收实参的隐式引用,而不再是副本。这意味着函数形参的值如果被修改,实参也会被修改。同时两者指向相同的值。
 
按引用传递会使函数调用的追踪更加困难,有时也会引起一些微妙的BUG。
 
按值传递由于每次都需要克隆副本,对一些复杂类型,性能较低。两种传值方式都有各自的问题。
 
我们先看一个C的例子来了解按值和引用传递的区别:

void Modify(int p, int * q)

{

    p = 27; // 按值传递 ? p是实参a的副本, 只有p被修改

    *q = 27; // q是b的引用,q和b都被修改

}

int main()

{

    int a = 1;

    int b = 1;

    Modify(a, &b);   // a 按值传递, b 按引用传递,

                     // a 未变化, b 改变了

    return(0);

}

这里我们可以看到:
 
a => p按值传递时,修改形参p的值并不影响实参a,p只是a的副本。
b => q是按引用传递,修改形参q的值时也影响到了实参b的值。
探究JS值的传递方式
JS的基本类型,是按值传递的。

var a = 1;

function foo(x) {

    x = 2;

}

foo(a);

console.log(a); // 仍为1, 未受x = 2赋值所影响

再来看对象:
var obj = {x : 1};

function foo(o) {

    o.x = 3;

}

foo(obj);

console.log(obj.x); // 3, 被修改了!

说明o和obj是同一个对象,o不是obj的副本。所以不是按值传递。 但这样是否说明JS的对象是按引用传递的呢?我们再看下面的例子:
var obj = {x : 1};

function foo(o) {

    o = 100;

}

foo(obj);

console.log(obj.x); // 仍然是1, obj并未被修改为100.

如果是按引用传递,修改形参o的值,应该影响到实参才对。但这里修改o的值并未影响obj。 因此JS中的对象并不是按引用传递。那么究竟对象的值在JS中如何传递的呢?
 
按共享传递 call by sharing

准确的说,JS中的基本类型按值传递,对象类型按共享传递的(call by sharing,也叫按对象传递、按对象共享传递)。最早由Barbara Liskov. 在1974年的GLU语言中提出。该求值策略被用于Python、Java、Ruby、JS等多种语言。
 
该策略的重点是:调用函数传参时,函数接受对象实参引用的副本(既不是按值传递的对象副本,也不是按引用传递的隐式引用)。 它和按引用传递的不同在于:在共享传递中对函数形参的赋值,不会影响实参的值。如下面例子中,不可以通过修改形参o的值,来修改obj的值。

var obj = {x : 1};

function foo(o) {

    o = 100;

}

foo(obj);

console.log(obj.x); // 仍然是1, obj并未被修改为100.

然而,虽然引用是副本,引用的对象是相同的。它们共享相同的对象,所以修改形参对象的属性值,也会影响到实参的属性值。
var obj = {x : 1};

function foo(o) {

    o.x = 3;

}

foo(obj);

console.log(obj.x); // 3, 被修改了!

对于对象类型,由于对象是可变(mutable)的,修改对象本身会影响到共享这个对象的引用和引用副本。而对于基本类型,由于它们都是不可变的(immutable),按共享传递与按值传递(call by value)没有任何区别,所以说JS基本类型既符合按值传递,也符合按共享传递。
var a = 1; // 1是number类型,不可变 var b = a; b = 6;

据按共享传递的求值策略,a和b是两个不同的引用(b是a的引用副本),但引用相同的值。由于这里的基本类型数字1不可变,所以这里说按值传递、按共享传递没有任何区别。
 
基本类型的不可变(immutable)性质

基本类型是不可变的(immutable),只有对象是可变的(mutable). 例如数字值100, 布尔值true, false,修改这些值(例如把1变成3, 把true变成100)并没有什么意义。比较容易误解的,是JS中的string。有时我们会尝试“改变”字符串的内容,但在JS中,任何看似对string值的”修改”操作,实际都是创建新的string值。

var str = “abc”;

str[0]; // “a”

str[0] = “d”;

str; // 仍然是”abc”;赋值是无效的。没有任何办法修改字符串的内容

而对象就不一样了,对象是可变的。
var obj = {x : 1};

obj.x = 100;

var o = obj;

o.x = 1;

obj.x; // 1, 被修改

o = true;

obj.x; // 1, 不会因o = true改变

这里定义变量obj,值是object,然后设置obj.x属性的值为100。而后定义另一个变量o,值仍然是这个object对象,此时obj和o两个变量的值指向同一个对象(共享同一个对象的引用)。所以修改对象的内容,对obj和o都有影响。但对象并非按引用传递,通过o = true修改了o的值,不会影响obj。
Javascript 相关文章推荐
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
简介JavaScript中search()方法的使用
Jun 06 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
js多个物体运动功能实例分析
Dec 20 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
vue+axios 前端实现的常用拦截的代码示例
Aug 23 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
Vue触发式全局组件构建的方法
Nov 28 Javascript
vue 父组件中调用子组件函数的方法
Jun 06 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
javascript结合fileReader 实现上传图片
Jan 30 #Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 #Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 #Javascript
项目中常用的JS方法整理
Jan 30 #Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 #Javascript
jquery实现拖拽调整Div大小
Jan 30 #Javascript
jQuery中$.click()无效问题分析
Jan 29 #Javascript
You might like
php你的验证码安全码?
2007/01/02 PHP
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
Python 判断奇数偶数的方法
2018/12/20 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
python__name__原理及用法详解
2019/11/02 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
Python面向对象实现方法总结
2020/08/12 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
交通安全演讲稿
2014/01/07 职场文书
新浪微博实习心得体会
2014/01/27 职场文书
体育节口号
2014/06/19 职场文书
老人节主持词
2015/07/04 职场文书
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技