面试题：JavaScript中复杂场景下this的指向分析与修正

Question

在一个JavaScript类库开发场景中，有如下代码： ```javascript class MyLibrary { constructor() { this.data = []; this.fetchData = function() { setTimeout(() => { // 假设这里通过AJAX获取数据并更新this.data // 实际代码中会使用如fetch等方式 this.data.push('new data'); console.log(this.data); }, 1000); } } } const library = new MyLibrary(); library.fetchData(); ``` 现在需要将`setTimeout`中的箭头函数替换为普通函数，同时保证`this.data`能正确更新和访问。请修改代码，并详细解释修改前后`this`指向的变化以及为什么要这样修改，还需要说明在更复杂的类库调用嵌套场景下，如何确保`this`指向始终正确。

Answer 1

修改后的代码如下：

class MyLibrary {
    constructor() {
        this.data = [];
        this.fetchData = function() {
            const self = this;
            setTimeout(function() {
                // 假设这里通过AJAX获取数据并更新self.data
                // 实际代码中会使用如fetch等方式
                self.data.push('new data');
                console.log(self.data);
            }, 1000);
        }
    }
}

const library = new MyLibrary();
library.fetchData();

修改前后this指向的变化

• 修改前：使用箭头函数时，箭头函数本身没有自己的this，它会捕获其所在上下文的this值，在fetchData方法中，箭头函数捕获的this就是MyLibrary实例的this，所以可以直接访问和更新this.data。
• 修改后：使用普通函数时，普通函数有自己独立的this。在setTimeout回调中，this指向的是全局对象（在浏览器环境中是window），而不是MyLibrary实例。为了能正确访问和更新MyLibrary实例的data属性，通过const self = this将MyLibrary实例的this保存到self变量中，在普通函数回调中使用self来访问和更新data属性。

在复杂类库调用嵌套场景下确保this指向正确的方法

1. 使用bind方法：在定义函数时，使用bind方法将函数的this绑定到特定对象。例如：

class MyLibrary {
    constructor() {
        this.data = [];
        this.fetchData = function() {
            setTimeout(function() {
                this.data.push('new data');
                console.log(this.data);
            }.bind(this), 1000);
        }
    }
}

这里bind(this)将setTimeout回调函数的this绑定到MyLibrary实例。

2. 使用ES6类的方法：在ES6类中，方法内部的this默认指向类的实例。可以将复杂操作封装成类的方法，确保this指向正确。例如：

class MyLibrary {
    constructor() {
        this.data = [];
        this.fetchData = function() {
            setTimeout(this.updateData.bind(this), 1000);
        }
    }
    updateData() {
        this.data.push('new data');
        console.log(this.data);
    }
}

这样在updateData方法中，this始终指向MyLibrary实例。

3. 使用self或that变量：与上述修改后的代码类似，在外部作用域保存this，在内部回调函数中使用保存的变量。这种方法简单直观，适用于各种嵌套场景。