深入探讨防抖函数中的 this 上下文

深入剖析防抖函数中的 `this` 上下文

最近我在研究防抖函数实现的时候，发现一个耗费脑子的问题，出现了令我困惑的问题。接下来，我将通过代码示例，深入探究这些现象背后的原理。

示例代码

function debounce(fn, delay) {
    let timer = null;
    console.log(1, 'this:', this);
    return function(...args) {
        console.log(2, 'this:', this);
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            console.log(3, 'this:', this);  
            fn.apply(this, args);
        }, delay);
    };
}

function debounce2(fn, delay) {  
    let timer = null;
    console.log(11, 'this:', this);
    return function(...args) {  
        console.log(22, 'this:', this);
        if (timer) clearTimeout(timer);
        timer = setTimeout(function() {
            console.log(33, 'this:', this);
            fn.apply(this, args);
        }, delay);
    };
}

let obj = {
    name: 'John',
    sayName: function() {
        console.log(this.name);
    },
    debouncedSayName: debounce(function() {
        this.sayName();
    }, 300),
    debouncedSayName2: debounce2(function() {
        this.sayName();
    }, 300)
};

obj.debouncedSayName();
obj.debouncedSayName2();

现象与问题

运行上述代码后（假设在浏览器环境中），会得到如下输出：
在这里插入图片描述

这里有一个顺序问题让我困惑了一下：

顺序问题：为什么 1 打印完成后没有紧接着打印 2，而是先打印了 11 ？并且为什么输出顺序不是 2 -> 3 -> 22 -> 33 呢？

为了彻底搞清楚这些现象，下面是对知识点的解析。

关键知识点解析

1. 函数定义时的 `this`（打印 `1` 和 `11` 处）

在 debounce 和 debounce2 函数的定义里，console.log(1, 'this:', this) 和 console.log(11, 'this:', this) 中的 this 指向取决于函数的调用方式。由于这两个函数是直接定义在全局作用域下的，并没有通过某个对象来调用，所以在 JavaScript 中，this 默认指向全局对象 Window（在 Node.js 环境中则是 global）。

2. 内部返回函数中的 `this`（打印 `2` 和 `22` 处）

在 return 的匿名函数中，console.log(2, 'this:', this) 和 console.log(22, 'this:', this) 里的 this 指向是由调用时的上下文决定的。
当我们执行 obj.debouncedSayName() 和 obj.debouncedSayName2() 时，这两个函数是作为 obj 对象的方法被调用的。根据 JavaScript 的规则，当函数作为对象的方法调用时，this 会指向调用该方法的对象，所以这两个地方的 this 都指向 obj。

3. 定时器中的 `this`（打印 `3` 和 `33` 处）

箭头函数中的 this（console.log(3, 'this:', this)）：在 debounce 函数的定时器回调中使用了箭头函数。箭头函数有一个重要的特性，就是它不会绑定自己的 this，而是继承自定义它的外部函数（这里是匿名函数）的 this。因此，这里的 this 仍然指向 obj。
普通函数中的 this（console.log(33, 'this:', this)）：在 debounce2 函数的定时器回调中使用的是普通函数。普通函数的 this 在调用时会动态绑定，而在定时器中，普通函数的 this 默认指向全局对象 Window（在 Node.js 环境中是 timeout）。

顺序问题解析

观察输出顺序：1 -> 11 -> 2 -> 22 -> 3 -> 33

为什么不是 `1 -> 2` ？

当我们定义 obj 对象时，会通过 debounce 和 debounce2 函数生成 debouncedSayName 和 debouncedSayName2 属性。在这个过程中，debounce 和 debounce2 函数会被调用，于是就会执行到 console.log(1, 'this:', this) 和 console.log(11, 'this:', this)。而 debounce 和 debounce2 返回的内部函数，要等到调用 obj.debouncedSayName() 和 obj.debouncedSayName2() 时才会执行。

为什么不是 `2 -> 3 -> 22 -> 33` ？

JavaScript 是单线程的编程语言，而 setTimeout 是异步操作。当遇到 setTimeout 时，它会将回调函数推入事件队列，等待主线程的同步任务全部执行完毕后再执行。因此，debouncedSayName 和 debouncedSayName2 的同步部分会先执行，分别打印 2 和 22，然后才会将定时器的回调函数放入事件队列。最后，定时器的回调函数依次执行，分别打印 3 和 33。