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 相关文章推荐
javascript 函数参数限制说明
Nov 19 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 Javascript
Safari5中alert的无限循环BUG
Apr 07 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
删除Javascript Object中间的key
Nov 18 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
JS排序之选择排序详解
Apr 08 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 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
PHP 和 MySQL 基础教程(三)
2006/10/09 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
js 实现 input type="file" 文件上传示例代码
2013/08/07 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
Python贪心算法实例小结
2018/04/22 Python
Python list与NumPy array 区分详解
2019/11/06 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
聊聊python中的循环遍历
2020/09/07 Python
学校万圣节活动方案
2014/02/13 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
我的中国心演讲稿
2014/09/04 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
Vue3中的Refs和Ref详情
2021/11/11 Vue.js
用Python可视化新冠疫情数据
2022/01/18 Python
Python使用永中文档转换服务
2022/05/06 Python
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS
使用CSS实现音波加载效果
2023/05/07 HTML / CSS