箭头函数中的 this

示例

直接上代码在：

const tahoe = {
  mountains: ["Freel", "Rose", "Tallac", "Rubicon", "Silver"],
  print1: function(delay = 300) {
    setTimeout(function() {
      console.log('print1:', this);
    }, delay);
  },
  print2: (delay = 300) => {
    setTimeout(function() {
      console.log('print2:', this);
    }, delay);
  },
  print3: function(delay = 300) {
    setTimeout(() => {
      console.log('print3:', this);
    }, delay);
  },
  print4: (delay = 300) => {
    setTimeout(() => {
      console.log('print4:', this)
    }, delay)
  },
  print5: function(delay = 300) {
    const _this = this;
    setTimeout(function() {
      console.log('print5:', _this);
    }, delay);
  }
}

tahoe.print1(100);
tahoe.print2(200);
tahoe.print3(300);
tahoe.print4(400);
tahoe.print5(500);

看看打印出来的结果：

print1: [object Window]
print2: [object Window]
print3: {"mountains":["Freel","Rose","Tallac","Rubicon","Silver"]}
print4: [object Window]
print5: {"mountains":["Freel","Rose","Tallac","Rubicon","Silver"]}

拓展

setTimeout函数this的指向：

1. 解释1：

const callback = function(){
  console.log('callback:', this);
};

setTimeout(callback, 600);

打印结果为：

callback: [object Window]

这就是setTimeout中this剑指[object Window]的一种解释；

2. 解释2： setTimeout是在全局环境中运行，而函数中的this指运行时的上下文，自然this就是指Window。

总结

• 函数中的this指运行时的上下文；
• 箭头函数不能作为构造函数，那么箭头函数中的this其实就是调用外层代码块的this；
• 用箭头函数作用就是保全外层代码块的this作用域。