脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript按值传递还是按引用传递

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

 更新时间：2015年01月30日 09:32:09   投稿：junjie  
这篇文章主要介绍了JavaScript中的值是按值传递还是按引用传递问题探讨,本文讲解了按值传递、按引用传递、按共享传递、基本类型的不可变(immutable)性质等内容,需要的朋友可以参考下

最近遇到个有趣的问题：“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。

您可能感兴趣的文章:

相关文章

  • 微信小程序canvas2d生成图形验证码的方法

    微信小程序canvas2d生成图形验证码的方法

    这篇文章主要为大家详细介绍了微信小程序canvas2d生成图形验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05
  • 微信小程序开发中Promise的使用(aysnc,await)及场景分析

    微信小程序开发中Promise的使用(aysnc,await)及场景分析

    在微信小程序开发中,错误使用Promise可能导致无法正确获取数据,本文分析了一个常见错误场景,即在异步函数中未使用await或.then()处理Promise,导致无法获取异步操作的返回结果,文章提供了使用await和链式调用.then()的解决方法,帮助开发者避免类似错误,确保数据正确返回
    2024-10-10
  • JavaScript 进度条实现代码(Firefox等相似浏览器下不支持)

    JavaScript 进度条实现代码(Firefox等相似浏览器下不支持)

    JavaScript实现的进度条，可惜在Firefox等相似浏览器下不支持(远程）
    2009-07-07
  • SWFObject 2.1以上版本语法介绍

    SWFObject 2.1以上版本语法介绍

    用SWFObject 插入flash，好处多多，代码简洁，不会出现微软的“单击此处以激活控件”的提示（据可靠消息，这个是微软惹的官司，其结果是害苦了用户）。
    2010-07-07
  • 禁止你的左键复制实用技巧

    禁止你的左键复制实用技巧

    左键复制对于所有人来说有好有坏，例如原创内容就不想被别人复制，接下来介绍一种方法，有需要的朋友可以参考下
    2013-01-01
  • 微信小程序四种弹窗方式实例

    微信小程序四种弹窗方式实例

    微信小程序弹窗是小程序在需要提示用户的时候,显示的一种交互形式,下面这篇文章主要给大家介绍了关于微信小程序四种弹窗方式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • JS实现图片放大镜效果的方法

    JS实现图片放大镜效果的方法

    这篇文章主要介绍了JS实现图片放大镜效果的方法,实例分析了magnifier.js插件的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • javascript中attachEvent用法实例分析

    javascript中attachEvent用法实例分析

    这篇文章主要介绍了javascript中attachEvent用法,实例分析了javascript中事件绑定的相关技巧,需要的朋友可以参考下
    2015-05-05
  • 微信小程序页面间跳转传参方式总结

    微信小程序页面间跳转传参方式总结

    这篇文章主要给大家总结介绍了关于微信小程序页面间跳转传参方式，文中通过示例代码介绍的非常详细，对大家学习或者使用小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-06-06
  • 详解JavaScript 中的 replace 方法

    详解JavaScript 中的 replace 方法

    这篇文章主要介绍了详解JavaScript 中的 replace 方法的相关资料,需要的朋友可以参考下
    2016-01-01

最新评论