在看《JavaScript高级程序设计》(第三版)的时候,传递参数这一节,里面提到

ECMAScript中所有函数的参数都是按值传递的

它自己的解释是,

把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样。

基本类型值的传递如同基本类型变量的复制一样,

而引用类型值的传递,则如同引用类型变量的复制一样。

我们先明白几个概念,之后再讨论。

数据类型

基本数据类型,有6种,Undefined、Null、Boolean、Number、String、Symbol

引用类型,Object、Array、Date、RegExg、Function等

数据类型介绍,可以参考JavaScript数据类型的非常6+1

内存空间

var a = 2
var b = 'abc'
var c = true
var d = {value : 1}
var e = [1, 2, 3]

定义的以上几个变量,在内存中,所占用的空间如图示意:

基础数据类型值,在栈中存储实际的值。引用数据类型值,在栈中存储引用地址值,在堆中存储实际的值。

赋值拷贝/复制

基础数据类型,赋值拷贝,拷贝实际值


var a = 1 var b = a b = 2 console.log(a) // 1

引用类型,赋值拷贝,拷贝引用地址,浅拷贝。可以参考javascript中的浅拷贝ShallowCopy与深拷贝DeepCopy


var a = {value : 1} var b = a b.value = 2 console.log(a.value) // 2

举例分析

明白了以上几个概念,我们再来说说,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样。也就是一个赋值复制过程。我们举几个例子分析下。

1. 传递基础类型,函数中不修改参数类型


var a = 1 function func(o) { o = 2 console.log(o) } func(a) // 2 console.log(a) // 1

这里的func函数,传递了一个参数o,而参数实际上是函数的局部变量。那么,我们就可以修改函数


var a = 1 function func() { var o = a // 函数内部的参数变量,赋值函数外部的值 o = 2 // 修改内部变量的值 console.log(o) } func(a) // 2 console.log(a) // 1

可以得到相同的结果。他们在内存中的变化,如图示意:

从以上图中,我们能清楚的看出,变量a一直等于1,而变量o,由于赋值之后,复制了a的实际值,在内存中开辟了空间,存储在栈中。再执行func函数,修改变量o的值,只会影响其自身。

2. 传递基础类型,函数中修改类型


var a = 1 function func(o) { o = {value : 1} console.log(o) }
func(a) // {value: 1} console.log(a) // 1

同理,我们也可以修改这里的函数


var a = 1 function func() { var o = a // 函数内部的参数变量,赋值函数外部的值 o = {value : 1} // 修改内部变量的值 console.log(o) // {value: 1} }
func() // {value: 1} console.log(a) // 1

内存中的变化示意图:

从以上图中,我们能清楚的看出,变量a一直等于1,而变量o,由于内部参数赋值之后,复制了a的实际值,在内存中开辟了空间,存储在栈中。再执行func函数,修改变量o的值,只会影响其自身。

3. 传递引用类型,函数中不修改类型


var a = { value : 1 } function func(o) { o.value = 2 console.log(o) } func(a) // { value : 2} console.log(a) // {value : 2}

同理,我们也可以修改这里的函数


var a = { value : 1 } function func() { var o = a // 函数内部的参数变量,赋值函数外部的值 o.value = 2 // 修改内部变量的值 console.log(o) // {value: 2} }
func() // {value: 2} console.log(a) // {value: 2}

内存中的变化示意图:

从以上图中,我们能清楚的看出,由于变量a是引用类型,通过函数内部参数的赋值复制,传递了引用地址值,那么变量ao会指向同一个内存对象。再执行func函数,修改变量o在堆内存中的值,并没有修改在栈中的引用地址的值。这样,由于变量o和变量a使用的是同一个引用地址,也就是同一个堆内存中的值,那么变量a的值,也就会随着变量o的变化而变化了。

4. 传递引用类型,函数中修改类型


var a = {value : 1 } function func(o) { o = 2 console.log(o) } func(a) // 2 console.log(a) // { value : 1}

接下来,我们也可以修改这里的函数


var a = { value : 1 } function func() { var o = a // 函数内部的参数变量,赋值函数外部的值 o = 2 // 修改内部变量的值 console.log(o) // 2 }
func() // 2 console.log(a) // {value: 1}

内存中的变化示意图:

由于变量a是引用类型,通过函数内部参数的赋值复制,传递了引用地址值,那么变量ao会指向同一个内存对象。再执行func函数时,改变了变量o的数据类型,变成了基础数据类型,也就切断了引用。这样,变量ao就没有关系了。

总结

JavaScript中所有函数参数都是按值传递的。基本类型值,传递的是实际值,引用类型,传递的是引用地址值。

参考

JavaScript深入之参数按值传递

内存空间详解

javascript中所有函数参数都是按值传递的更多相关文章

  1. JavaScript中Function函数与Object对象的关系

    函数对象和其他内部对象的关系 除了函数对象,还有很多内部对象,比如:Object.Array.Date.RegExp.Math.Error.这些名称实际上表示一个 类型,可以通过new操作符返回一个对 ...

  2. Javascript中的函数(Function)与对象(Object)的关系

    今天我们来尝试理解Function和Object.因为这个里面有些人前期可能会搞糊涂.他们之间到底是什么关系.当然也不除外当初的我. 注意:官方定义: 在Javascript中,每一个函数实际上都是一 ...

  3. javascript中所有函数的参数都是按值传递的

    [javascript中所有函数的参数都是按值传递的] 参考:http://www.jb51.net/article/89297.htm

  4. 《JavaScript高级程序设计》读书笔记--ECMAScript中所有函数的参数都是按值传递的

    ECMAScript中所有函数的参数都是按值传递的.也就是说把函数外部的值复制给函数内部的参数(内部参数的值的修改不影响实参的值). 基本类型变量的复制: 基本类型变量的复制,仅仅是值复制,num1和 ...

  5. javascript中的所有内容都是一个对象:字符串、值、数组、函数…

    javascript中的所有内容都是一个对象:字符串.值.数组.函数…此外,javascript允许自定义对象.javascript对象JavaScript提供多个内置对象,如字符串.日期.数组等.对 ...

  6. JS对象 JavaScript 中的所有事物都是对象,如:字符串、数值、数组、函数等,每个对象带有属性和方法。

    什么是对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等: 对象的方法: ...

  7. JavaScript中Eval()函数的作用

    这一周感觉没什么写的,不过在研究dwz源码的时候有一个eval()的方法不是很了解,分享出来一起学习 -->首先来个最简单的理解 eval可以将字符串生成语句执行,和SQL的exec()类似. ...

  8. Javascript中的函数

    Javascript中的函数 1.什么是函数 函数是被命名的,独立的,完成特定功能的代码段.其可能给调用它的程序返回值,我们把这个代码段就称之为"函数". 被命名的:函数大部分都是 ...

  9. 浅析 JavaScript 中的 函数 currying 柯里化

    原文:浅析 JavaScript 中的 函数 currying 柯里化 何为Curry化/柯里化? curry化来源与数学家 Haskell Curry的名字 (编程语言 Haskell也是以他的名字 ...

随机推荐

  1. Codeforces Round #549 (Div. 2) 训练实录 (5/6)

    The Doors +0 找出输入的01数列里,0或者1先出完的的下标. Nirvana +3 输入n,求1到n的数字,哪个数逐位相乘的积最大,输出最大积. 思路是按位比较,从低到高,依次把小位换成全 ...

  2. 什么是SerDes,serializer/deserializer?

    序列化器与反序列化器(SerDes,serializer/deserializer)是一种进行串行数据和并行数据相互转换的收发集成电路(IC).发送器部分是一个串行到并行的转换器,接收器部分是一个并行 ...

  3. linux下实用的快速随机生成复杂密码

    linux下实用的快速随机生成复杂密码 [root@test.db-audit.1 ~]# </dev/urandom tr -dc '1234567890!@#$%abcdefghigklmn ...

  4. go语言的开始入门(一)

    前言:作为Web开发人员掌握多种后台是必须的,趁自己有C语言的基础,所以尝试入门Golang (一).基本数据类型的认识 小结:int大小默认与系统相关,byte只能够存单字节,   (二).Gola ...

  5. 计算机网络之JSONP跨域

    JSONP跨域实现原理 百度联想词跨域实现 一.JSONP跨域实现原理 1.Web页面使用<script>引入JS文件时不受同源策略的影响.准确的说,所有拥有src属性的标签都不受同源策略 ...

  6. DirectX11--深入理解与使用2D纹理资源

    前言 写教程到现在,我发现有关纹理资源的一些解说和应用都写的太过分散,导致连我自己找起来都不方便.现在决定把这部分的内容整合起来,尽可能做到一篇搞定所有2D纹理相关的内容,其中包括: DDSTextu ...

  7. python之路(4)高阶函数和python内置函数

    前言 函数式编程不用变量保存状态,不改变变量 内置函数 高阶函数 把函数当作参数传给另一个对象 返回值中包含函数 使用的场景演示: num_test = [1,2,10,5,8,7] 客户说 :对上述 ...

  8. JGUI源码:实现蒙版层显示(18)

    有的时候需要显示一个蒙版层,蒙版层显示的主要原理是在指定元素比如div上创建一个子元素div,设置absolute.宽高100%.设置z-index置于顶层,设置半透明效果,fadein,fadeou ...

  9. idea中pom.xml添加了新的maven依赖,点击import changes没反应

    打开file,setting. 选择Build,Execution,Deployment -> Build Tools -> Maven. 修改maven home directory为自 ...

  10. Contest2162 - 2019-3-28 高一noip基础知识点 测试5 题解版

    传送门 T1 单调栈 按照b排序 在家每一个物品时,判断一下a和b的关系 如果s[sta[top]].a>=s[i].b,就弹栈 记录所有时候的height,并取最大值 T2 单调栈裸题 单调栈 ...