函数声明?函数表达式?我该怎么选?!
栏目: JavaScript · 发布时间: 5年前
内容简介:我们在日常开发中经常使用函数,聪明的你肯定已经用的炉火纯青了。当你用一个名称创建函数时,这是一个函数声明。在函数表达式中可以省略该名称,使该函数“匿名”。
我们在日常开发中经常使用函数,聪明的你肯定已经用的炉火纯青了。 function doStuff(){}
和 ()=> {}
是我们整天输入的字符。但它们有何不同,为什么使用另一个呢?
*注:我们这里用的例子都是JavaScript
第一个不同:名称
当你用一个名称创建函数时,这是一个函数声明。在函数表达式中可以省略该名称,使该函数“匿名”。
函数声明:
function doStuff() {};
函数函数表达式:
const doStuff = function() {}
日常中我们经常使用ES6创建函数表达式
const doStuff = ()={}
第二个不同:提升
提升是指函数和变量的提升,变量声明和函数声明提升至当前作用域的顶端,然后进行接下来的处理。
函数声明会被提升但函数表达式不会。
我们可以通过例子来加深理解:
//函数声明 doStuff(); function doStuff() { console.log('haha')}; 复制代码
结果:
看出来没有任何问题。
看下一个例子
//函数表达式 doStuff(); const doStuff = () => {console.log('haha')}; 复制代码
看,这就报错了。
函数表达式实际解析的过程是这样的:
const doStuff; doStuff(); doStuff = () => {console.log('haha')}; 复制代码
注:函数声明提升的优先级比变量提升高。
使用函数表达式的情况:
通过上面两个例子,看起来函数声明在提升方面比函数表达式有用的多。但是在他们两个之间选择的时候应该如何抉择呢?
调用函数表达式可以避免污染全局环境,因为你不知道你的程序有多少不同的函数,如果你使用函数表达式可能就会覆盖了别人的函数,采用函数表达式,就会避免这些问题。
立即执行函数(IIFE)
IIFE - 立即调用函数表达式 - 就是字面意思。在创建函数后立即调用函数,使用IIFE,如下所示:
(function() => {})() //或者 (() => {})() 复制代码
回调(callback)
传递给另一个函数的函数通常在JavaScript中称为“回调”。,如下所示:
function mapAction(item) { // do stuff to an item } array.map(mapAction) 复制代码
这里的问题是mapAction可用于整个应用程序- 其实没有必要。如果该回调是一个函数表达式,它在函数外就不可用了:
array.map(item => { //do stuff to an item }) //或者 const mapAction = function(item) { // do stuff to an item } array.map(mapAction) 复制代码
虽然 mapAction
函数只有在他初始化之后才能使用
总结
简而言之,如果要在全局范围内创建函数并在整个代码中使用它,请使用函数声明。
使用函数表达式来限制函数的可用位置,保持全局环境的整洁干净。 ————————————————————————————————————————————————
放学别走!长按二维码关注 【技术人生路】,无偿免费获取前端学习进阶资料,培训实战视频,就业指导等众多福利哦。我相信我们都是爱学习爱进步的呀!
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 【译】函数声明 VS 函数表达式
- JavaScript(js)函数声明与函数表达式的区别
- 深入理解 lambda表达式 与 函数式编程 函数式接口源码解析(二)
- ECMAScript学习笔记(八)——函数表达式
- 函数式编程1-Lambda表达式
- Java 函数式编程(二)Lambda表达式
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。