描述

箭头的函数的主要两个作用

  1. 更简短的函数，方便一些高阶函数的使用
  2. 不绑定 this

箭头函数特性

  1. 箭头函数不会创建自己的this，它只会从自己的作用域链的上一层继承this
  2. 没有 arguments 对象，用 rest (拓展运算符) 替代
  3. 不能生成 generator 函数，和使用 yield 关键字
  4. 不能作为构造函数来使用 bind apply call ，使用这些则会忽略第一个参数
  5. 不能用作构造函数

书写形式

  1. const fn = (param1, param2, …, paramN) => { statements }

当只有一个可选参数时，() 是可选的

  1. const fn = param1 => { statements }

当函数执行的结果可以直接 return 时

  1. const fn = param1 => param1.toString()

当然我们也可以用表达式来简化 return

  1. const fn1 = param1 => ({ params: param1.toString() }) // 表示 return 一个对象 { params: param1.toString() }
  2. const fn2 = param1 => (params += 10, param1) // () 表示一个表达式，返回最后一个表达式内容

参数 rest 写法，表示收集余下参数成一个数组

只能作为最后一个参数

  1. const fn = (params, ...otherParams) => { statements }

不同的书写形式

  1. let arrowFunction;
  3. arrowFunction = () => { }
  4. arrowFunction = (params) => { }
  5. arrowFunction = (params1, params2) => { }
  6. arrowFunction = (...args) => { }
  7. arrowFunction = (params1, ...args) => { }
  8. arrowFunction = params => { }
  9. arrowFunction = params => params
  10. arrowFunction = params => Boolean(params)
  11. arrowFunction = params => params === undefined ? true : false
  12. arrowFunction = (numberA, numberB) => numberA + numberB
  13. arrowFunction = (a, b) => [a, b]

注意：当要简写使其返回对象的时候需要使用 () 包起来使其成为一个表达式

  1.  否则 `{}` 默认会被当成函数主体
  1. let foo = (a, b) => ({a, b})

可以作为立即使用函数

  1. (() => { console.log(1) })() // 1

箭头函数没有自己的 this argument constructor

因此他在哪里被定义就指向哪里的this且不会被改变

  1. function foo() {
  2.   var self = this
  3.   const fn = () => {
  4.     console.log(this === self); // true
  5.   }
  6.   fn()
  7. }
  8. foo()

箭头函数使用 bind apply call

  1. var name = 'window'
  2. const obj = { name: 'obj' }
  3. const fn = func => console.log(this.name, func)
  5. const bindFn = fn.bind(obj)
  6. bindFn('bind')          // window bind
  7. fn.apply(obj,['apply']) // window apply
  8. fn.call(obj,'call')     // window call

没有自己的 arguments

  1. function normalFunction() {
  2.   const arg = arguments
  3.   const arrowFunction = (...args) => {
  4.     console.log(arg === arguments) // true
  5.     // 所以一般用 ...args 来收集参数
  6.   }
  7.   arrowFunction()
  8. }
  9. normalFunction()

无法使用 new 关键词

  1. var Foo = () => {};
  2. var foo = new Foo(); // TypeError: Foo is not a constructor - 报错

没有 prototype 属性

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

解析顺序

  1. let callback;
  3. callback = callback || function () { }; // ok
  5. /**
  6.  * 以下几种情况会报错
  7.  * Malformed arrow function parameter list
  8.  */
  9. callback = callback || () => { };                
  10. callback = callback || (params) => { };
  11. callback = callback || (params1, params2) => { };
  12. callback = callback || params => { };
  13. callback = callback || params => params;
  15. // 所以使用 () 包起来是他成为一个完整的表达式
  16. callback = callback || (() => { });    // ok

使用闭包

  1. var add = () => {
  2.   var num = 0
  3.   return () => {
  4.     num++
  5.     console.log(num)
  6.   }
  7. }
  9. var getNum = add()
  10. getNum() // 1
  11. getNum() // 2

使用递归

  1. var fact = (x) => (x == 0 ? 1 : x * fact(x - 1));
  2. fact(5);       // 120

当作高阶函数的参数

  1. var arr = [5, 6, 1, 2, 3, 7,]
  2. arr.forEach(item => console.log(item))
  3. arr.find(item => item > 5)
  4. arr.sort((a, b) => a - b)