箭头函数的使用和this指向

一、箭头函数语法

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
//相当于：(param1, param2, …, paramN) =>{ return expression; }

// 当只有一个参数时，圆括号是可选的：
(singleParam) => { statements }
singleParam => { statements }

// 没有参数的函数应该写成一对圆括号。
() => { statements }

二、实现

arr = [20,1,34,2]，使用函数实现数组中的每项数据都乘2的操作，最后得到
arr = [40.2.68.4]

1.普通函数实现：

            let newArr = arr.map(function(n) {
                return n * 2;
            })

2.箭头函数实现

1.(param1) => {}

            let newArr = arr.map(n => {
                return n * 2;
            })

2.param1 => {} 只有一个参数时，可以省略圆括号

            let newArr = arr.map(n => {
                return n * 2;
            })

3.param1 => …… 当方法体内只有一个return语句时，可以省略方法体的花括号和return关键字

            let newArr = arr.map(n => n * 2)

三、箭头函数没有单独的this

箭头函数没有自己的this，那他的this去哪里找？
箭头函数会继承自作用域链中上一层的this,也就是箭头函数会顺着他的作用域链，一层一层往上找，知道找到有this为止。
setTimeout().call(window),所以setTimeout中的this被call改变成window

            setTimeout(function() {
                console.log(this);
            })
            
            /*上一层是window,则this指向window*/
            setTimeout(() => {
                console.log(this);
            })

image.png

  const obj = {
    aaa() {
      setTimeout(function () {
        setTimeout(function () {
          console.log(this); // window
        })

        setTimeout(() => {
          console.log(this); // window
        })
      })

      setTimeout(() => {
        setTimeout(function () {
          console.log(this); // window
        })

        setTimeout(() => {
          console.log(this); // obj
        })
      })
    }
  }

第一个setTimeout被call改变this指向，this指向window
第二个setTimeout的箭头函数没有单独的this，向上寻找，找到上一层setTimeout的this,指向window
第三个同第一个一样指向window
第四个同第二个一样，只是第四个的上一层是箭头函数，箭头函数没有this，继续向上一层找，找到aaa()的this，aaa()由obj调用，this指向obj

image.png