Normal function VS arrow function

Descriptions

Arrow function doesn't bind to own this, arguments, super, or new.target
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

You could also check this link out for deep this understanding:

https://stackoverflow.com/questions/34361379/arrow-function-vs-function-declaration-expressions-are-they-equivalent-exch

arguments can be replaced by Rest parameter
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters

Compatibility

IE Not support
Chrome 47.0 +
Firefox 15.0 +

Diff of arrow and normal

Recommend Reading

By Dr. Axel Rauschmayer
http://www.2ality.com/2012/04/arrow-functions.html(Emm.. the examples not work well now.)

Exp - 0 dynamic

Different from normal function, arrow function has adynamic this inherit from parent

normal function's this is in its context surrounded by {}

window.name = 'global';
let obj = {
  name: 'local',
  normal: function() {
    console.log(this.name);
  },
  arrow: () => {
    console.log(this.name);
  }
};

obj.normal();
obj.arrow();

Exp - 1 don’t support the special variable arguments

HIGHLIGHT: This may a mistake if you know how to make it with arrow function!!!

Good:

let arr = [1, 2, 3, 4];
let result = [];
arr.forEach(function(x) {
  this.push(x * x);
}, result);

console.log(result);

Bad:

let arr = [1, 2, 3, 4];
let result = [];
arr.forEach((x) => {
    this.push(x * x);  //  Unexpected 'this'.
}, result);

console.log(result);

Exp - 2 this not binds with own function({} | undefined) anymore

that hack won't exist in arrow function => http://www.infoq.com/cn/articles/es6-in-depth-arrow-functions

function Person1() {
  let that = this;
  that.age = 0;

  setTimeout(function growUp() {
    that.age++;
  }, 200);
}

function Person2() {
  //  this1
  this.age = 0;

  setTimeout(function growUp() {
    //  this2
    this.age++;
  }, 200);
}

function Person3() {
  this.age = 0;
  setTimeout(() => {
    this.age++;
  }, 200);
}
let p1 = new Person1();
let p2 = new Person2();
let p3 = new Person3();

setTimeout(function() {
  console.log('p1: ' + p1.age);
  console.log('p2: ' + p2.age);
  console.log('p3: ' + p3.age);
}, 500);
// 1, 0, 1

more about this: https://github.com/zchen9/code/issues/1

Exp - 04 arrow function can not be a constructor

const Func = () => {
  this.str = '1234';
  this.func = () => {
    console.log(this.str);
  };
};
let func = new Func();
func.func();
//  TypeError: Func is not a constructor

Exp - 05 arrow function `this` also not affected by call/apply, it's just inherited.

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));
console.log(adder.addThruCall(1));

//  code link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

3rd reference with arrow functions

@Dr. Axel

An arrow function is different from a normal function in only three ways: First, it always has a bound this. Second, it can’t be used as a constructor: There is no internal method [[Construct]] (that allows a normal function to be invoked via new) and no property prototype. Therefore, new (() => {}) throws an error. Third, as arrow functions are an ECMAScript.next-only construct, they can rely on new-style argument handling (parameter default values, rest parameters, etc.) and don’t support the special variable arguments. Nor do they have to, because the new mechanisms can do everything that arguments can.

Using rest parameters:

let a = 'a';
let b = 'b';
let func = (...thisArgs) => {
  console.log(thisArgs.length);
};

func(a, b);
// output: 2