TypeError: Cannot assign to read only property ‘xxx‘ of object ‘#＜Object＞‘

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

问题描述

在JavaScript开发过程中，开发者经常会遇到 TypeError: Cannot assign to read only property 'xxx' of object '#<Object>' 的错误提示。该错误通常表示在尝试修改一个只读属性时发生的语法错误。

原因分析

1. 使用 Object.freeze() 方法：

   • Object.freeze() 方法会冻结一个对象，使其不可扩展，并且其所有现有属性都变得不可配置（即不能删除，也不能修改其属性描述符，包括 writable 属性）。

2. 使用 readonly 关键字（ES2020）：

   • 在ES2020中，引入了 readonly 关键字，用于声明只读属性。一旦属性被标记为 readonly，其值就不能被重新赋值。

3. 全局对象的只读属性：

   • 尝试修改全局对象（如 window 对象）上的只读属性也会导致该错误。这些属性通常在严格模式下被冻结。

解决方案

1. 使用 Object.freeze() 的替代方案

如果不需要完全冻结对象，可以考虑使用 Object.seal() 或仅冻结需要冻结的属性。

const obj = {name: "Alice",age: 30
};// 使用 Object.seal() 冻结对象
Object.seal(obj);// obj.name = "Bob"; // 这将抛出 TypeError: Cannot assign to read only property 'name' of object

2. 使用 readonly 关键字

在ES2020及以后的版本中，可以使用 readonly 关键字来声明只读属性。

const obj = {get name() {return "Alice";}
};// obj.name = "Bob"; // 这将抛出 TypeError: Cannot assign to read only property 'name' of object

3. 避免修改全局对象的只读属性

在使用全局对象时，确保这些属性不是只读的。如果必须修改，可以考虑不使用全局对象或重新设计代码结构。

// 避免直接修改 window 对象的属性
// window.readOnlyProperty = "new value"; // 这将抛出 TypeError

实战案例

假设有一个对象被 Object.freeze() 冻结：

const obj = Object.freeze({ name: "Alice" });
obj.name = "Bob"; // 抛出 TypeError: Cannot assign to read only property 'name' of object

解决方案是移除 Object.freeze()：

const obj = { name: "Alice" };
obj.name = "Bob"; // 正确

总结

TypeError: Cannot assign to read only property 'xxx' of object '#<Object>' 错误通常是由于尝试修改一个被冻结或标记为只读的对象属性引起的。通过以下方法可以有效避免该问题：

1. 使用 Object.freeze() 的替代方案：如 Object.seal() 或仅冻结需要冻结的属性。
2. 使用 readonly 关键字：在ES2020及以后的版本中，使用 readonly 关键字声明只读属性。
3. 避免修改全局对象的只读属性：确保全局对象属性不是只读的，或在严格模式下谨慎使用。

通过这些方法，开发者可以提高代码的健壮性，减少运行时错误，提升应用的稳定性和用户体验。建议开发者定期检查和测试代码，确保所有对象属性的可修改状态符合预期。