深入理解JavaScript 参数按值传递

 更新时间:2017年05月24日 09:24:12   作者:冴羽  
本篇文章主要介绍了深入理解JavaScript 参数按值传递,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

定义
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加载速度慢的解决方案

    在网站里面会加载一些js代码,统计啊,百度广告等等,结果弄得页面加载速度很慢,下面有个不错的解决方法,大家可以参考下
    2014-03-03
  • 在多个页面使用同一个HTML片段的代码

    在多个页面使用同一个HTML片段的代码

    有一个比较复杂的HTML片段(A),如果把这个HTML片段嵌入到其他页面中(B,C,D....)。 问题的关键是在HTML片段中有大量的JavaScript逻辑需要处理,比如说分页,点击事件响应等。
    2011-03-03
  • Bootstrap Modal对话框如何在关闭时触发事件

    Bootstrap Modal对话框如何在关闭时触发事件

    这篇文章主要为大家详细介绍了Bootstrap Modal对话框如何在关闭时触发事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • javascript删除数组元素并且数组长度减小的简单实例

    javascript删除数组元素并且数组长度减小的简单实例

    本篇文章主要是对javascript删除数组元素并且数组长度减小的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • preact组件案例的使用详解

    preact组件案例的使用详解

    SelectValue是一个Preact组件,用于创建一个下拉选择框,它接收props如value、setfn、options和disabled,用于更新父组件中的值、处理下拉选择框的值改变事件、显示选项和禁用或启用下拉选择框,本文介绍preact组件案例的使用详解,感兴趣的朋友一起看看吧
    2025-03-03
  • 微信小程序 自定义弹窗实现过程(附代码)

    微信小程序 自定义弹窗实现过程(附代码)

    这篇文章主要介绍了微信小程序 自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • javascript  删除select中的所有option的实例

    javascript 删除select中的所有option的实例

    这篇文章主要介绍了javascript 删除select中的所有option的实例的相关资料,希望通过本文能帮助到大家实现这样的功能,需要的朋友可以参考下
    2017-09-09
  • 通过学习bootstrop导航条学会修改bootstrop颜色基调

    通过学习bootstrop导航条学会修改bootstrop颜色基调

    这篇文章主要介绍了通过学习bootstrop导航条学会修改bootstrop颜色基调,需要的朋友可以参考下
    2017-06-06
  • Canvas实现动态的雪花效果

    Canvas实现动态的雪花效果

    本文主要分享Canvas实现动态的雪花效果的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • js实现带缓冲效果的仿QQ面板折叠菜单代码

    js实现带缓冲效果的仿QQ面板折叠菜单代码

    这篇文章主要介绍了js实现带缓冲效果的仿QQ面板折叠菜单代码,通过JavaScript定时函数递归调用实现折叠菜单的缓冲效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09

最新评论