本文详解为何矩阵加减法函数在首次调用后失效，并指出根本原因是变量名与函数名冲突导致函数被意外覆盖，提供清晰的修复方案与最佳实践。
在您提供的矩阵计算器代码中，add() 和 sub() 函数在第一次点击按钮后能正常运行，但后续点击却报错（如 add is not a function 或直接无响应）。问题并非出在 this 关键字使用不当，而是一个更基础却极易被忽视的 JavaScript 命名冲突问题。
核心原因在于以下两行代码：
add = parseInt(this[x]) + parseInt(this[y]); // ❌ 覆盖了全局函数 add sub = parseInt(this[x]) - parseInt(this[y]); // ❌ 覆盖了全局函数 sub
当 JavaScript 执行到 add = ... 时，由于未使用 let、const 或 var 声明，引擎会在全局作用域（window）中隐式创建一个同名变量 add，其值为一个数字。这直接覆盖了原本定义的 function add() —— 此后 add 不再是函数，而是一个数值，因此再次点击 + 按钮时，onclick="add()" 就会尝试调用一个数字，导致运行时错误或静默失败。
同样，sub 函数也在 sub() 内部被同名赋值覆盖，造成相同后果。
✅ 正确做法是：为计算结果使用语义清晰且不与函数名冲突的局部变量名。推荐使用 let 显式声明块级变量：
function add() {
o.textContent = ''; // 清空输出区（注意：textContent 比 innerHTML 更安全）
const t = r * c; // 重新计算当前行列数下的总元素数，避免依赖旧 t
for (let i = 1; i <= t; i++) {
const aVal = parseInt(document.getElementById("a" + i).value) || 0;
const bVal = parseInt(document.getElementById("b" + i).value) || 0;
const result = aVal + bVal; // ✅ 使用独立变量名 result
o.innerHTML += ``;
}
}
function sub() {
o.textContent = '';
const t = r * c;
for (let i = 1; i <= t; i++) {
const aVal = parseInt(document.getElementById("a" + i).value) || 0;
const bVal = parseInt(document.getElementById("b" + i).value) || 0;
const result = aVal - bVal; // ✅ 同样使用 result
o.innerHTML += ``;
}
}? 其他关键优化建议：
- 避免 innerHTML += 频繁拼接：每次拼接都会触发 DOM 重排，性能差且易引入 XSS 风险（若输入含恶意 HTML）。推荐先构建字符串或使用 DocumentFragment。
- 添加输入校验与默认值：parseInt(...) 可能返回 NaN，应使用 || 0 提供兜底。
- 使用 readonly 属性：输出框应禁止用户编辑，提升体验。
- 动态生成 input 时注意 ID 唯一性：当前 reg() 函数在行列变化时重复添加 input，但未清理旧元素，可能导致 ID 冲突（如多个 a1）。应在 reg() 开头清空容器：p1.innerHTML = ''。
- 启用严格模式：在
? 总结：函数名是宝贵的标识符资源，切勿用作临时变量名。坚持「函数名描述行为，变量名描述数据」的原则，并始终使用 let/const 显式声明变量，即可彻底规避此类“执行一次就失效”的陷阱。
