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 私有成员分析
Jan 13 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
通过jQuery源码学习javascript(一)
Dec 27 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
javascript中Object使用详解
Jan 26 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
layer插件select选中默认值的方法
Aug 14 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
php处理json时中文问题的解决方法
2011/04/12 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
php实现搜索类封装示例
2016/03/31 PHP
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
微信小程序版本自动更新的方法
2019/06/14 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
Python之修改图片像素值的方法
2019/07/03 Python
python计算无向图节点度的实例代码
2019/11/22 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
如何选择使用结构还是类
2014/05/30 面试题
宝宝周岁宴答谢词
2014/01/26 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
留学推荐信怎么写
2015/03/26 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
家装业务员岗位职责
2015/04/03 职场文书
组织委员竞选稿
2015/11/21 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android