ES6箭头函数自我理解

箭头函数是一种使用 (=>) 定义函数的新语法。
语法：(参数)=> { statements }；

// ES5写法
function getNum(num){
  return num;
}
getNum(5); // 5

// ES6写法
var getNum = (num) => num;
getNum(5); // 5

注： 当没有参数时，使用一个圆括号代表参数部分；当只有一个参数时，可省略圆括号；当有多个参数时，在圆括号内定义多个参数用逗号分隔；

当箭头函数的代码块部分多余一条语句，就需要使用大括号括起来，并且使用return 语句。但不能直接使用大括号，由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

var getNum = (a,b) => a+b;
getNum(5，3); // 8

var getNum = (a,b) => {a+b};
getNum(5，3); // undefined

var getNum = (a,b) => {return a+b};
getNum(5，3); // 8

箭头函数不能通过new调用，即箭头函数不能被用作构造函数。因而没有构建原型的需求，所以箭头函数不存在 prototype 这个属性。

let Fun = ()=>{};
let fun = new Fun(); // 报错 TypeError: Fun is not a constructor

console.log(Fun.prototype); // undefined  //不存在prototype属性

若想在箭头函数中获取不定长度的参数列表，可以使用 ES6 中的 rest 参数解决

let f = (...args)=>console.log(args)
f(1,2,3,4,5);  // [1,2,3,4,5]

箭头函数没有this绑定，箭头函数没有自己的this。

var obj = {
  value:0,
  fn:function(){
    this.value ++
  }
}
obj.fn();
console.log(obj.value); // 1

// 函数 f 中的 this 并不是 方法 obj.fn 中的 this，导致我们没法获取到 obj.value 。
var obj = {
  value:0,
  fn:function(){
    var f = function(){
      this.value ++
    }
    f();
  }
}
obj.fn();
console.log(obj.value); // 0

// 在函数外部将this赋值给一个临时变量解决this问题
var obj = {
  value:0,
  fn:function(){
    var self = this;
    var f = function(){
      self.value ++
    }
    f();
  }
}
obj.fn();
console.log(obj.value); // 1

// 用箭头函数写法
var obj = {
  value:0,
  fn:function(){
    let f = () => {
      this.value ++
    }
    f();
  }
}
obj.fn();
console.log(obj.value); // 1

注：如果箭头函数的外层有普通函数，箭头函数的 this 就是外层普通函数的this；
如果箭头函数的外层没有普通函数，那么箭头函数的 this 就是全局变量。

// 无普通函数
let obj = {
    fn:()=>{
        console.log(this === window);
    }
}
console.log(obj.fn()); // true

//有普通函数
let obj = {
    fn:function(){
        console.log(this === obj); // true
        return ()=>{
            console.log(this === obj); // true
        }
    }
}
console.log(obj.fn()())；

当对箭头函数使用 call 或 apply 方法时，只会传入参数并调用函数，并不会改变箭头函数中 this 的指向；
当对箭头函数使用 bind 方法时，只会返回一个预设参数的新函数，并不会绑定新函数的 this 指向。

window.name = 'window';
let f1 = function() {
	return this.name
}
let f2 = () => this.name;

let obj = {name:'obj'}

f1.call(obj) // obj
f2.call(obj) // window

f1.apply(obj) // obj
f2.apply(obj) // window

f1.bind(obj)() // obj
f2.bind(obj)() // window