原文

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();
}
};
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. js 之 箭头函数 (未学完)

    js之箭头函数表达式 箭头函数表达式的语法比函数表达式更短,并且没有自己的this,arguments,super或 new.target.这些函数表达式更适用于那些本来需要匿名函数的地方,并且它们不 ...

  2. js中箭头函数和普通函数this的区别

    最近在学习angularJs的时候由于里面涉及到了箭头函数,箭头函数除了声明上有点区别以外,和普通函数最主要的区别还是在this的问题上. Js中函数中嵌套的函数this不会 “继承”.比如说以下代码 ...

  3. 【js】箭头函数与普通函数的异同

    普通函数在es5中就有了,箭头函数是es6中出现的函数形式,当然也可以继续用es5写法. 普通函数大家知道: 形式基本一致 来看看箭头函数: 开发时根据实际情况可以省略一些东西 单条处理可以省略ret ...

  4. => js 中箭头函数使用总结

    箭头函数感性认识 箭头函数 是在es6 中添加的一种规范 x => x * x 相当于 function(x){return x*x} 箭头函数相当于 匿名函数, 简化了函数的定义. 语言的发展 ...

  5. js中箭头函数 及 针对箭头函数this指向问题引出的单体模式

    ES6允许使用“箭头”(=>)定义函数 var f = a = > a //等同于 var f = function(a){ return a; } 如果箭头函数不需要参数或需要多个参数, ...

  6. JS的箭头函数this作用域

    name="小刚"; let student={ name:"小明", printLog:function(){ // 这里绑定了顶层作用域,可以使用变量与方法 ...

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

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

  8. 【 js 基础 】【 源码学习 】柯里化和箭头函数

    最近在看 redux 的源码,代码结构很简单,主要就是6个文件,其中 index.js 负责将剩余5个文件中定义的方法 export 出来,其他5个文件各自负责一个方法的实现. 大部分代码比较简单,很 ...

  9. 前端分享----JS异步编程+ES6箭头函数

    前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只 ...

随机推荐

  1. c++多线程基础5(future,async,packaged_task,promise)

    以下内容整理自:https://www.cnblogs.com/my_life/articles/5401190.html future 是一个能从其他地方获取到一个值的对象,如果是在不同的线程中,则 ...

  2. mysql主从服务器

    #mysql主从服务器 mysql-bin.003673 | 106 查看错误日志show variables like '%log_error%'; replicate-do-table=testm ...

  3. Android Studio for windows环境搭建

    Android Studio环境搭建 个人博客 欢迎大家多多关注该独立博客:   csdn博客  一直想把自己的经验分享出来,记得上次写博客还是ok6410的笔记,感觉时代久远啊.记得那个时候我还一心 ...

  4. Navicat Premium 12.1.12.0破解版激活

    声明:本文所提供的所有软件均来自于互联网,个人存放在此作为备用,以备将来不时之需,同时作为大家的分享和学习成果,仅供个人研究和学习使用,请勿用于商业用途,下载后请于24小时内删除,请支持正版! 附:二 ...

  5. xz

  6. Android StateListDrawable资源的使用(文本的高亮显示)

    1.介绍 2.xml文件属性介绍 3.实例演示 <1>新建drawable文件 app--->src---->main---->res---->drawable , ...

  7. copy模拟

    1.copy是浅复制,只复制一层:而deepcopy是所有层都复制,适用于lis嵌套listt的复制.两都均是函数.

  8. [原创]在Centos7上搭建私有的Gitlab服务器

    前言 Git作为后起之秀,在版本控制领域占据了头把交椅.Github作为托管式的代码仓库,从代码安全性和网络传输等各个方面考虑,对于个人和公司来讲,具有一定的局限性.Gitlab提供的不同版本的安装包 ...

  9. 洛谷 P1272 重建道路

    题目链接 题解 树形dp \(f_{i, j}\)表示以\(i\)为根的子树切出联通块大小为\(j\)的最小答案 显然\(f[i][1]\)为与\(i\)连的边数 设\(v\)是\(u\)的儿子 那么 ...

  10. hdu4513吉哥系列故事——完美队形II 马拉车

    题目传送门 题意:求最长回文串长度,要求回文串左边是非下降. 思路一: 先把连续的回文串,满足先上升再下降的序列处理出来,再对这部分序列做马拉车模板就可以了. 需要注意的是,由于他要的是非下降的序列, ...