• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > Javascript中 带名 匿名 箭头函数的重要区别(推荐)

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

作者:daigualu 字体:[增加 减小] 来源:互联网 时间:2017-05-11

daigualu通过本文主要向大家介绍了javascript 箭头函数,javascript匿名函数,javascript函数,javascript的全局函数,javascript函数手册等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

带名函数是指函数显示地给出了一个名字的函数,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;
 }
}
</div>

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

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

2 箭头函数

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

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

x => x * x
</div>

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

function (x) {
 return x * x;
}
</div>

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

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

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);
 }
};
</div>

4 总结

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

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 深入理解Javascript箭头函数中的this
  • Javascript中 带名 匿名 箭头函数的重要区别(推荐)

相关文章

  • 2017-10-30js获取当前时间是一年中的第几天&&判断闰年&&当前时间的前后几天
  • 2017-05-11javascript 实现文本使用省略号替代(超出固定高度的情况)
  • 2017-05-11JS实现的简单拖拽功能示例
  • 2017-05-11基于vue实现多引擎搜索及关键字提示
  • 2017-05-11jquery.tableSort.js表格排序插件使用方法详解
  • 2017-05-11uploader秒传图片到服务器完整代码
  • 2017-05-11百度地图JavascriptApi Marker平滑移动及车头指向行径方向
  • 2017-05-11nodejs实现发出蜂鸣声音(系统报警声)的方法
  • 2017-05-11jQuery使用正则表达式替换dom元素标签用法示例
  • 2017-05-11详解js前端代码异常监控

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • bootstrap 模态框(modal)实现水平垂直居中显示
    • 详解vue2路由vue-router配置(懒加载)
    • angularjs中的$eval方法详解
    • 原生js轮播(仿慕课网)
    • Bootstrap超大屏幕的实现代码
    • 纯js模仿windows系统日历
    • AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
    • 浅谈js中startsWith 函数不能在任何浏览器兼容的问题
    • HTML5 js实现拖拉上传文件功能
    • js从输入框读取内容,比较两个数字的大小方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有