js中箭头函数和this

1、箭头函数理解

箭头函数内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

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

上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到 100 毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id: 42}），所以输出的是42。

2、箭头函数基本特点

(1). 箭头函数this为父作用域的this，不是调用时的this。

箭头函数的this永远指向其父作用域，箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向，只会传入参数。

call()、apply()、bind()这三个方法都是来修改this的指向。
三者之间的差别：
call和apply用法基本相同，只是传参的方式不同而已，call是一个一个的传值， apply则传入一个数组；
bind返回是函数，传参方式同call类似，但是bind修改了this指向之后并不会马上起作用，需要调用以下才可以。

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

(2). 箭头函数不能作为构造函数，不能使用new

箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。

(3). 箭头函数没有arguments，caller，callee

callee ：指向当前函数的引用
caller：这个属性保存着调用当前函数的函数的引用

箭头函数本身没有arguments，如果箭头函数在一个function内部，它会将外部函数的arguments拿过来使用。
箭头函数中要想接收不定参数，应该使用rest参数…解决。

let B = (b)=>{
  console.log(arguments);
}
B(2,92,32,32);   // Uncaught ReferenceError: arguments is not defined

let C = (...c) => {
  console.log(c);
}
C(3,82,32,11323);  // [3, 82, 32, 11323]

(4). 箭头函数没有原型属性

var a = ()=>{
  return 1;
}
function b(){
  return 2;
}

console.log(a.prototype);  // undefined
console.log(b.prototype);   // {constructor: ƒ}

(5). 箭头函数常见错误

 let a = {
  foo: 1,
  bar: () => console.log(this.foo)
}
a.bar() 

bar函数中的this指向父作用域，而a对象没有作用域，因此this不是a，打印结果为undefined

function A() {
  this.foo = 1
}
A.prototype.bar = () => console.log(this.foo)
let a = new A()
a.bar() 

原型上使用箭头函数，this指向是其父作用域，并不是对象a，因此得不到预期结果

3、一些this的指向实例

var obj = {
  birth: 1990,
  getAge: function(){
    console.log(new Date().getFullYear() - this.birth); //this指向obj对象
  },
}
obj.getAge(); 

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
            return new Date().getFullYear() - this.birth; // this指向window或undefined
        };
        return fn();
    }
};
obj.getAge();

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};
obj.getAge(); 

var obj = {
       getAge: () => {
            console.log(this); // window
        }
    };
obj.getAge(); 

结果为： 29，NAN，29，window
作为对象的属性时，this的指向则不再是对象本身了，箭头函数捕获的是obj{}这个对象的环境，然后这个环境的this指向的是window

参考：

https://www.cnblogs.com/dongcanliang/p/7054176.html
https://www.cnblogs.com/ranyonsue/p/11989281.html