javascript 箭头函数和对象字面量

最新推荐文章于 2024-06-14 10:04:11 发布

且听真言

最新推荐文章于 2024-06-14 10:04:11 发布

阅读量820

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Web前端 javascript ES6 深入理解JavaScript 文章标签：箭头函数和对象字面量与this上下文有关的问题

本文链接：https://blog.youkuaiyun.com/zhangying1994/article/details/86654402

Web前端同时被 3 个专栏收录

66 篇文章

订阅专栏

javascript

60 篇文章

订阅专栏

ES6

55 篇文章

订阅专栏

本文探讨了JavaScript中箭头函数的this值在创建时确定的特性，导致按钮点击事件中，clicked状态未如预期存储在button对象上，而是存储在全局window对象上。这一特性可能导致意料之外的行为和bug。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于this值在箭头函数创建时确定的，所以会导致一些看似奇怪的行为。看下面代码，因为只有一个按钮，因此可以假设不需要构造函数。直接使用对象字面量。

 <button id="testClick">Click Me!</button>
    <script>
    if (this === window) {
      //全局代码中的this指向全局window对象
      console.log('this === window');
    }
    var button = {
      clicked: false,
      //箭头函数是对象字面量的属性
      click:() =>{
        this.clicked = true;
        //验证是否单击按钮
        if (button.clicked) {
          console.log('The button has been clicked');
        }
        //箭头函数中的this指向全局window对象
        if (this === window) {
          console.log('In arrow function this === window');
        }
        //Clicked属性存储在window对象上。
        if (window.clicked) {
          console.log('clicked is stored in window');
        }
      }
    }
    var elem = document.getElementById('testClick');
    elem.addEventListener('click', button.click);
  </script>

上述代码中发现button对象无法跟踪clicked的状态。
在全局代码中编写如下代码确认this的值。

if (this === window) {
//全局代码中的this指向全局window对象
console.log('this === window');
}

因此可以确定全局代码中的this指向全局window对象。
在全局代码中定义对象字面量，在字面量中定义箭头函数，那么箭头函数内的this执行全局window对象。
在button对象字面量中click属性是箭头函数：

var button = {
  clicked: false,
  //箭头函数是对象字面量的属性
  click:() =>{
    this.clicked = true;
    //验证是否单击按钮
    if (button.clicked) {
      console.log('The button has been clicked');
    }
    //箭头函数中的this指向全局window对象
    if (this === window) {
      console.log('In arrow function this === window');
    }
    //Clicked属性存储在window对象上。
    if (window.clicked) {
      console.log('clicked is stored in window');
    }
  }
}

回顾一下规则：箭头函数在创建时确定了this的指向。由于click箭头函数是作为对象字面量的属性定义的，对象字面量在全局代码中定义，因此，箭头函数内部this值与全局代码的this值相同。

//箭头函数中的this指向全局window对象

if (this === window) {

console.log('In arrow function this === window');

}

可以看出全局代码的this指向全局window对象。因此，clicked属性被定义在全局window对象上，而不在button上。最后if判断可以确定clicked属性赋值在window对象上：

//Clicked属性存储在window对象上。

if (window.clicked) {

console.log('clicked is stored in window');

}

上述代码展示了箭头函数可能带来的副作用，会可能带来一些bug。

参考《JavaScript忍者秘籍》