JavaScript中的函数申明、函数表达式、箭头函数


Posted in Javascript onDecember 06, 2019

JavaScript中的函数可以通过几种方式创建,如下。

// 函数声明
function getName() {
return 'Michael'
}
// 函数表达式
const getName = function() {

return 'Michael'
}
// 箭头函数(同样也是表达式)
const getName = () => {

return 'Michael'
}

函数声明和表达式之间的差别是

JavaScript 解释器中存在一种变量声明被提升的机制,也就是说函数声明会被提升到作用域的最前面,即使写代码的时候是写在最后面,也还是会被提升至最前面。而用函数表达式创建的函数是在运行时进行赋值,且要等到表达式赋值完成后才能调用

看一个例子

getName()//oaoafly
var getName = function() {
console.log('wscat')
}
getName()//wscat
function getName() {

console.log('oaoafly')
}
getName()//wscat

上面的问题可以分解成两个简单的问题,有助于你更清楚的看出函数声明和表达式之间的区别

var getName;
console.log(getName)//undefined
getName()//Uncaught TypeError: getName is not a function
var getName = function() {
console.log('wscat')
}

var getName;
console.log(getName)//function getName() {console.log('oaoafly')}
getName()//oaoafly
function getName() {

console.log('oaoafly')
}

这个区别看似微不足道,但在某些情况下确实是一个难以察觉并且“致命“的陷阱。出现这个陷阱的本质原因体现在这两种类型在函数提升和运行时机(解析时/运行时)上的差异。

箭头函数

箭头函数是语法和函数表达式比起来稍有不同的函数表达式。在上面的示例中,你可以看到箭头函数看起来像函数表达式,但没有单词function,然后在括号和大括号之间带有粗箭头=>。

你可能听说过,在JavaScript中,函数会创建自己的作用域。这意味着JavaScript函数会创建自己的上下文this,如果我们需要一个函数但是这个函数却没有自己的上下this,那么就可能会遇到问题。箭头函数的特征之一是它们不创建上下文,因此箭头函数的内部this与外部的this相同。

箭头函数也可以很小巧。查看下面两个完全相同的示例:

const getName = () => {
return 'Michael'
}
// 和上面的相同,但是更小巧
const getName = () => 'Michael'

当箭头函数忽略其大括号时,表示我们希望粗箭头右侧的内容为返回值(不用加return)。这称为隐式返回值。关于箭头函数,还有一些更细微的细节需要了解,例如如何返回对象以及如何省略单个参数的括号。

// 箭头函数直接返回对象
const getStudent = () => ({ name: 'Michael', age: 18, });
 
// 省略单个参数的括号
const addOne = (n) => n+1;
const addOne = n => n+1;

总结

以上所述是小编给大家介绍的JavaScript中的函数申明、函数表达式、箭头函数,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js cookies实现简单统计访问次数
Nov 24 Javascript
JQuery从头学起第二讲
Jul 04 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
一次让你了解全部JavaScript的作用域
Jun 24 Javascript
javascript实现弹幕墙效果
Nov 28 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
前端监听websocket消息并实时弹出(实例代码)
Nov 27 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 #Javascript
微信小程序实现滚动加载更多的代码
Dec 06 #Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 #Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 #Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 #Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 #Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 #Javascript
You might like
地摊中国 - 珍藏老照片
2020/08/18 杂记
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
phpfpm的作用和用法
2019/10/10 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
python实现网页链接提取的方法分享
2014/02/25 Python
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
python随机取list中的元素方法
2018/04/08 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
python3实现基于用户的协同过滤
2018/05/31 Python
python如何实现一个刷网页小程序
2018/11/27 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
企业安全生产承诺书
2014/05/22 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
中学生学习保证书
2015/02/26 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
浅谈python中的多态
2021/06/15 Python
Oracle表空间与权限的深入讲解
2021/11/17 Oracle