箭头函数

一.箭头函数的指向

1.1先出一道题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var arr=[1,2,3];
    this.arr.forEach((item)=>{
      console.log(this);
    })
  </script>
</body>
</html>

上面的打印的this指向谁?this.arr的arr对象？

1.2箭头函数的具体指向

箭头函数的具体指向绑定定义时所在的作用域，而不是指向运行时所在的作用域。

例子1

  setTimeout(()=>{

        console.log("id",this.id);//id:21
    },100)
   var id = 21;
//此箭头函数绑定了定义时所在的作用域,全局作用域下

例子2

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);//id:42
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
////此箭头函数绑定了定义时所在的作用域,foo的函数作用域下，所以this才指向了{id:42}

二.使用箭头函数的注意点

2.1注意1

箭头函数转成 ES5 的代码如下。

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

上面代码中，转换后的 ES5 版本清楚地说明了，箭头函数里面根本没有自己的this，而是引用外层的this。

结论：箭头函数没有自己的this,所以才绑定了定义时所在的作用域

2.2注意2

除了this，以下三个变量在箭头函数之中也是不存在的，指向外层函数的对应变量：arguments、super、new.target。

function foo() {
  setTimeout(() => {
    console.log('args:', arguments);
  }, 100);
}

foo(2, 4, 6, 8)
// args: Argumnets(4)[2, 4, 6, 8]

2.3注意3

箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。

(function() {
  return [
    (() => this.x).bind({ x: 'inner' })()
  ];
}).call({ x: 'outer' });
// ['outer']
posted @ 2020-06-23 22:25  这样就好了  阅读(252)  评论(0)    收藏  举报