ES6标准新增了一种新的函数:Arrow Function(箭头函数)。

为什么叫Arrow Function?因为它的定义用的就是一个箭头

x =>x*x

相当于:

function(x) {
return x*x;
}

箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种像上面的,只包含一个表达式,连{……}和return都省略掉了。还有一种可以包含多条语句。这个时候就不能省略{……}和return:

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

如果参数不是一个,就需要用括号()起来:

    //两个参数:
(x,y) => x * x + y * y
//无参数
() => 3.14
//可变参数:
(x,y,...rest) =>{
var i,sum=x+y;
for(i=0;i<rest.length;i++) {
sum += rest[i];
}
return sum;
}

如果要返回一个对象,就要注意,如果是单表达式,要这么写:

//SyntaxError
x =>{foo:x} //因为和函数体的{……}有语法冲突,所以:
//ok
x=>({foo:x})

this

箭头函数看上去是匿名函数的一种简写,但是实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。由于JavaScript函数对this绑定的错误处理。下面的例子无法得到预期结果:

  var obj = {
birth:1990,
getAge:function(){
var b = this.birth;//
var fn = function(){
return new Date().getFullYear() - this.birth;//this指向window或undefined
};
return fn();
}
};

现在,箭头函数完全修复了this的指向,this总是指向词法作用域,也就是外层调用者obj:

    var obj = {
birth:1990,
getAge:function () {
var b = this.birth;//
var fn = () => new Date().getFullYear() - this.birth;//this指向obj对象
return fn();
}
};
obj.getAge();//

由于this在箭头函数中已经按照词法作用域绑定了,所以,用call()或者apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略:

    var obj = {
birth:1990,
getAge:function(year) {
var b = this.birth;//
var fn = (y) =>y-this.birth;//this.birth仍是1990
return fn.call({birth:2000},year);
}
};
obj.getAge(2015);//

js箭头函数的更多相关文章

  1. 混合开发的大趋势之 一个Android程序员眼中的 React.js 箭头函数,const, PropTypes

    转载请注明出处:王亟亟的大牛之路 昨天写了篇React.js的开头之作,讲了讲块级作用域和let,先安利:https://github.com/ddwhan0123/Useful-Open-Sourc ...

  2. js箭头函数 的 (e) => { } 写法笔记

    1. (e) => {} 是ES 6 新语法,默认是Es 5.1,因此在这里设置一下就不会提示红色下划线了 2.使用: (e) => {}  , 其实就是function (e){} 的缩 ...

  3. js(=>) 箭头函数 详细解说 案例大全

    ES6标准新增了一种新的函数:Arrow Function(箭头函数). 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: fu ...

  4. js 箭头函数

    箭头函数 ES6标准新增了一种新的函数:Arrow Function(箭头函数). x => x * x相当于: function (x) { return x * x; }箭头函数相当于匿名函 ...

  5. node.js箭头函数使用

    ES6允许使用=>定义函数,箭头函数使得表达更加简洁,例如 // 正常函数写法 [1,2,3].map(function (x) { return x * x; }); // 箭头函数写法 [1 ...

  6. JS箭头函数的this

    箭头函数的this看定义他的时候,他的外层有没有函数 有:外层函数的this就是箭头函数的this 无:箭头函数的this就是window obj = {age:18, getAge: ()=> ...

  7. js 箭头函数不适用的场景

    箭头函数虽然方便但也不是每个地方都适用, 箭头函数在开发中可以十分方便的干预 this的指向,在一些情况下,是不需要对this的指向进行干预的,也就不适用箭头函数 1.构造函数的原型方法上 例如:Pe ...

  8. JS - 箭头函数与 () {} 的作用域

    foo () { // ... } 等价于 foo: function () { // ... } foo: () => { // ... } 范例: // 全局 name = 'zhangsa ...

  9. JS 函数(arguments、箭头函数、bind)

    参数 函数内部可用的 arguments 对象来访问函数的实参 注意 在函数递归调用的时候(在某一刻同一个函数运行了多次,也就是有多套实参),那么 arguments 属性的值是最近一次该函数调用时传 ...

随机推荐

  1. 自己实现C++的string类

    使用C++的朋友对string类都不会陌生,string类使用起来很是方便,比C的字符数组好用多了,但是我们能不能自己实现一个属于自己的string类呢? 实现一个具有基本功能的string类并不难, ...

  2. Zookeeper之集群搭建(Linux)

    Zookeeper集群搭建(Linux环境) 条件准备:准备三台Linux服务器 vt-serv1.vt-serv2.vt-serv3(虚拟机/物理机均可,服务器数量一定要是单数,不要问我为什么,据说 ...

  3. java常用API之System类

    System中代表程序所在系统,提供了对应的一些系统属性信息,和系统操作.System类不能手动创建对象,因为构造方法被private修饰,阻止外界创建对象.System类中的都是static方法,类 ...

  4. CSS垂直居中的四种方法

    写在前面的话 最近在Stack Overflow上看到 一个不错的回答 ,以下是我对其的总结,分享给大家. 垂直居中的四种方法 ①基础的方法 设置父元素的line-height等于height,这种方 ...

  5. IntelliJ IDEA 2017.3.5 安装 lombok-plugin-0.17 失败,通过网络下载总是超时

    1.问题: IntelliJ IDEA 2017.3.5 安装 lombok-plugin-0.17 失败,通过网络下载总是超时: 2.原因:IntelliJ IDEA 2017.3.5 目前还不支持 ...

  6. 给HTML拍个照(如何将html元素转成图片)

    本文主要介绍一款好用的库,如何将HTML生成图片. 1.简述 最近在做的项目中,需要将界面转换成模板保存下来,本来想使用自适应布局完成,但是页面较复杂,模板较多,生成的模板使用过多的HTML标签,于是 ...

  7. Stage5--Python GUI编程TKinter

    Python图形库简要介绍 python提供了多个图形开发界面的库,几个常用Python GUI库如下: Tkinter: Tkinter模块("Tk 接口")是Python的标准 ...

  8. 《ArcGIS Runtime SDK for Android开发笔记》——(10)、ArcGIS Runtime SDK支持的空间数据类型

    1.前言 移动端的数据来源非常重要,它决定了移动端功能的实现.早期的ArcGIS Android API中,主要以接入在线的数据源为主,因此主要实现在线的地图浏览.查询和路径分析.地理处理等从操作:在 ...

  9. 【MATLAB】R2017b两个镜像文件如何安装

    1.采用DEAMON TOOLS加载镜像1. 2.当安装过程中弹出[请插入DVD2]时,在原来的盘符上面右键点击[装载],选择DVD2的镜像文件.在安装程序处选择[继续]即可正常安装.

  10. Sharepoint学习笔记—修改SharePoint的Timeouts (Execution Timeout)

    有时在Sharepoin中有些执行任务可能会超过Sharepoint环境默认的Timout限制,这种情况下系统会报"Request Timed out"错误.对此我们可以在两个层次 ...