增量游戏成就系统报错：Cannot set properties of undefined (setting '1')

关于成就系统报错：Cannot set properties of undefined (setting '1') #

这个错误的核心原因是调用earn函数时，this的指向并非你的成就对象，导致this.awarded为undefined，无法设置数组元素。

常见场景与修复方式 #

• 直接调用函数的错误：如果直接写earn(1)而非通过成就对象调用，this会指向全局对象（浏览器环境下为window），此时this.awarded不存在。
  修复示例：

  // 假设你的成就对象定义如下
  const achievements = {
    awarded: [false, false],
    earn: function(index) {
      this.awarded[index] = true;
      display.updateAchievements();
    }
  };
  
  // 正确调用方式
  achievements.earn(1);
  

• 事件监听中的this丢失：如果把earn直接绑定到按钮点击事件，this会指向触发事件的DOM元素，而非成就对象。
  修复示例：

  // 方式1：用箭头函数保留正确的this指向
  document.querySelector('.earn-btn').addEventListener('click', () => {
    achievements.earn(1);
  });
  
  // 方式2：用bind绑定成就对象到函数的this
  document.querySelector('.earn-btn').addEventListener('click', achievements.earn.bind(achievements, 1));
  

关于点击加分后分数始终为0的问题 #

无报错的情况下，大概率是变量作用域错误或未更新页面显示，可按以下步骤排查：

1. 检查分数变量的作用域：如果分数变量在加分函数内部声明，每次调用都会重置为0，示例：

   // 错误写法
   function addScore() {
     let score = 0; // 每次调用都重新初始化
     score += 10;
   }
   

   修复：将分数变量声明在函数外部，确保作用域正确：

   let score = 0; // 声明在全局或合适的作用域内
   
   function addScore() {
     score += 10;
     updateScoreDisplay(); // 必须调用更新显示的函数
   }
   

2. 确认加分函数是否被执行：在加分函数内添加日志，验证点击时是否触发：

   function addScore() {
     console.log('加分函数执行了'); // 查看控制台是否有该输出
     score += 10;
     updateScoreDisplay();
   }
   

3. 检查页面显示是否更新：修改分数后，必须手动更新DOM元素内容，否则页面不会变化：

   function updateScoreDisplay() {
     const scoreElement = document.getElementById('score');
     scoreElement.textContent = score; // 将最新分数渲染到页面
   }
   

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