从普通函数迁移至箭头函数：如何让箭头函数获取this指向？

嘿，我来帮你搞定这个箭头函数访问this的问题！

首先得搞清楚为啥箭头函数拿不到this——箭头函数本身没有自己的this，它的this是从外层词法作用域继承来的。而Jest里的it回调用普通函数时，Jest会自动把测试上下文绑定到这个函数的this上；但如果用箭头函数，Jest没法给它绑定上下文，所以它的this就会指向外层（比如describe的箭头函数的this，在严格模式下就是undefined）。

你之前尝试的两种方法之所以没用，原因是：

• () => {}.bind(this)无效：箭头函数的this是固定不可变的，bind、call、apply都没法修改它的this指向；
• ({ context: this }) => {}无效：这种写法需要你主动调用箭头函数时把this作为参数传进去，但it的回调是Jest调用的，它不会帮你传递这个参数，所以自然拿不到。

下面给你两个可行的解决方案：

方案1：提前缓存测试上下文 #

如果一定要在箭头函数里使用原来的this，可以先在普通函数的回调里把this存到一个变量中，后续箭头函数就能通过这个变量访问上下文：

describe('Currency converter', () => {
  let testCtx;

  it('should be shown on the page', function () {
    // 把Jest绑定的测试上下文存起来
    testCtx = this;

    // 箭头函数通过testCtx访问原来的this
    const logContext = () => {
      console.log(testCtx); // 这里就能拿到你要的{ bla: ... }内容啦
    };
    logContext();
  });
});

方案2：改用Jest全局对象（更推荐） #

其实Jest测试里大部分需要通过this访问的功能，都有全局替代方案，完全不用依赖this：

• 比如原来用this.timeout(10000)设置超时，可以换成jest.setTimeout(10000)；
• 如果是要访问beforeEach里定义的变量，直接把变量放在describe的作用域里即可，不用挂到this上：

describe('Currency converter', () => {
  let testData;

  beforeEach(() => {
    testData = '模拟测试数据';
  });

  // 直接用箭头函数，访问作用域内的变量即可
  it('should be shown on the page', () => {
    console.log(testData); // 正常访问测试数据
    expect(true).toBe(true); // 全局的expect直接调用
  });
});

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