ES6中的箭头函数实例详解
作者：布瑞泽的童话
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了ES6中的箭头函数,结合实例形式详细分析了ES6中箭头函数的基本语法、特性、使用方法与相关注意事项,需要的朋友可以参考下
本文实例讲述了ES6中的箭头函数。分享给大家供大家参考，具体如下：
我们先来看看箭头函数的语法：
([param] [, param]) =& {
statements
param =& expression
param 是参数，根据参数个数不同，分这几种情况：
() =& { … } // 零个参数用 () 表示；
x =& { … } // 一个参数可以省略 ()；
(x, y) =& { … } // 多参数不能省略 ()；
我们再来看看一些示例，看看在ES5中的函数怎么通过ES6中的箭头函数来替代吧：
var selected = allJobs.filter(function (job) {
return job.isSelected();
var selected = allJobs.filter(job =& job.isSelected());
当然，也可以定义多个参数：
var total = values.reduce(function (a, b) {
return a +
var total = values.reduce((a, b) =& a + b, 0);
当然=&后面也不一定非得接return 之后的语句，看下面：
$("#confetti-btn").click(function (event) {
playTrumpet();
fireConfettiCannon();
$("#confetti-btn").click(event =& {
playTrumpet();
fireConfettiCannon();
但是需要注意的是，多行语句需要用{}括起来，单行表达式不需要{}，并且会作为函数返回值。
x =& { return x * x }; // 函数返回 x * x
x =& x * // 同上一行
x =& return x * // SyntaxError 报错，不能省略 {}
x =& { x * x }; // 合法，没有定义返回值，返回 undefined
和普通函数一样，箭头函数也可以使用。
var func1 = (x = 1, y = 2) =& x +
func1(); // 得到 3
var func2 = (x, ...args) =& { console.log(args) };
func2(1,2,3); // 输出 [2, 3]
介绍完了箭头表达式的语法和示例，我们就需要思考一下了。如果箭头表达式仅仅就是简化了函数的命名，我们为什么要改变原来的习惯而去使用它呢？所以我们需要了解一下箭头函数的特性。
箭头函数内部没有constructor方法，也没有prototype，所以不支持new操作。但是它对this的处理与一般的普通函数不一样。箭头函数的 this 始终指向函数定义时的 this，而非执行时。我们通过一个例子来理解:
func : function() { console.log(this.x) },
test : function() {
setTimeout(function() {
this.func();
o.test(); // TypeError : this.func is not a function
上面的代码会出现错误，因为this的指向从o变为了全局（函数调用中的this都是指向全局的）。如果大家对JavaScript中的this不是很熟悉的话，可以看看前面的一篇文章《》。好了，回归正题，我们需要修改上面的代码如下：
func : function() { console.log(this.x) },
test : function() {
var _this =
setTimeout(function() {
_this.func();
通过使用外部事先保存的this就行了。这里就可以利用到箭头函数了，我们刚才说过，箭头函数的 this 始终指向函数定义时的 this，而非执行时。所以我们将上面的代码修改如下：
func : function() { console.log(this.x) },
test : function() {
setTimeout(() =& { this.func() }, 100);
这回this就指向o了。
我们还需要注意一点的就是这个this是不会改变指向对象的，我们知道，但是在箭头函数中是无效的。
var x = 1,
test : () =& this.x
o.test(); // 1
o.test.call(o); // 依然是1
希望本文所述对大家ECMAScript程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具箭头函数在对象中的this指向，及适用环境
时间： 15:38:57
&&&& 阅读：317
&&&& 评论：
&&&& 收藏：0
标签：最近在研究ES6的新特性，箭头函数。发现了几个问题，希望跟大家分享一下，也希望能帮助下同样有此困惑的童鞋们。
正常的箭头函数是这样的：
var fn = (a, b) =& {
return a + b
这样是没有问题的。
当然，箭头函数出现的原因是为了规范化js中的this指向问题，给我们的编程带来效率。
像以往的var tent = this这种写法，通过箭头函数都可以解决。
究其原因，是因为箭头函数的this指向的是当前的作用域，而非运行时调用函数的对象：
var obj = {
getAge:function(){
var b = this.
var fn = () =& new Date().getFullYear() - this.
return fn();
console.log(obj.getAge());
通常，在传统函数中，这里的this.age是指向windows的，但是当我们使用箭头函数处理时，由于箭头函数处于obj的作用域中，所以其this指向了obj而非windows。
我们可以验证一下：
var obj = {　　age:18,
　　getAge:function(){　　　　var b = this.
　　　　var fn = function(){
　　new Date().getFullYear() - this.
　　　　return fn();
console.log(obj.getAge());
//Uncaught TypeError: Cannot read property ‘age‘ of undefined
在传统函数中，this指向了window。
可是由此出现了一个问题，就是当我们将箭头函数直接用于对象的方法时，this的指向就发生了变化：
var obj = {
　　age:18,
　　getAge: () =& this.age
console.log(obj.getAge());
//Uncaught TypeError: Cannot read property ‘age‘ of undefined
这是由于目前为止，箭头函数还不能够直接作为对象的方法使用造成的，同理，在类中：
class obj () {
constructor (name) {
this.name = name
sayName = () =& this.name
console.log(obj.sayName()); //Uncaught TypeError: obj.sayName is not a function
因此，当我们在使用箭头函数时，需要搞明白我们到底应该用它做什么。建议将一些需要传参并且不作为对象方法使用的函数写作箭头函数会更适合一些。
同时，如果你的对象中有些方法可能需要在上下文转换时使用到原对象的内容时，一样可以使用箭头函数。相信我，它将给你的编程带来无与伦比的体验。标签：
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
（4）不可以使用yield命令，因此箭头函数不能用作Generator函数。
function foo() {
setTimeout(()=& {
console.log('id:', this.id);
var id = 21;
foo.call({id:42})//42
改为箭头函数
function foo() {
setTimeout(function () {
console.log('id:', this.id);
var id = 21;
foo.call({id:42})//21
本文已收录于以下专栏：
相关文章推荐
箭头函数就是个简写形式的函数表达式，并且它拥有词法作用域的this值（即不会新产生自己作用域下的this，arguments,super和new.target等对象）。此外，箭头函数总是匿名的。
以前略知晓箭头函数的写法，最近看了阮一峰先生的ES6入门后，又学到了很多。记录如下：
箭头函数简化了函数的写法，作用类似于return 。
var func = x =&
是否局部（Lexical）？包括我在内的许多人，都会这么描述箭头函数里 this 的行为：局部的 this。什么意思呢？
document.getElementById('demo'...
定义：(params1,params2,params3..)=&{expressions}
   其中()中的内容为传入箭头函数的参数，{}为函数内的内容。
规范：1、参数部分：
          ...
今天我来总结一下ES6 对函数做的一些处理。结合我ES5的函数特征，能够让我们根据实际情况，来很好的完成我们的项目需求。一、ES6的箭头函数1. 带参数的箭头函数let fun = (x) =& x
一、函数作为返回值
高阶函数除了可以接受函数作为参数外，还可以把函数作为结果值返回。
求和的函数定义：
function sum(arr) {
    return arr.reduce(fu...
ES6允许使用“箭头”（=&）定义函数。
var f = v =&
上面的箭头函数等同于：
var f = function(v) {
return v...
箭头函数看上去只是语法的变动，其实也影响了this的作用域。
他的最新文章
讲师：姜飞俊
讲师：汪木铃
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)ES6入门=&箭头函数 - 简书
ES6入门=&箭头函数
ES6允许使用“箭头”（=&）定义函数。
//一个参数
var f = v =&
var f = function(v) {
var f = () =& 5;
var f = function () {return 5};
//多个参数
var sum = (num1, num2) =& num1 +num2;
var sum = function(num1,num2){
return num1 + num2;
//如果箭头函数的代码块部分多于一条语句，需要用大括号括起来
var sum =(num1,num2) =& { return num1 + num2;}
//由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外层加上圆括号
var getTempItem = id =& ({id:id,'Temp'});
//箭头函数可以与变量解构结合使用。
const full =({first,last}) =& first + '' +
var full = function(person){
return person.first + '' +person.
//箭头函数使得表达更加简洁
const isEven = n =& n % 2 == 0;
const square = n =& n *
//箭头函数的一个用处是简化回调函数
[1,2,3].map(function (x) {
return x *
[1,2,3].map(x =& x*x);
var result = values.sort(function(a,b) {
return a -
var result = values.sort((a,b) =& a - b);
使用注意点箭头函数有几个使用注意点。
（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
（4）不可以使用yield命令，因此箭头函数不能用作Generator函数。
上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。
function foo() {
setTimeout(() =& {
console.log('id:', this.id);
var id = 21;
foo.call({ id: 42 });
上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到100毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id: 42}），所以输出的是42。
箭头函数可以让setTimeout里面的this，绑定定义时所在的作用域，而不是指向运行时所在的作用域。下面是另一个例子。
function Timer() {
this.s1 = 0;
this.s2 = 0;
// 箭头函数
setInterval(() =& this.s1++, 1000);
// 普通函数
setInterval(function () {
this.s2++;
var timer = new Timer();
setTimeout(() =& console.log('s1: ', timer.s1), 3100);
setTimeout(() =& console.log('s2: ', timer.s2), 3100);
上面代码中，Timer函数内部设置了两个定时器，分别使用了箭头函数和普通函数。前者的this绑定定义时所在的作用域（即Timer函数），后者的this指向运行时所在的作用域（即全局对象）。所以，3100毫秒之后，timer.s1被更新了3次，而timer.s2一次都没更新。
为了更好的生活，必须好好工作。
人生路.....不熟，需要面对得是更多未知的东西，请保持一个无畏的心，勇往直前。