【示例】分析箭头函数中的this值

技术频道 - js技术

【示例】分析箭头函数中的this值

作者:admin 时间:2022-6-8 22:32:13 浏览:

在前文中，我介绍了常规函数中的this，然而箭头函数与常规函数不同，此外，箭头函数与常规函数的this也不同，因此，在本文中，我将介绍箭头函数中的this值。

this是定义箭头函数的封闭上下文

箭头函数不会创建自己的执行上下文，而是用this从定义它的外部函数中获取。换句话说，箭头函数在this词法上解析。

分析箭头函数中的this值

以下示例显示了上下文透明度属性：

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  log() {
    console.log(this === myPoint); // => true
    setTimeout(() => {
      console.log(this === myPoint);      // => true
      console.log(this.x + ':' + this.y); // => '95:165'
    }, 1000);
  }
}
const myPoint = new Point(95, 165);
myPoint.log();

setTimeout()使用与log()方法相同的上下文（myPoint 对象）调用箭头函数。正如你所见，箭头函数从定义它的函数“继承”上下文。

此示例中的常规函数将创建自己的上下文——window或undefined(在严格模式下)，因此，要使相同的代码与函数表达式一起正常工作，必须手动绑定上下文：setTimeout(function() {...}.bind(this))，这很冗长，使用箭头函数是一种更简洁、更短的解决方案。

如果箭头函数定义在最顶层范围（任何函数之外），则上下文始终是全局对象（window在浏览器中）：

const getContext = () => {
 console.log(this === window); // => true
 return this;
};
console.log(getContext() === window); // => true

使用上下文修改方法也无法修改this

箭头函数与this词汇永远绑定在一起。即使使用上下文修改方法也无法修改this：

const numbers = [1, 2];
(function() { 
  const get = () => {
    console.log(this === numbers); // => true
    return this;
  };
  
  console.log(this === numbers); // => true
  get(); // => [1, 2]
  
  // 试图手动修改箭头函数上下文
  get.call([0]);  // => [1, 2]
  get.apply([0]); // => [1, 2]
  
  get.bind([0])(); // => [1, 2]
}).call(numbers);

无论箭头函数get()如何调用，它始终保持词法上下文numbers。用其他上下文get.call([0])或get.apply([0])间接调用，重新绑定get.bind([0])()无效。

箭头函数不能用作构造函数。将其作为构造函数new get()调用会引发错误：TypeError: get is not a constructor。

总结

本文通过几个示例，介绍了箭头函数中的this值。通过本文的学习，我们应该了解“上下文——箭头函数——this”之间的意义。

相关文章