JS是按值传递还是按引用传递


Posted in Javascript onJanuary 30, 2015

按值传递 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 相关文章推荐
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 Javascript
js漂浮广告实现代码
Aug 15 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 Javascript
原生JS生成指定位数的验证码
Oct 28 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 #Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 #Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 #Javascript
js实现屏幕自适应局部代码分享
Jan 30 #Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 #Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 #Javascript
javascript中sort()的用法实例分析
Jan 30 #Javascript
You might like
Apache2 httpd.conf 中文版
2006/11/17 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
php curl_init函数用法
2014/01/31 PHP
js 省地市级联选择
2010/02/07 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
javascript实现二叉树遍历的代码
2017/06/08 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
python实现C4.5决策树算法
2018/08/29 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
计划生育证明格式范本
2014/09/12 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
导游词之桂林山水
2019/09/20 职场文书
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
Python函数中apply、map、applymap的区别
2021/11/27 Python