ES6 箭头函数及this指向详解

箭头函数相当于匿名函数，箭头函数简化了函数的定义，比函数表达式更简洁，并且没有自己的this，arguments。。。

基础语法

(参数1, 参数2, …) => { 函数体 }

• 最简单的箭头函数（没有形参、函数体语句单一）

  let fn = () => console.log('最简写的箭头函数')
  fn() // 最简写的箭头函数
  

  相当于：

  var fn = function () {
      return console.log('最简写的箭头函数')
  }
  

• 形参只有一个时 “()” 可以省略；没有参数或多个参数时不能省略

  let fn = x => x*x
  console.log(fn(6)) // 36 
  

• 函数体语句单一 （只有一条语句或者表达式）时可以省略 “{}” 否则不能省略

  let fn = (x, y, z) => x*y+z
  console.log(fn(9, 9, 6)) // 87
  

高级语法

• 返回一个对象

  语法：参数=> ({foo: bar})

  函数体加 “()” 括号后返回的是对象字面表达式；当对象的属性名与变量名相同时可以直接使用变量名；属性值为匿名函数时可以直接省略 function 关键字。

  let uname = "玉环", age = "青娥", gender = "女"
  let fn = () => ({
      uname,
      age,
      gender,
      getName() {
          return this.gender
      }
  })
  console.log(fn())
  

  执行结果：

  {uname: "玉环", age: "青娥", gender: "女", getName: ƒ}
  

• 参数设置默认值

  语法：(参数1 = 默认值1,参数2 = 默认值2, …) => {函数体}

  let fn = (x, y = 9, z = 7, a, b) => x*y+z
  console.log(fn(9)) // 88
  

箭头函数的 this

箭头函数没有自己的 this，箭头函数的 this 在定义函数的时候绑定，而不是在执行函数的时候绑定。

HTML:

<button id="btn1">普通函数 this</button>
<button id="btn2">箭头函数 this</button>

JS:

// 通过id 获取 元素
let btn1 = document.getElementById('btn1')
let btn2 = document.getElementById('btn2')
// 普通函数
btn1.onclick = function () {
    console.log(this) // this 指向调用者 btn1
}
// 箭头函数
btn2.onclick = () => console.log(this) // 当前函数的 this 指向 window

执行结果：

<button id="btn1">普通函数 this</button>
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

箭头函数的 this 看外层是否有普通函数，如果有，外层函数的 this 就是箭头函数的 this ，如果没有则 this 是 window。

外层为普通函数

let obj = {
    uname: '箭头函数 this',
    getName: function () {
        console.log(this.uname)
        // 在普通函数中定义了箭头函数并将箭头函数作为函数返回值返回
        return () => console.log(this.name)
    }
}
// 执行结果：箭头函数 this
obj.getName() //  普通函数中的 this 指向调用该函数的 obj 对象
// 执行结果也是：箭头函数 this
obj.getName()() // 由此可见当前的箭头函数中的 this 也指向 obj 对象

外层为箭头函数

let obj = {
    uname: '箭头函数 this',
    getName: () => {
        console.log(this)
    	// 在箭头函数中定义了箭头函数并将箭头作为函数返回值返回
    	return () => console.log(this)
    }
}
obj.getName()
obj.getName()()

执行结果：

#指向 window
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}