技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

【示例】分析箭头函数中的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 对象)调用箭头函数。正如你所见,箭头函数从定义它的函数“继承”上下文。

此示例中的常规函数​​将创建自己的上下文——windowundefined(在严格模式下),因此,要使相同的代码与函数表达式一起正常工作,必须手动绑定上下文: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”之间的意义。

相关文章

标签: this  箭头函数  
x
  • 站长推荐