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的复制网页内容到WORD的实现代码
Feb 16 Javascript
JS判断对象是否存在的10种方法总结
Dec 23 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
Javascript的表单验证-提交表单
Mar 18 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 Javascript
浅谈React和Redux的连接react-redux
Dec 04 Javascript
10 种最常见的 Javascript 错误(频率最高)
Feb 08 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 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实现的四则运算表达式计算实现代码
2011/08/02 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
angularjs基础教程
2014/12/25 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
js实现图片放大展示效果
2017/08/30 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
python print出共轭复数的方法详解
2019/06/25 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
mysql有关权限的表都有哪几个
2015/04/22 面试题
行政助理岗位职责
2013/11/10 职场文书
酒店节能降耗方案
2014/05/08 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
React如何创建组件
2021/06/27 Javascript
详解Vue slot插槽
2021/11/20 Vue.js
win sever 2022如何占用操作主机角色
2022/06/25 Servers