对象字面量中箭头函数调用同对象箭头函数报错排查

你出错的核心原因是箭头函数的this指向规则：对象字面量中定义的箭头函数不会绑定当前对象作为this，而是继承外层作用域的this（这里外层是全局作用域，this指向window或undefined，取决于严格模式），所以this.resetConsent()里的this根本不是featureGoogleAnalytics对象，自然找不到这个方法。

有两种简单的解决方式：

方式一：把箭头函数改成普通函数 #

将resetConsent和init都改为普通函数声明，这样函数内部的this会自动指向当前对象：

const featureGoogleAnalytics = {
  gTagId: 'G-XXXXXXX', // Your Google Analytics ID

  // 改成普通函数
  resetConsent() { // eslint-disable-line no-unused-vars
    localStorage.removeItem('googleAnalyticsConsent');
    // ...其他逻辑
    return false;
  },

  /**
   * Initializes feature Google Analytics
   * Supposed to run after pageload, callback for $( () => { ... } );
   */
  // 改成普通函数
  init() { 
    this.resetConsent();
    // ...其他逻辑
  },
};

方式二：直接通过对象名调用方法 #

如果一定要保留箭头函数，可以直接用对象本身来调用resetConsent，跳过this的问题：

const featureGoogleAnalytics = {
  gTagId: 'G-XXXXXXX', // Your Google Analytics ID

  resetConsent: () => { // eslint-disable-line no-unused-vars
    localStorage.removeItem('googleAnalyticsConsent');
    // ...其他逻辑
    return false;
  },

  init: () => { 
    // 直接用对象名调用
    featureGoogleAnalytics.resetConsent();
    // ...其他逻辑
  },
};

推荐用第一种方式，更符合对象方法的常规写法，也能避免后续其他方法出现类似的this问题。

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