<!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对象？
箭头函数的具体指向绑定定义时所在的作用域，而不是指向运行时所在的作用域。
setTimeout(()=>{
console.log("id",this.id);//id:21
},100)
var id = 21;
//此箭头函数绑定了定义时所在的作用域,全局作用域下
function foo() {
setTimeout(() => {
console.log(‘id:‘, this.id);//id:42
}, 100);
}
var id = 21;
foo.call({ id: 42 });
////此箭头函数绑定了定义时所在的作用域,foo的函数作用域下，所以this才指向了{id:42}
箭头函数转成 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,所以才绑定了定义时所在的作用域
除了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]
箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。
(function() {
return [
(() => this.x).bind({ x: ‘inner‘ })()
];
}).call({ x: ‘outer‘ });
// [‘outer‘]
原文：https://www.cnblogs.com/listenMao/p/13184938.html