面试题：JavaScript事件处理中的this上下文：复杂场景下的this绑定

Question

假设有一个对象`obj`，其内部有一个方法`setupEvent`用于为按钮添加点击事件，代码如下：`const obj = { data: '初始数据', setupEvent: function() { const btn = document.getElementById('btn'); function innerClickHandler() { console.log(this.data); } btn.addEventListener('click', innerClickHandler); } };`<button id='btn'>点击</button> 当点击按钮时，`innerClickHandler`函数中的`this`指向哪里？如何修改代码，使得点击按钮时能够正确输出`obj`的`data`属性值？

Answer 1

1. innerClickHandler函数中的this指向： 在上述代码中，innerClickHandler函数中的this指向window（在严格模式下指向undefined）。这是因为addEventListener添加的事件处理函数中的this，默认绑定到触发事件的元素（如果没有在调用addEventListener时通过addEventListener(type, listener, options)的options参数中的capture或useCapture等设置改变this指向的话），而这里在全局环境下调用，this指向全局对象window。

2. 修改代码使得点击按钮时能够正确输出obj的data属性值的方法：

   • 使用箭头函数：

   const obj = {
       data: '初始数据',
       setupEvent: function () {
           const btn = document.getElementById('btn');
           const that = this;
           btn.addEventListener('click', () => {
               console.log(that.data);
           });
       }
   };
   

   这里利用箭头函数没有自己的this，它的this继承自外层作用域的特性，外层setupEvent函数中的this指向obj，所以箭头函数中的this也指向obj，从而可以正确输出obj的data属性值。

   • 使用bind方法：

   const obj = {
       data: '初始数据',
       setupEvent: function () {
           const btn = document.getElementById('btn');
           function innerClickHandler() {
               console.log(this.data);
           }
           btn.addEventListener('click', innerClickHandler.bind(this));
       }
   };
   

   通过bind方法将innerClickHandler函数的this绑定到setupEvent函数中的this（即obj），这样在点击按钮时，innerClickHandler函数中的this就会指向obj，可以正确输出obj的data属性值。