如何修复构造函数中的"Uncaught TypeError: Cannot read properties of undefined (reading '0')"错误

错误原因 #

1. this.key未定义：构造函数中使用this.key，但你创建的Com实例并没有key属性，全局变量key和实例的this.key是两个完全不同的东西，因此访问this.key[0]会抛出undefined错误。
2. 参数传递错误：coms是一个对象，键为com1而非0，所以coms[0]是undefined；同时构造函数设计为接收8个单独参数，但你传入的是一个数组，导致除第一个参数外其余参数全为undefined，逻辑完全不符合预期。

修正后的代码（优化版） #

// 获取所有class为key的DOM元素
const keys = document.getElementsByClassName("key");

// 重构构造函数，接受翻译样式数组作为参数
function Com(translations) {
  // 遍历数组批量设置样式，同时做边界判断避免报错
  translations.forEach((translateVal, index) => {
    if (keys[index]) {
      keys[index].style.translate = translateVal;
    }
  });
}

// 样式配置对象
const coms = {
  com1: [
    'translate(290px, 290px)',
    'translate(290px, 290px)',
    'translate(290px, 290px)',
    'translate(0, 0)',
    'translate(0, -290px)',
    'translate(-290px, 0)',
    'translate(-290px, -290px)',
    'translate(290px, 290px)'
  ],
}

// 正确传入样式数组
const temp = new Com(coms.com1); 

更符合OOP封装性的版本 #

如果希望构造函数不依赖全局变量，可以将DOM元素作为参数传入：

function Com(keys, translations) {
  translations.forEach((translateVal, index) => {
    if (keys[index]) {
      keys[index].style.translate = translateVal;
    }
  });
}

const keys = document.getElementsByClassName("key");
const coms = {
  com1: [
    'translate(290px, 290px)',
    'translate(290px, 290px)',
    'translate(290px, 290px)',
    'translate(0, 0)',
    'translate(0, -290px)',
    'translate(-290px, 0)',
    'translate(-290px, -290px)',
    'translate(290px, 290px)'
  ],
}

const temp = new Com(keys, coms.com1); 

关键改进点 #

• 移除错误的this.key引用，直接使用全局DOM元素或传入的元素集合
• 将构造函数参数改为数组形式，避免冗余的8个参数，用forEach实现批量赋值
• 修正调用时的参数错误，使用coms.com1而非coms[0]
• 添加边界判断if (keys[index])，防止DOM元素数量不足时出现新的报错

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