ES6中箭头函数的作用

原创 2017年11月14日 23:37:15

我们知道在ES6中,引入了箭头函数,其本质就是等同有ES5中的函数。类似于下面的写法:
let test1=() => “abc”;
let test2=() => { return “abc”};
let sum=(a,b) => a+b;

比如上面的3个ES6的箭头函数的写完,如果用ES5就像下面的写完一样。
其实其等同于下面的ES5的写法:

function test1() {
return "abc"
}

function test2(){
return "abc"
}

function sum(){
return a+b;
}

1. 其基本格式如下:

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// equivalent to: (param1, param2, …, paramN) => { return expression; }

// Parentheses are optional when there's only one parameter name:
(singleParam) => { statements }
singleParam => { statements }
singleParam => expression


// The parameter list for a function with no parameters should be written with a pair of parentheses.
() => { statements }

2. 高级格式如下:

// Parenthesize the body of function to return an object literal expression:
params => ({foo: bar})

// Rest parameters and default parameters are supported
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }

// Destructuring within the parameter list is also supported
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  
// 6

那为什么在ES6中引入了箭头函数呢? 最主要的目的就是解决this指针的问题。
我们知道在ES6中,我们可以创建一个class,如果我们默认在其里面加入一个函数的话,其必须在调用的时候,必须绑定this指针,否则不能访问当前类的实例里面的属性。下面举一个具体的例子,为什么其能解决this指针的问题。
比如下面一个一个Person类:

function Person() {
  //Person()构造器定义了`this`指针,指向了其实例本身
  this.age = 0;

  setInterval(function growUp() {
    //在non-strict模式下,growUp()方法定义了‘this’作为一个全局的对象。其
    //不同于Person()构造器生成的‘this’指针
    this.age++;
  }, 1000);
}
var p = new Person();

在ECMAScript 3/5中, 这个this的指针问题可以通过显示的制定this到一个变量,从而把Person()构造器生成的实例this指针,引入到函数中,具体写完如下:

function Person() {
  var that = this;
  that.age = 0;

  setInterval(function growUp() {
    // The callback refers to the `that` variable of which
    // the value is the expected object.
    //这个回调函数引用了`that`变量,其值就代表的是当前对象,而不是一个全局的     //一个this对象
    that.age++;
  }, 1000);
}

这种写完有点啰嗦和繁杂,那么有没有更为简洁的方式呢?直到ES6出现了箭头函数,才彻底的解决这个问题。下面让我们看看ES6的箭头函数如何写的。

unction Person(){
  this.age = 0;

  setInterval(() => {
   // |this| 自动的指向当前Person的构造器生成的Person实例 
   //是不是感觉很简洁
    this.age++; 
  }, 1000);
}

var p = new Person();

3. 样例

3.1 箭头函数作为一个方法

'use strict';
var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log(this.i, this);
  }
}
obj.b(); // prints undefined, Window {...} (or the global object)
obj.c(); // prints 10, Object {...}

3.2 通过call 或者 apply调用

var adder = {
  base: 1,
  add: function(a) {
    var f = v => v + this.base;
    return f(a);
  },

  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base: 2
    };

    return f.call(b, a);
  }
};

console.log(adder.add(1));         // This would log to 2
console.log(adder.addThruCall(1)); // This would log to 2 still

3.3 更多的例子

// An empty arrow function returns undefined
let empty = () => {};

(() => 'foobar')(); 
// Returns "foobar"
// (this is an Immediately Invoked Function Expression 
// see 'IIFE' in glossary)

var simple = a => a > 15 ? 15 : a; 
simple(16); // 15
simple(10); // 10

let max = (a, b) => a > b ? a : b;

// Easy array filtering, mapping, ...

var arr = [5, 6, 13, 0, 1, 18, 23];

var sum = arr.reduce((a, b) => a + b);  
// 66

var even = arr.filter(v => v % 2 == 0); 
// [6, 0, 18]

var double = arr.map(v => v * 2);       
// [10, 12, 26, 0, 2, 36, 46]

// More concise promise chains
promise.then(a => {
  // ...
}).then(b => {
  // ...
});

// Parameterless arrow functions that are visually easier to parse
setTimeout( () => {
  console.log('I happen sooner');
  setTimeout( () => {
    // deeper code
    console.log('I happen later');
  }, 1);
}, 1);
版权声明:本文为博主原创文章,未经博主允许不得转载。

深入理解JavaScript箭头函数

箭头函数就是个简写形式的函数表达式,并且它拥有词法作用域的this值(即不会新产生自己作用域下的this,arguments,super和new.target等对象)。此外,箭头函数总是匿名的。 语法...
  • zls986992484
  • zls986992484
  • 2016年12月23日 14:23
  • 8389

E6箭头函数在哪些时候不适用

本文主要参考了When ‘not’ to use arrow functions以及箭头函数中this的用法先搞清楚this在箭头函数和普通函数中的区别:箭头函数的this值是在定义的时候就已经确定好...
  • VivianHope
  • VivianHope
  • 2016年10月09日 14:41
  • 1222

es6 的箭头函数 =>

1  基本用法 ES6 允许使用 “ 箭头 ” (=>)定义函数。 var f = v => v; //上面的箭头函数等同于: var f = function(v) { return v; ...
  • qq_30100043
  • qq_30100043
  • 2016年11月29日 18:29
  • 2990

ES6箭头函数和它的作用域

在ES6很多很棒的新特性中, 箭头函数 (或者大箭头函数)就是其中值得关注的一个! 它不仅仅是很棒很酷, 它很好的利用了作用域, 快捷方便的在现在使用以前我们用的技术, 减少了很多代码……但是如果你不...
  • u013510614
  • u013510614
  • 2016年07月17日 08:33
  • 2840

ES6---箭头函数与function定义函数有什么区别?在箭头函数中,this指向,构造函数,变量提升是如何表现的?

简洁 ///function定义函数 function aaa(a,b){ return a+b; }///箭头函数定义函数 var aaa=(a,b)=>{return a+b;} this...
  • Wbiokr
  • Wbiokr
  • 2017年07月20日 20:27
  • 1251

ES6箭头函数和它的作用域

在ES6很多很棒的新特性中, 箭头函数 (或者大箭头函数)就是其中值得关注的一个! 它不仅仅是很棒很酷, 它很好的利用了作用域, 快捷方便的在现在使用以前我们用的技术, 减少了很多代码……但是如果你不...
  • u013510614
  • u013510614
  • 2016年07月17日 08:33
  • 2840

ES6中箭头函数的使用

基本用法 ES6允许使用“箭头”(=>)定义函数。 var f = v => v; 上面的箭头函数等同于: var f = function(v) {  return v...
  • sinat_17775997
  • sinat_17775997
  • 2017年02月04日 11:16
  • 1640

深入理解ES6箭头函数的this以及各类this面试题总结

ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性,俘获了大批粉丝儿 它也可能是面试中的宠儿, 我们关键要搞清楚 箭头函数和普通函数中的this 一针见血式总结: 普通函...
  • yangbingbinga
  • yangbingbinga
  • 2017年03月11日 19:16
  • 13415

ES6箭头函数中的this绑定问题

关于this指向问题的讨论一直是学习js不可忽视的重要部分,那些一个又一个围绕this挖的笔试坑,仿佛永远也填不完 var obj={ fn:function(){ console.log(th...
  • u013344815
  • u013344815
  • 2017年06月13日 16:15
  • 3468

初步探究ES6之箭头函数

今天要介绍的是ES6中的箭头函数。语法我们先来看看箭头函数的语法:([param] [, param]) => { statements }param => expression param 是...
  • mevicky
  • mevicky
  • 2015年11月20日 09:16
  • 19741
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ES6中箭头函数的作用
举报原因:
原因补充:

(最多只允许输入30个字)