如何在Jest测试用例中Mock this关键字？解决函数this指向问题

问题代码 #

window.object_name = {
    //defined function
    testFunction: function(arg1,arg2){
    
    },
    // 注：原代码此处缺少逗号，会引发语法错误，已补全
    testFunction_2 : function(){
        //calling testFunction in anotherfunction using 'this' keyword
        this.testFunction();
    }
}

核心原因 #

testFunction_2调用时，this的指向由调用方式决定，常见异常场景包括：

• 单独提取方法调用（如const fn = object_name.testFunction_2; fn()）
• 作为异步回调、定时器回调使用
• 被其他上下文强制绑定了this

解决办法 #

1. 提前保存上下文变量

在方法内部先把对象自身的this存为变量，后续用该变量调用方法：

window.object_name = {
    testFunction: function(arg1,arg2){
    
    },
    testFunction_2 : function(){
        const self = this; // 保存当前对象的上下文
        self.testFunction();
        // 异步场景也适用
        setTimeout(function(){
            self.testFunction();
        }, 1000);
    }
}

2. 使用ES6箭头函数

箭头函数会继承外层作用域的this，适合内部回调场景：

window.object_name = {
    testFunction: function(arg1,arg2){
    
    },
    testFunction_2 : function(){
        // 直接调用场景
        (() => {
            this.testFunction();
        })();
        
        // 异步回调场景
        setTimeout(() => {
            this.testFunction();
        }, 1000);
    }
}

3. 显式绑定this到对象

调用testFunction_2时，用bind/call/apply强制绑定上下文：

// 即时调用绑定
object_name.testFunction_2.call(object_name);
// 提前绑定后调用
const boundFn = object_name.testFunction_2.bind(object_name);
boundFn();

4. 规范方法调用方式

始终通过对象直接调用方法，避免单独提取方法执行：

// 正确调用
object_name.testFunction_2();
// 错误调用（会导致this指向全局或undefined）
const fn = object_name.testFunction_2;
fn();

内容的提问来源于stack exchange，提问作者keerthi