面试题：JavaScript中this在跨作用域DOM操作场景下的应用

Question

在一个复杂的JavaScript模块中，有一个函数A用于获取DOM元素并添加事件监听器。函数A内部定义了函数B用于处理事件逻辑。由于作用域的复杂性，在函数B中正确获取this指向触发事件的DOM元素变得困难。请描述如何通过合适的方法确保函数B中的this能正确指向触发事件的DOM元素，并给出示例代码（可以结合bind、call、apply等方法或ES6箭头函数等方式来实现）。

Answer 1

1. 使用bind方法：
   • bind方法会创建一个新的函数，在这个新函数中，this被绑定到指定的值。
   • 示例代码如下：

function A() {
    const domElement = document.getElementById('myButton');
    function B() {
        console.log(this === domElement);
    }
    domElement.addEventListener('click', B.bind(domElement));
}
A();

2. 使用call或apply方法：
   • 在事件处理函数被调用时，可以使用call或apply来设置this的值。
   • 示例代码如下：

function A() {
    const domElement = document.getElementById('myButton');
    function B() {
        console.log(this === domElement);
    }
    domElement.addEventListener('click', function () {
        B.call(domElement);
    });
}
A();

3. 使用ES6箭头函数：
   • 箭头函数没有自己的this，它的this继承自外层作用域。
   • 示例代码如下：

function A() {
    const domElement = document.getElementById('myButton');
    domElement.addEventListener('click', () => {
        console.log(this === domElement);
    });
}
A();