Arrow functions

基础语法

(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 }

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

// 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

var materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

materials.map(function(material) { 
  return material.length; 
} // [8, 6, 7, 9]

materials.map((material) => {
  return material.length;
} // [8, 6, 7, 9]

materials.map(material => material.length // [8, 6, 7, 9]

function Person() {
  // The Person() constructor defines `this` as an instance of itself.
  this.age = 0;

  setInterval(function growUp() {
    // In non-strict mode, the growUp() function defines `this` 
    // as the global object, which is different from the `this`
    // defined by the Person() constructor.
    this.age++;
  }, 1000
}

var p = new Person(

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.age++;
  }, 1000
}

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| properly refers to the person object
  }, 1000
}

var p = new Person(

var f = () => { 'use strict'; return this; };
f() === window; // or the global object

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

var arguments = 42;
var arr = () => arguments;

arr( // 42

function foo() {
  var f = (i) => arguments[0] + i; // foo's implicit arguments binding
  return f(2
}

foo(1 // 3

function foo() { 
  var f = (...args) => args[0]; 
  return f(2 
}

foo( // 2

'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 {...}

'use strict';
var obj = {
  a: 10
};

Object.defineProperty(obj, 'b', {
  get: () => {
    console.log(this.a, typeof this.a, this
    return this.a + 10; // represents global object 'Window', therefore 'this.a' returns 'undefined'
  }
}

var Foo = () => {};
var foo = new Foo( // TypeError: Foo is not a constructor

var Foo = () => {};
console.log(Foo.prototype // undefined

var func = x => x * x;                  
// concise syntax, implied "return"

var func = (x, y) => { return x + y; }; 
// with block body, explicit "return" needed

var func = () => { foo: 1 };               
// Calling func() returns undefined!

var func = () => { foo: function() {} };   
// SyntaxError: function statement requires a name

var func = () => {foo: 1}

var func = ()
           => 1; 
// SyntaxError: expected expression, got '=>'

let callback;

callback = callback || function() {}; // ok

callback = callback || () => {};      
// SyntaxError: invalid arrow-function arguments

callback = callback || (() => {}    // ok

// 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