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 相关文章推荐
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
js定时器实例分享
Dec 20 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
javascript中的数据类型检测方法详解
Aug 07 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 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
自己动手做一个SQL解释器
2006/10/09 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
PHP实现的购物车类实例
2015/06/17 PHP
php常用字符函数实例小结
2016/12/29 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
python快速查找算法应用实例
2014/09/26 Python
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
python try except 捕获所有异常的实例
2018/10/18 Python
Python 函数返回值的示例代码
2019/03/11 Python
python生成requirements.txt的两种方法
2019/09/18 Python
opencv+python实现均值滤波
2020/02/19 Python
python爬取微博评论的实例讲解
2021/01/15 Python
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
一个SQL面试题
2014/08/21 面试题
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
小学网上祭英烈活动总结
2014/07/05 职场文书
班级课外活动总结
2014/07/09 职场文书
岳麓书院导游词
2015/02/03 职场文书
Python Pygame实战之塔防游戏的实现
2022/03/17 Python