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 相关文章推荐
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
Extjs4中的分页应用结合前后台
Dec 13 Javascript
jquery的ajax跨域请求原理和示例
May 08 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
VuePress 中如何增加用户登录功能
Nov 29 Javascript
typescript配置alias的详细步骤
Aug 12 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作为Shell脚本语言使用
2006/10/09 PHP
用PHP发电子邮件
2006/10/09 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
Javascript实现的分页函数
2007/02/07 Javascript
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
Python格式化压缩后的JS文件的方法
2015/03/05 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
酒店总经理欢迎词
2014/01/15 职场文书
交通志愿者活动总结
2014/06/27 职场文书
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle
Python anaconda安装库命令详解
2021/10/16 Python