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 jcrop插件截图使用方法
Nov 20 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
js转换对象为xml
Feb 17 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
详解组件库的webpack构建速度优化
Jun 18 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
Vue.js样式动态绑定实现小结
Jan 24 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缓存类代码(附详细说明)
2011/06/09 PHP
PHP使用feof()函数读文件的方法
2014/11/07 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
js匿名函数作为函数参数详解
2016/06/01 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
Python实现购物车购物小程序
2018/04/18 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
Python类反射机制使用实例解析
2019/12/30 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
温泉秘密:Onsen Secret
2020/07/06 全球购物
Java编程面试题
2016/04/04 面试题
军训心得体会
2013/12/31 职场文书
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
总裁助理岗位职责
2014/02/17 职场文书
六一节目主持词
2014/04/01 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android
详解CSS3浏览器兼容
2022/12/24 HTML / CSS