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 相关文章推荐
jquery 弹出层实现代码
Oct 30 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
javascript中alert()与console.log()的区别
Aug 26 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
angular.js分页代码的实例
Jul 27 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
Jul 24 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
vue 虚拟dom的patch源码分析
Mar 01 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事务rollback&commit示例
2010/02/08 PHP
PHP 快速排序算法详解
2014/11/10 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
Python实现抢购IPhone手机
2018/02/07 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
python list转置和前后反转的例子
2019/08/26 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
python 元组的使用方法
2020/06/09 Python
python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案
2020/08/11 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
园林施工员岗位职责
2013/12/11 职场文书
趣味活动策划方案
2014/02/08 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
大学优秀班集体申报材料
2014/05/23 职场文书
中药学自荐信
2014/06/15 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
项目转让协议书
2014/10/27 职场文书
2016年情人节广告语
2016/01/28 职场文书