Javascript中 带名 匿名 箭头函数的重要区别(推荐)


Posted in Javascript onJanuary 29, 2017

带名函数是指函数显示地给出了一个名字的函数,function abs(x){}。匿名函数是指函数只带有function这个关键字,而没有像abs这种函数名称的函数,如function(){}。ES6标准新增了一种新的函数:Arrow Function(箭头函数)箭头函数表面上相当于匿名函数,并且简化了函数定义。它们各自的区别是什么呢?

1 带名和匿名函数的区别

区别:匿名函数需要讲地址赋值给另一个变量let a,然后再用a来调用函数;而带名函数因为显示地给出了函数名称,所以可以直接用这个函数名称调用。

带名函数返回值是函数体内的返回值,如abs(x)函数的返回值是number变量。函数调用时,直接abs(6)调用,这个非常好理解。

function abs(x){
 if(x>=0){
  return x;
 }else{
  return -x;
 }
}

但是匿名函数呢?如下所示,函数未显示地给出一个函数名称,但是此处的abs被赋值为这个匿名函数的地址,所以使用时可以直接用abs(-3),诸如此类的调用。

let abs=function(x){ 
 if(x>=0){
  return x;
 }else{
  return -x;
 }
}

2 箭头函数

ES6标准新增了一种新的函数:Arrow Function(箭头函数)。为什么叫Arrow Function?因为它的定义用的就是一个箭头。箭头函数表面上相当于匿名函数,并且简化了函数定义。

箭头函数有两种格式,一种是只包含一个表达式,连{ … }和return都省略掉了。

x => x * x

上面的箭头函数相当于一个匿名函数“”

function (x) {
 return x * x;
}

还有一种可以包含多条语句,这时候就不能省略{ … }和return:

(x,y) => {
 if (x > 0) {
  return x + y;
 }
 else {
  return -x + y;
 }
}

3 箭头函数和匿名函数的不同

箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。

调用函数obj1.getAge(2017)和调用obj2.getAge(2017)会得到相同的结果吗?

obj1中fn函数,由于JavaScript函数对this绑定的错误处理,得不到预期的结果,this.birth指向window或undefined。

但是obj2,fn函数是箭头函数,箭头函数完全修复了this的指向,this总是指向词法作用域,也就是外层调用者obj2。

var obj1 = {
 birth: 1990,
 getAge: function (year) { 
  let fn=function(y){
   return y - this.birth; // this指向window或undefined
  }; 
  return fn(year); 
 }
};
var obj2 = {
 birth: 1990,
 getAge: function (year) {
  var fn = (y) => y - this.birth; // this.birth为1990
  return fn(year);
 }
};

4 总结

和带名函数相比,匿名函数需要讲地址赋值给另一个变量let a,然后再用a来调用函数;和匿名函数比,箭头函数完全修复了this的指向,this总是指向词法作用域。

以上所述是小编给大家介绍的Javascript中 带名 匿名 箭头函数的重要区别,希望对大家有所帮助,如果有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 Javascript
js 自动播放的实例代码
Nov 19 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
jquery常用操作小结
Jul 21 Javascript
js实现按钮加背景图片常用方法
Nov 01 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
修改node.js默认的npm安装目录实例
May 15 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
jQuery图片轮播功能实例代码
Jan 29 #Javascript
jQuery代码实现实时获取时间
Jan 29 #Javascript
用director.js实现前端路由使用实例
Jan 27 #Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 #Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 #Javascript
js监听input输入框值的实时变化实例
Jan 26 #Javascript
jquery实现input框获取焦点的简单实例
Jan 26 #Javascript
You might like
php网页后退不再出现过期
2007/03/08 PHP
基于php下载文件的详解
2013/06/02 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
js跑步算法的实现代码
2013/12/04 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
js格式化时间的方法
2015/12/18 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
python实现百度关键词排名查询
2014/03/30 Python
Python自动登录126邮箱的方法
2015/07/10 Python
python实现决策树
2017/12/21 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
python之yield和Generator深入解析
2019/09/18 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
一套VC试题
2015/01/23 面试题
小学生节约用水倡议书
2014/05/15 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书
MySQL连接控制插件介绍
2021/09/25 MySQL