探究箭头函数

箭头函数

箭头函数本身 没有自己的 this，arguments，super 或 new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。调用箭头函数的 this ，指向的是其声明时所在作用域的 this

document.onclick = function () {
  function fn() {
    console.log(this);
  }
  fn(); // 这个函数是直接调用的，所以指向的是 window
};

作为对比

document.onclick = function () {
  let fn = () => {
    console.log(this);
  };
  // console.log(this); // document
  fn(); //那么因为箭头函数本身没有 this ，所以this 指向的是其定义时候的作用域的this，也就是 document
};

结合定时器

// 先来看看原来的情况
function Person() {
  // Person() 构造函数定义 `this`作为它自己的实例.
  this.age = 0;

  setInterval(function growUp() {
    // 在定时器里面 this 指向的是全局对象，然而全局对象中并没有定义 age 。
    this.age++;
  }, 1000);
}

var p = new Person();
setInterval(function () {
  console.log(p.age); // 永远打印的是 0  ，因为Person 中的定时器只对全局的 age 做了操作
  console.log(age); // 打印全局的 age ,得到的是 NaN 因为 对 undefined 执行累加（注意全局没有定义age），一定是 NaN
}, 1000);

对比看看箭头函数

function Person() {
  // Person() 构造函数定义 `this`作为它自己的实例.
  this.age = 0;

  setInterval(() => {
    // 在定时器里面 this 指向的是全局对象，然而全局对象中并没有定义 age 。
    this.age++;
  }, 1000);
}

var p = new Person();
setInterval(() => {
  console.log(p.age); // 此刻每隔一秒 age 都会累加 。
  //理由很简单，箭头函数没有自己的 this ，它的 this 指向的是定义它的时候其作用域的 this
}, 1000);

箭头函数没有自己的 arguments

function fn1() {
  console.log(arguments);
  function fn2() {
    console.log(arguments);
  }
  return fn2;
}

// 一般函数都会拥有自己的 arguments
var f1 = fn1(1, 2, 3); // 1  2  3
f1(4, 5, 6); //  4  5  6

作为对比

function fn1() {
  console.log(arguments);
  return () => {
    console.log(arguments);
  };
}

//  箭头函数没有自己的 arguments ，它的 arguments 指向的是定义它的时候其作用域的 arguments
var f1 = fn1(1, 2, 3); // 1  2  3
f1(4, 5, 6); //  1  2  3

箭头函数不能用作构造器，和 new 一起用会抛出错误

// 这就直接报错了
let Foo = () => {};
let foo = new Foo();

箭头函数没有 prototype 属性

let Foo = () => {};
console.log(Foo.prototype); // undefined