JS中函数声明与函数表达式的异同
时间:2022-05-08
本文章向大家介绍JS中函数声明与函数表达式的异同,主要内容包括相同点、不同点、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
相同点
注:函数声明和函数表达式的相同点包括但不限于以下几点
- 函数是一个值,所以和其他值一样,函数也可以进行被输出、被赋值、作为参数传给其他函数等相关操作,不管函数是以什么方式被定义的,当然和其他值的输出还是有些区别的。 我们先来输出这个值:
function nameAlert(name){
alert('博主的名字是:' + name + ' 。');
}
alert(nameAlert);
注意输出的结果并不是1,而是这个函数的整个源代码,即输出结果为:
function nameAlert(name){
alert('博主的名字是:' + name + ' 。');
}
- 作为参数传给其他函数。
该例子中将函数
nameAlert
作为参数传给了anotherNameAlert
,然后anotherNameAlert
也指向了该函数。 这里就涉及到了函数的传递,函数的传递是传引用,就是说函数存在内存中的某个位置,nameAlert
和anotherNameAlert
是都是函数的一个引用,把函数名nameAlert
赋值给anotherNameAlert
的时候,它们引用的都是同一个函数。 所以anotherNameAlert
的输出结果为: 博主的名字是:myvin 。
function nameAlert(name){
alert('博主的名字是:' + name + ' 。');
}
var anotherNameAlert=nameAlert;
anotherNameAlert('myvin');
当然函数还有其他特点,在此不再介绍,感兴趣的可以自己总结下。
不同点
注:函数声明和函数表达式的不同点包括但不限于以下几点
相对函数声明和函数表达式之间的相同点,它们的不同点更应该值得我们关注。下面我结合自己的理解聊聊。
- 函数声明必须有标识符,也就是常说的函数名;函数表达式可以省略函数名。
关于它们的定义的不同小伙伴们应该都知道,我们简单重复一遍。
如下:
函数声明(要带标识符)
函数表达式
- 省略标识符:
var variable=function(arg1, arg2, ...){ <!-- function body --> }
- 带有标识符:
var variable=function functionName(arg1, arg2, ...){ <!-- function body --> }
function functionName(arg1, arg2, ...){
<!-- function body -->
}
- 函数声明会提前 函数声明是在预执行期执行的,就是说函数声明是在浏览器准备执行代码的时候执行的。因为函数声明在预执行期被执行,所以到了执行期,函数声明就不再执行(人家都执行过了自然就不再执行了)。 例子的话还是前文的说真话函数: 即函数声明的话sayTruth()可以提前调用,就是不请自来的那种,而函数表达式是什么时候遇到什么时候执行。 函数声明提前是它们很大的一个不同点,理解这一点对于我们函数的应用有很大帮助,能使我们避免一些错误。
sayTruth();<!-- 函数声明 -->
function sayTruth(){
alert('myvin is handsome.');
}
sayTruth();<!-- 函数表达式 -->
var sayTruth=function(){
alert('myvin is handsome.');
}
- ECMAScript规范中表示,函数声明语句可以出现在全局代码中,或者内嵌在其他函数中,但是不能出现在循环、条件判、或者try/finally以及with语句中。
对于这条,可能会有所疑问:“上文不是有一个函数声明出现在if循环中的么”。的确是这样,但是规定下发了,遵守不遵守就是另一回事了。JavaScript对于这条规范的实现并不是严格遵守的,FF中允许if中出现函数声明。
但不管规范怎么样,造成这样的原因还是函数声明提前。
还是引用上文的例子和说明:
为什么呢?当然是声明提前了。因为函数声明提前,所以函数声明会在代码执行前进行解析,执行顺序是这样的,先解析
function sayTruth(){alert('myvin is handsome')}
,在解析function sayTruth(){alert('myvin is ugly')}
,覆盖了前面的函数声明,当我们调用sayTruth()
函数的时候,也就是到了代码执行期间,声明会被忽略,所以自然会输出myvin is ugly
。
sayTruth();
if(1){
function sayTruth(){alert('myvin is handsome')};
}
else{
function sayTruth(){alert('myvin is ugly')};
}
- 可以创建一个函数表达式即刻执行。 这样可以使得全局变量不受局部变量的影响,保持全局的干净。注意,括号里面的是表达式。
(function(){
alert('博主的名字是:myvin 。');
})()
事实上,js的解析器对函数声明与函数表达式并不是一视同仁地对待的。对于函数声明,js解析器会优先读取,确保在所有代码执行之前声明已经被解析,而函数表达式,如同定义其它基本类型的变量一样,只在执行到某一句时也会对其进行解析,所以在实际中,它们还是会有差异的,具体表现在,当使用函数声明的形式来定义函数时,可将调用语句写在函数声明之前,而后者,这样做的话会报错。
参考链接:http://www.cnblogs.com/myvin/p/4649789.html
http://blog.csdn.net/one_and_only4711/article/details/6361131
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- pip安装问题记录
- Win10 下 SQL Server 安装教程(排坑版)
- Linux指令入门-文本处理
- 修改Mirages主题文章布局
- Python爬虫:Scrapy 框架快速入门及实战演练
- yum解决安装软件包缓慢问题
- Linux指令入门-文件与权限
- java.lang.NoSuchMethodError: org.apache.log4j.Logger.isTraceEnabled()Z
- RabbitMQ五种模型
- IDEA 无法识别 Nodejs 包中的关键字
- K8S问题记录
- Linux指令入门-系统管理
- 从零开始重新认识 MyBatis
- SpringCloud-Bus消息总线
- SpringCloud-Config配置中心