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图片的展开和收缩实现代码
Apr 16 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
Nov 22 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
js中bool值的转换及“&&”、“||”、 “!!”详解
Dec 21 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
layui实现下拉框三级联动
Jul 26 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
组合算法的PHP解答方法
2012/02/04 PHP
php生成静态文件的多种方法分享
2012/07/17 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
php7下的filesize函数
2019/09/30 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
js下用层来实现select的title提示属性
2010/02/23 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
简单介绍Python中的decode()方法的使用
2015/05/18 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
Python递归函数实例讲解
2019/02/27 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
Django REST framework 视图和路由详解
2019/07/19 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
英文版销售经理个人求职信
2013/11/20 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
MySQL开启事务的方式
2021/06/26 MySQL
Python可视化神器pyecharts绘制水球图
2022/07/07 Python