JS中函数声明与函数表达式的异同

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
云解析DNS,个人版 1个月
简介:

相同点

注:函数声明和函数表达式的相同点包括但不限于以下几点

  1. 函数是一个值,所以和其他值一样,函数也可以进行被输出、被赋值、作为参数传给其他函数等相关操作,不管函数是以什么方式被定义的,当然和其他值的输出还是有些区别的。

    我们先来输出这个值:

    function nameAlert(name){
        alert('博主的名字是:' + name + ' 。');
    }
    alert(nameAlert);
    注意输出的结果并不是1,而是这个函数的整个源代码,即输出结果为:function nameAlert(name){
        alert('博主的名字是:' + name + ' 。');
    }
  2. 作为参数传给其他函数。

    function nameAlert(name){
        alert('博主的名字是:' + name + ' 。');
    }var anotherNameAlert=nameAlert;
    anotherNameAlert('myvin');

    该例子中将函数nameAlert作为参数传给了anotherNameAlert,然后anotherNameAlert也指向了该函数。

    这里就涉及到了函数的传递,函数的传递是传引用,就是说函数存在内存中的某个位置,nameAlertanotherNameAlert是都是函数的一个引用,把函数名nameAlert赋值给anotherNameAlert的时候,它们引用的都是同一个函数。

    所以anotherNameAlert的输出结果为:

    博主的名字是:myvin 。

当然函数还有其他特点,在此不再介绍,感兴趣的可以自己总结下。

不同点

注:函数声明和函数表达式的不同点包括但不限于以下几点

相对函数声明和函数表达式之间的相同点,它们的不同点更应该值得我们关注。下面我结合自己的理解聊聊。

  1. 函数声明必须有标识符,也就是常说的函数名;函数表达式可以省略函数名。

    关于它们的定义的不同小伙伴们应该都知道,我们简单重复一遍。

    如下:

    函数声明(要带标识符)

    function functionName(arg1, arg2, ...){    <!-- function body -->}

    函数表达式

  • 省略标识符

    var  variable=function(arg1, arg2, ...){        <!-- function body -->}
  • 带有标识符

    var  variable=function functionName(arg1, arg2, ...){        <!-- function body -->}
函数声明会提前函数声明是在预执行期执行的,就是说函数声明是在浏览器准备执行代码的时候执行的。因为函数声明在预执行期被执行,所以到了执行期,函数声明就不再执行(人家都执行过了自然就不再执行了)。例子的话还是前文的说真话函数:sayTruth();<!-- 函数声明 -->function sayTruth(){     alert('myvin is handsome.'); } sayTruth();<!-- 函数表达式 -->var sayTruth=function(){     alert('myvin is handsome.'); }即函数声明的话sayTruth()可以提前调用,就是不请自来的那种,而函数表达式是什么时候遇到什么时候执行。函数声明提前是它们很大的一个不同点,理解这一点对于我们函数的应用有很大帮助,能使我们避免一些错误。ECMAScript规范中表示,函数声明语句可以出现在全局代码中,或者内嵌在其他函数中,但是不能出现在循环、条件判、或者try/finally以及with语句中。对于这条,可能会有所疑问:“上文不是有一个函数声明出现在if循环中的么”。的确是这样,但是规定下发了,遵守不遵守就是另一回事了。JavaScript对于这条规范的实现并不是严格遵守的,FF中允许if中出现函数声明。但不管规范怎么样,造成这样的原因还是函数声明提前。还是引用上文的例子和说明:sayTruth();  if(1){function sayTruth(){alert('myvin is handsome')}; }else{function sayTruth(){alert('myvin is ugly')}; }为什么呢?当然是声明提前了。因为函数声明提前,所以函数声明会在代码执行前进行解析,执行顺序是这样的,先解析function sayTruth(){alert('myvin is handsome')},在解析function sayTruth(){alert('myvin is ugly')},覆盖了前面的函数声明,当我们调用sayTruth()函数的时候,也就是到了代码执行期间,声明会被忽略,所以自然会输出myvin is ugly。可以创建一个函数表达式即刻执行。(function(){ alert('博主的名字是:myvin 。'); })()这样可以使得全局变量不受局部变量的影响,保持全局的干净。注意,括号里面的是表达式。

事实上,js的解析器对函数声明与函数表达式并不是一视同仁地对待的。对于函数声明,js解析器会优先读取,确保在所有代码执行之前声明已经被解析,而函数表达式,如同定义其它基本类型的变量一样,只在执行到某一句时也会对其进行解析,所以在实际中,它们还是会有差异的,具体表现在,当使用函数声明的形式来定义函数时,可将调用语句写在函数声明之前,而后者,这样做的话会报错。



本文转自 蓓蕾心晴 51CTO博客,原文链接:http://blog.51cto.com/beileixinqing/1903540,如需转载请自行联系原作者

相关文章
|
2月前
|
JavaScript 前端开发 开发者
JavaScript中setInterval与setTimeout的异同及使用
【4月更文挑战第22天】JavaScript的`setInterval`和`setTimeout`都用于定时执行任务,但有区别。`setInterval`会按指定间隔反复执行,直到被`clearInterval`停止,可能导致函数堆积;`setTimeout`只执行一次,延迟后执行,适合递归调用来模拟间隔。选择使用时要考虑任务的重复性、执行依赖及可能的性能影响。
|
24天前
|
JavaScript 前端开发 开发者
JavaScript的变量提升是一种编译阶段的行为,它将`var`声明的变量和函数声明移至作用域顶部。
【6月更文挑战第27天】JavaScript的变量提升是一种编译阶段的行为,它将`var`声明的变量和函数声明移至作用域顶部。变量默认值为`undefined`,函数则整体提升。`let`和`const`不在提升范围内,存在暂时性死区。现代实践推荐明确声明位置以减少误解。
23 2
|
2月前
|
Web App开发 JavaScript 前端开发
浏览器与Node.js事件循环:异同点及工作原理
浏览器与Node.js事件循环:异同点及工作原理
|
26天前
|
JavaScript 前端开发
JavaScript中的变量提升(Hoisting)将`var`声明和函数声明提前到作用域顶部,允许在声明前使用
【6月更文挑战第25天】JavaScript中的变量提升(Hoisting)将`var`声明和函数声明提前到作用域顶部,允许在声明前使用。`let`和`const`不完全提升,存在暂时性死区(TDZ),尝试在初始化前访问会出错。函数声明会被提升,但函数表达式不会。
19 3
|
1月前
|
设计模式 自然语言处理 JavaScript
JavaScript进阶-函数表达式与闭包
【6月更文挑战第18天】JavaScript函数不仅是代码块,还是值,具备函数表达式和闭包等特性。函数表达式如匿名函数,可赋值、传参,但不提升,过度使用影响可读性。闭包允许访问外部作用域,即使父函数已结束,但不当使用可能导致内存泄漏。理解并妥善处理这些问题,如命名函数表达式、及时释放引用,能提升代码质量。通过实践深化对这些关键概念的理解至关重要。
|
26天前
|
存储 JavaScript 前端开发
JavaScript——JavaScript基础:数组 | JavaScript函数:使用、作用域、函数表达式、预解析
在JavaScript中,内嵌函数可以访问定义在外层函数中的所有变量和函数,并包括其外层函数能访问的所有变量和函数。①全局变量:不在任何函数内声明的变量(显式定义)或在函数内省略var声明的变量(隐式定义)都称为全局变量,它在同一个页面文件中的所有脚本内都可以使用。函数表达式与函数声明的定义方式几乎相同,不同的是函数表达式的定义必须在调用前,而函数声明的方式则不限制声明与调用的顺序。③块级变量:ES 6提供的let关键字声明的变量称为块级变量,仅在“{}”中间有效,如if、for或while语句等。
36 0
|
2月前
|
自然语言处理 JavaScript 前端开发
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(下)
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(下)
|
2月前
|
JavaScript 前端开发
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(上)
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(上)
|
2月前
|
JavaScript 前端开发
javascript函数表达式
javascript函数表达式
|
2月前
|
JavaScript 前端开发 IDE
JavaScript与TypeScript:核心异同点解析
JavaScript与TypeScript:核心异同点解析
39 0