js学习之函数的参数传递
我们都知道在 ECMAScript 中,数据类型分为原始类型(又称值类型/基本类型)和引用类型(又称对象类型);这里我将按照这两种类型分别对函数进行传参,看一下到底发生了什么。
参数的理解
首先,我们要对函数的参数有一个了解:
形参就是函数内部定义的局部变量;
实参向形参传递值的时候,就是一个赋值操作,把实参的值直接复制一份给形参。
原始类型参数传递
示例1
var a = 1;
function f(b) {
a = 3;
}
f(a);
console.info(a); // 3
示例1中的代码比较简单,解析如下:
- 首先,我们定义了一个变量
a
,给它赋值为1
;又定义了一个函数f
,函数f
的形参是b
(此时,相当于在函数f
里定义了一个变量var b
; 它的值现在是undefined
); - 调用函数
f(a)
把a
作为实参传入。这里可以理解为,给b
进行了一次赋值操作b = 1
; - 接下来继续执行代码
a = 3
;注意:在函数体里边,出现了一个变量a
,但是它没有用var
关键字定义,所以,它是一个全局作用域的变量,不是这个函数的局部变量,而在一开始,我们就定义了这样一个变量a
,所以在这里就是对之前的a
进行的又一次赋值操作,把a
从之前的1
变成了3
; - 执行完
f(a)
之后,把全局变量a
的值改变了,所以,当我们输出a
查看它的值时,就得到了3
,而对于函数的形参b
根本没有进行任何操作而已。
示例2
var a = 1;
function f(a) {
a = 3;
}
f(a);
console.info(a); // 1
解析:
示例2与示例1的区别,从表面上看,就是形参 b
变成了 a
。但是,这样的变化结果就是,对于函数 f
来说,参数起到了作用,当我们对函数 f
进行传参操作的时候,我们传入的实参在函数内部就会得到引用。
相比较示例1的第一步,函数 f
内部定义了一个变量 a
它的值是 undefined
,注意:在未执行函数的时候,只是进行了预解析,代码没有执行,在调用函数的时候才会开始执行代码。
执行 f(a)
后,就是传入实参 1
,函数内部的变量 a
赋值为 1
,然后再进行 a = 3
的操作 ,此时,在函数的局部作用域的栈内存中有一个变量 a
它的值是 3
;而在全局作用域的栈内存中,也存在一个变量 a
,它的值是 1
,这两个变量是两个不同的变量,只是它们的名字都是 a
而已。
过程如图:
示例3
var a = 1;
function f(b) {
a = 3;
b = 10;
}
f(a);
console.info(a); // 3
console.info(b); // 报错
解析:
下面我们再来看一下示例3,先看变量 a
,完全和示例1一样,这里就不再详细说明了;再看变量 b
,其实也是和示例2没任何不一样的地方的,只是在这里把形参的名字改变了一下而已,在最后我们输出 a
的时候,没有任何问题,结果是 3
,但是,访问变量 b
的时候,输出会报错,这里涉及到的就是作用域问题了:在函数内部定义的变量,在函数内部可以访问,而在函数的外部是无法访问的。
具体过程可看下图:
示例4
var a = 1;
function f(a) {
a = 3;
b = 10;
}
f(a);
console.info(a); // 1
console.info(b); // 10
解析:
综合前三个示例,示例4我想大家都应该没有什么问题了,我们直接来看图吧:
引用类型参数传递
下面我们再来两个引用类型参数的示例;以下示例仅为说明引用类型传参之后,函数内部的赋值变化,所以用的都是简单数组进行说明。
其实,引用类型参数的传递需要考虑的就是引用类型和原始类型之间的区别:
- 引用类型在预解析时候,和原始类型一样都会在栈区里分配到空间,生成变量;但是赋值的时候,原始类型的赋值依然保存在栈内存当中,而引用类型就会在堆内存里占用一定空间存放它的数据,而在栈区里生成一个指向堆区的地址。
- 对变量进行复制的时候,原始类型的复制是在栈内存当中生成一份一样的数据,可以理解为“完全复制”;而引用类型的复制,只是在栈内存中进行复制,两个变量的地址同时指向堆内存中的那一份数据。
示例5
var a = [1];
function f(a){
a[100] = 3;
}
f(a);
console.info(a); // [1,100:3]
解析:
第一步:全局栈区中生成变量 a
,赋值后,在全局堆区里生成数组 [1]
;
第二步:传参,调用 f(a)
,首先在函数栈区中生成变量 a
,此时值为 undefined
,然后把全局变量 a
的值赋给局部函数里的变量 a
,因为是引用类型的数组,所以,函数里的 a
在栈区里也生成一个指向全局堆里的相同 地址1
;
第三步:执行函数里的代码 a[100] = 3
,找到函数栈中的 a
,再对它进行赋值,改变了全局堆中的 [1]
,得到了一个新的数组 [1,100:3]
;
第四步:访问全局作用域中的变量 a
,得到指向堆内存中的数组 [1,100:3]
。
示例6
var a = [1];
function f(b){
b[100] = 3;
b = [1,2,3];
console.info(b); // [1,2,3]
}
f(a);
console.info(a); // [1,100:3]
解析:
该示例的关键点在第四步,执行到代码 b = [1,2,3]
的时候,会对函数里面的变量 b
重新进行一次赋值,这样会在函数的堆内存中生成一个新的 数组,全局的 a
和函数中的 b
的指向地址就不一样了,所以,它俩的输出就不一样了。
总结
在 js 中,原始类型是按值传递的;引用类型是按共享传递的。
按值传递 - call by value
一个外部变量传递给一个函数时,函数实参获取到的实际上是这个外部变量的副本,在函数内部我们对实参进行的修改并不会反应到这个外部变量上。
按引用传递 - call by reference
一个外部变量传递给一个函数时,函数实参实际上是这个外部变量的一个引用,我们在函数内部对这个实参的任何修改,都会反应到这个外部变量。
按共享传递 - call by sharing
js学习之函数的参数传递的更多相关文章
- js学习之函数表达式及闭包
来自<javascript高级程序设计 第三版:作者Nicholas C. Zakas>的学习笔记(七) 直接切入主题~ 定义函数的方式有两种: 函数声明 function functio ...
- js学习之函数声明与函数表达式区别[原创]
作为一名js初学者,与大家分享下.Javascript中有函数声明提升的功能,会优先编译函数声明部分.比如, ff(); function ff(){ alert("hello world. ...
- js学习之函数
1/.js中函数就是对象. 2/以表达式方式定义的函数一般不要函数名以使代码紧凑. 3/js中函数声明的方式会被默认提到外部脚本或最前面,所以在其定义前的代码也可调用. 然而以表达式方式的则不行. 4 ...
- js学习笔记 -- 函数
js函数有类似javaMethod用法 Math.max.apply( Math.max.call( Array map,reduce,filter,sort , , , , , , , , ]; v ...
- JS学习之函数内部属性和方法
知识点:arguments和this对象.caller属性.apply()和call()方法 arguments对象:函数内部对象,传入函数中所有参数的集合,类数组对象 属性:callee 指 ...
- js学习-自定义函数、对象的字面量、json对象学习小结
一.自定义对象的构造: var student=new Object(); //object是顶级对象,使用构造函数的方法创建一个对象,此处的意思是创建了一个学生的空对象 student.name=& ...
- js学习:函数
概述 函数的声明 JavaScript 有三种声明函数的方法 function 命令 function命令声明的代码区块,就是一个函数.function命令后面是函数名,函数名后面是一对圆括号,里面是 ...
- node.js学习(2)函数
1 简答函数 2 匿名函数 3 回调函数
- JS学习之函数的属性和方法
随机推荐
- 【AR实验室】OpenGL ES绘制相机(OpenGL ES 1.0版本)
0x00 - 前言 之前做一些移动端的AR应用以及目前看到的一些AR应用,基本上都是这样一个套路:手机背景显示现实场景,然后在该背景上进行图形学绘制.至于图形学绘制时,相机外参的解算使用的是V-SLA ...
- Http状态码之:301、302重定向
概念 301 Moved Permanently 被请求的资源已永久移动到新位置,并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一.如果可能,拥有链接编辑功能的客户端应当自动把请求的地 ...
- Windows 7上执行Cake 报错原因是Powershell 版本问题
在Windows 7 SP1 电脑上执行Cake的的例子 http://cakebuild.net/docs/tutorials/getting-started ,运行./Build.ps1 报下面的 ...
- 来,给Entity Framework热热身
先来看一下Entity Framework缓慢的初始化速度给我们更新程序带来的一种痛苦. 我们手动更新程序时通常的操作步骤如下: 1)把Web服务器从负载均衡中摘下来 2)更新程序 3)预热(发出一个 ...
- C语言 · 时间转换
问题描述 给定一个以秒为单位的时间t,要求用"<H>:<M>:<S>"的格式来表示这个时间.<H>表示时间,<M>表示分 ...
- Java初始化过程
这篇文章主要讲解Java在创建对象的时候,初始化的顺序.主要从以下几个例子中讲解: 继承关系中初始化顺序 初始化块与构造器的顺序 已经加载过的类的初始化顺序 加载父类,会不会加载子类 创建子类对象会不 ...
- iOS开发之多种Cell高度自适应实现方案的UI流畅度分析
本篇博客的主题是关于UI操作流畅度优化的一篇博客,我们以TableView中填充多个根据内容自适应高度的Cell来作为本篇博客的使用场景.当然Cell高度的自适应网上的解决方案是铺天盖地呢,今天我们的 ...
- 初步认识TDD
TDD,测试驱动开发(Test Driven Development)是极限编程中倡导的程序开发方法,以其倡导先写测试程序,然后编码实现其功能得名.本文将对TDD有一个较为系统的认识. 基础属性 ...
- SDWebImage源码解读 之 NSData+ImageContentType
第一篇 前言 从今天开始,我将开启一段源码解读的旅途了.在这里先暂时不透露具体解读的源码到底是哪些?因为也可能随着解读的进行会更改计划.但能够肯定的是,这一系列之中肯定会有Swift版本的代码. 说说 ...
- 年度巨献-WPF项目开发过程中WPF小知识点汇总(原创+摘抄)
WPF中Style的使用 Styel在英文中解释为”样式“,在Web开发中,css为层叠样式表,自从.net3.0推出WPF以来,WPF也有样式一说,通过设置样式,使其WPF控件外观更加美化同时减少了 ...