当前位置:首页 > 文章列表 > 文章 > 前端 > 防止JavaScript原型链属性被覆盖的方法有以下几种:1.使用Object.defineProperty定义不可写属性通过Object.defineProperty可以设置属性为只读,防止被意外覆盖。functionMyClass(){}Object.defineProperty(MyClass.prototype,'myProp',{value:'originalvalue',writabl
防止JavaScript原型链属性被覆盖的方法有以下几种:1.使用Object.defineProperty定义不可写属性通过Object.defineProperty可以设置属性为只读,防止被意外覆盖。functionMyClass(){}Object.defineProperty(MyClass.prototype,'myProp',{value:'originalvalue',writabl
本文深入探讨了JavaScript中如何防止原型链上的属性被覆盖,确保代码的稳定性和健壮性。核心在于使用`Object.defineProperty`方法,通过设置`writable: false`来阻止实例修改或“遮蔽”原型属性。文章详细阐述了`Object.defineProperty`的具体步骤和注意事项,包括`configurable`属性的影响以及严格模式的重要性。此外,还对比分析了`Object.freeze()`和`Object.seal()`对原型链属性的影响与区别,帮助开发者根据不同的控制需求选择合适的方法,从而构建更安全、更易维护的JavaScript代码。掌握这些技巧,能有效提升API的稳定性和代码的可预测性。
要让原型链上的属性不可被实例覆盖,必须使用Object.defineProperty并将writable设为false;1. 使用Object.defineProperty定义原型属性;2. 设置writable: false以阻止赋值修改;3. 可选设置configurable: false以锁定属性描述符;4. 在严格模式下尝试修改会抛出TypeError,非严格模式下静默失败;5. 实例无法创建同名自身属性来遮蔽该原型属性,从而确保属性的稳定性和代码的健壮性。
在JavaScript中,要让原型链上的属性不可被实例覆盖(或者说,让实例无法通过赋值操作来创建同名自身属性从而“遮蔽”原型属性),核心方法是利用Object.defineProperty
来定义这些原型属性,并将其writable
特性设置为false
。

解决方案
如果你想在原型上定义一个属性,并且不希望实例能够通过简单的赋值操作来修改或“覆盖”它,你需要使用Object.defineProperty
。这个方法允许你对属性的各种特性进行精细控制,其中就包括writable
(可写性)。当writable
被设置为false
时,该属性就不能通过赋值运算符重新赋值。
function MyClass() { // 构造函数 } // 在原型上定义一个不可覆盖的属性 Object.defineProperty(MyClass.prototype, 'immutableProp', { value: '这是一个不可修改的原型属性', writable: false, // 关键:设置为不可写 enumerable: true, // 可枚举(可选,根据需求) configurable: false // 不可配置(可选,设置为true则允许后续修改writable等特性,设置为false则彻底锁定) }); const instance1 = new MyClass(); const instance2 = new MyClass(); console.log(instance1.immutableProp); // 输出: 这是一个不可修改的原型属性 // 尝试修改这个属性 try { instance1.immutableProp = '尝试修改'; // 在非严格模式下会静默失败,在严格模式下会抛出TypeError console.log(instance1.immutableProp); // 仍然输出: 这是一个不可修改的原型属性 } catch (e) { console.error("修改失败,因为属性是不可写的:", e.message); } // 验证实例上是否创建了同名属性 console.log(Object.prototype.hasOwnProperty.call(instance1, 'immutableProp')); // 输出: false
在这个例子里,instance1.immutableProp = '尝试修改'
这行代码并不会在 instance1
自身上创建 immutableProp
属性,也不会修改原型上的 immutableProp
。原型上的属性依然保持原样,这正是我们想要达到的“不可覆盖”效果。

为什么我们需要让原型链上的属性不可覆盖?
这其实是个很有意思的设计选择,在我看来,它主要服务于几个核心目的。首先,是为了维护API的稳定性与一致性。想象一下,你开发了一个库或者一个框架,其中有一些核心方法或者常量是定义在原型上的,它们是整个系统运行的基础。如果你允许用户随意地在实例上“覆盖”这些属性,那么每个实例的行为就可能变得不可预测,甚至导致程序逻辑混乱。这就像是给你的工具箱里最关键的螺丝刀上了锁,确保它永远是那个样子,不会被某个粗心的使用者不小心磨平了头。
其次,这关乎代码的健壮性和可维护性。当一个属性被声明为不可覆盖时,开发者就能清楚地知道,这个属性的行为是固定的,不需要担心某个地方的赋值操作会意外改变它的含义。这减少了潜在的bug,也让未来的代码重构变得更加安全。我个人在写一些核心模块时,如果某个原型方法是内部逻辑的基石,我通常会倾向于让它“固若金汤”,避免外部的干扰。

最后,它也能在一定程度上提供轻量级的“安全”保障。虽然JavaScript本身没有严格的访问控制修饰符,但通过writable: false
,我们至少能阻止外部代码对特定属性的意外或恶意修改,确保某些核心数据或行为的完整性。这并不是什么高强度的安全措施,但在防止一些常见的误操作方面,确实挺管用的。说白了,就是让你的代码更“皮实”一点。
使用Object.defineProperty设置不可覆盖属性的具体步骤和注意事项
Object.defineProperty
是JavaScript中一个非常强大的方法,它允许我们精确地定义或修改一个对象的属性。要让原型链上的属性不可覆盖,关键在于理解并正确设置其属性描述符。
具体步骤如下:
确定目标对象:对于原型链上的属性,目标对象通常是构造函数的
prototype
属性,例如MyClass.prototype
。选择属性名:你想要定义或修改的属性的名称,比如
'immutableProp'
。配置属性描述符:这是一个对象,里面包含了一系列特性(attributes)。
value
: 属性的实际值。这是最直观的部分,就是你希望这个属性是什么。writable
: 核心。设置为false
。这意味着属性的值不能被赋值运算符 (=
) 改变。如果尝试在非严格模式下修改它,操作会静默失败;在严格模式下,会抛出TypeError
。enumerable
: 设置为true
或false
。true
表示该属性可以通过for...in
循环或Object.keys()
枚举出来;false
则不能。这取决于你是否希望这个属性是“可见”的。通常,如果你希望它像普通属性一样被发现,就设为true
。configurable
: 设置为true
或false
。false
:一旦设置为false
,这个属性的描述符就不能再被修改了(包括writable
、enumerable
)。同时,该属性也不能被删除。这意味着你一旦定义了它,就几乎是“板上钉钉”了。true
:允许后续通过defineProperty
再次修改其writable
、enumerable
等特性,也可以删除该属性。
代码示例与注意事项:
'use strict'; // 开启严格模式,以便看到错误提示 function Gadget() {} Object.defineProperty(Gadget.prototype, 'version', { value: '1.0.0', writable: false, enumerable: true, configurable: false // 一旦设置为false,这个属性就不能被删除,也不能改变其writable状态 }); Object.defineProperty(Gadget.prototype, 'secretKey', { value: 'shhh', writable: false, enumerable: false, // 不可枚举,避免被for...in发现 configurable: true // 可配置,意味着未来可以修改其writable状态或删除它 }); const myGadget = new Gadget(); console.log(myGadget.version); // "1.0.0" console.log(myGadget.secretKey); // "shhh" // 尝试修改 version (writable: false, configurable: false) try { myGadget.version = '2.0.0'; } catch (e) { console.error("修改 version 失败:", e.message); // 在严格模式下会抛出 TypeError } console.log(myGadget.version); // 仍然是 "1.0.0" // 尝试删除 version (configurable: false) try { delete myGadget.version; // 尝试删除实例上的属性 delete Gadget.prototype.version; // 尝试删除原型上的属性 } catch (e) { console.error("删除 version 失败:", e.message); // 严格模式下删除不可配置属性会抛出 TypeError } console.log(myGadget.version); // 仍然是 "1.0.0" // 尝试修改 secretKey (writable: false, configurable: true) try { myGadget.secretKey = 'new_shhh'; } catch (e) { console.error("修改 secretKey 失败:", e.message); // 严格模式下会抛出 TypeError } console.log(myGadget.secretKey); // 仍然是 "shhh" // 尝试重新定义 secretKey 的 writable 状态 (configurable: true) Object.defineProperty(Gadget.prototype, 'secretKey', { writable: true // 允许重新配置 }); myGadget.secretKey = 'new_shhh_now_writable'; console.log(myGadget.secretKey); // "new_shhh_now_writable"
注意事项:
- 严格模式的重要性:在非严格模式下,对不可写属性的赋值操作会静默失败,这可能导致难以发现的bug。强烈建议在需要这种精细控制的场景下使用严格模式。
configurable: false
的影响:一旦一个属性被设置为configurable: false
,它就不能再被删除,也不能再改变它的任何描述符(包括writable
、enumerable
和value
)。这意味着你做了一个“不可逆”的决定。所以,在使用这个特性时,需要非常确定你的设计。- 性能考量:虽然
defineProperty
提供了强大的控制力,但它比直接赋值要稍微复杂一些,在极度性能敏感的场景下可能需要权衡。不过,对于大多数应用而言,这点性能开销可以忽略不计。 - 继承与覆盖:这里说的“不可覆盖”是指实例无法通过赋值操作在自身创建同名属性来“遮蔽”原型属性。如果原型链上层有同名属性,下层仍然可以定义一个不可写的属性来遮蔽上层。但我们通常关注的是实例对原型属性的遮蔽。
Object.freeze和Object.seal对原型链属性的影响与区别
除了针对单个属性使用Object.defineProperty
来控制其可写性之外,JavaScript还提供了Object.freeze()
和Object.seal()
这两个方法,它们可以作用于整个对象,从而间接影响其上的属性,包括原型对象本身。理解它们与defineProperty
的区别,对于构建健壮的对象模型非常重要。
Object.freeze()
Object.freeze()
方法可以冻结一个对象。一个被冻结的对象是不可变的:
- 不能添加新属性。
- 不能删除已有属性。
- 不能修改已有属性的枚举性、可配置性或可写性。
- 不能修改已有属性的值。
如果我们将一个原型对象冻结,那么该原型对象上的所有属性都将变得不可写、不可配置,并且不能被删除。这意味着,任何实例都无法通过赋值操作来“覆盖”这些原型属性,因为原型上的属性本身都不能被修改了。
function FrozenGadget() {} FrozenGadget.prototype.version = '1.0.0'; FrozenGadget.prototype.serialNumber = 'ABC-123'; // 冻结原型对象 Object.freeze(FrozenGadget.prototype); const myFrozenGadget = new FrozenGadget(); console.log(myFrozenGadget.version); // "1.0.0" try { myFrozenGadget.version = '2.0.0'; // 尝试修改原型属性 } catch (e) { console.error("修改冻结原型属性失败:", e.message); // 严格模式下抛出 TypeError } console.log(myFrozenGadget.version); // 仍然是 "1.0.0" // 尝试添加新属性到原型 try { FrozenGadget.prototype.newProp = 'new'; } catch (e) { console.error("向冻结原型添加属性失败:", e.message); // 严格模式下抛出 TypeError } console.log(FrozenGadget.prototype.newProp); // undefined // 尝试删除原型属性 try { delete FrozenGadget.prototype.serialNumber; } catch (e) { console.error("删除冻结原型属性失败:", e.message); // 严格模式下抛出 TypeError } console.log(FrozenGadget.prototype.serialNumber); // "ABC-123"
Object.freeze()
是最严格的不可变性措施,它确保了对象本身及其直接属性的完整性。
Object.seal()
Object.seal()
方法可以封闭一个对象。一个被封闭的对象:
- 不能添加新属性。
- 不能删除已有属性。
- 可以修改已有属性的值(如果它们是可写的)。
- 不能改变已有属性的枚举性或可配置性(所有属性都变为不可配置)。
如果我们将一个原型对象封闭,那么该原型对象上的所有属性都将变得不可配置,并且不能被删除,但它们的值如果原本是可写的,则仍然可以被修改。
function SealedGadget() {} SealedGadget.prototype.status = 'active'; SealedGadget.prototype.id = 'XYZ-456'; // 封闭原型对象 Object.seal(SealedGadget.prototype); const mySealedGadget = new SealedGadget(); console.log(mySealedGadget.status); // "active" // 尝试修改 status (值可修改,但属性描述符不可配置) mySealedGadget.status = 'inactive'; // 这次可以修改成功,因为值是可写的 console.log(mySealedGadget.status); // "inactive" // 尝试添加新属性到原型 try { SealedGadget.prototype.newProp = 'new'; } catch (e) { console.error("向封闭原型添加属性失败:", e.message); // 严格模式下抛出 TypeError } console.log(SealedGadget.prototype.newProp); // undefined // 尝试删除原型属性 try { delete SealedGadget.prototype.id; } catch (e) { console.error("删除封闭原型属性失败:", e.message); // 严格模式下抛出 TypeError } console.log(SealedGadget.prototype.id); // "XYZ-456"
影响与区别总结:
- 粒度:
Object.defineProperty
:针对单个属性进行精细控制(可写性、可枚举性、可配置性)。Object.freeze()
/Object.seal()
:作用于整个对象,影响其所有直接属性。
- 可写性:
defineProperty
(writable: false
):使特定属性不可写。Object.freeze()
:使对象所有属性都不可写。Object.seal()
:不直接影响属性的可写性,如果属性本来是可写的,它仍然是可写的。
- 可配置性:
defineProperty
(configurable: false
):使特定属性不可配置。Object.freeze()
:使对象所有属性都不可配置。Object.seal()
:使对象所有属性都不可配置。
- 扩展性:
defineProperty
:不直接影响对象的扩展性(是否能添加新属性)。Object.freeze()
:使对象不可扩展(不能添加新属性)。Object.seal()
:使对象不可扩展(不能添加新属性)。
何时使用:
- 如果你只需要让原型上的某个特定属性不可被实例“覆盖”或修改,而其他属性保持默认行为,那么
Object.defineProperty
是最佳选择,它提供了最细粒度的控制。 - 如果你希望整个原型对象及其所有属性都变得完全不可变(不能修改、不能添加、不能删除),那么
Object.freeze()
是你的首选。这在设计一些核心、不允许任何变动的基类或工具类时非常有用。 - 如果你希望原型对象不能添加或删除属性,但允许修改现有属性的值,那么
Object.seal()
更合适。这可能适用于那些结构固定但内容可能变化的配置对象。
在我看来,这三者各有侧重。defineProperty
是“外科手术刀”,精准而有效。而freeze
和seal
更像是“整体防护罩”,它们在不同程度上限制了整个对象的行为。选择哪一个,完全取决于你对原型对象及其属性的控制需求有多严格。
文中关于的知识介绍,希望对你的学习有所帮助!若是受益匪浅,那就动动鼠标收藏这篇《防止JavaScript原型链属性被覆盖的方法有以下几种:1.使用Object.defineProperty定义不可写属性通过Object.defineProperty可以设置属性为只读,防止被意外覆盖。functionMyClass(){}Object.defineProperty(MyClass.prototype,'myProp',{value:'originalvalue',writable:false,//设置为不可写configurable:false,enumerable:true});constobj=newMyClass();console.log(obj.myProp);//originalvalueobj.myProp='newvalue';console.log(obj.myProp);//originalvalue(未被修改)说明:writable:false表示该属性不能被重新赋值;configurable:false表示不能删除或修改该属性的描述符。2.使用Object.seal()或Object.freeze()Object.seal(obj):阻止添加新属性,但允许修改已有属性。Object.freeze(obj):阻止添加、删除、修改属性。functionMyClass(){}MyClass.prototype.myProp='originalvalue';//冻结原型对象Object.freeze(MyClass.prototype);constobj=newMyClass();obj.myProp='newvalue';//不会生效console.log(obj.myProp);//originalvalue注意:冻结》文章吧,也可关注golang学习网公众号了解相关技术文章。

- 上一篇
- Go反射:通过名称获取Type的技巧与方法

- 下一篇
- HTML5小窗播放API实现方法详解
-
- 文章 · 前端 | 14秒前 |
- 微任务队列何时执行?JavaScript执行解析
- 342浏览 收藏
-
- 文章 · 前端 | 1分钟前 |
- CSS伪元素before/after使用技巧
- 365浏览 收藏
-
- 文章 · 前端 | 3分钟前 |
- CSS中min-width和max-width使用详解
- 432浏览 收藏
-
- 文章 · 前端 | 4分钟前 |
- HTML中hover用法及四种悬停效果实现
- 347浏览 收藏
-
- 文章 · 前端 | 5分钟前 |
- HTML表格边框怎么设置?
- 355浏览 收藏
-
- 文章 · 前端 | 11分钟前 |
- 按钮状态管理:事件委托与动态DOM技巧
- 341浏览 收藏
-
- 文章 · 前端 | 12分钟前 | CSS 伪元素 可访问性 自定义复选框 appearance:none
- CSS自定义复选框技巧:appearance:none用法
- 273浏览 收藏
-
- 文章 · 前端 | 14分钟前 |
- CSS外边距与内边距区别详解
- 473浏览 收藏
-
- 文章 · 前端 | 17分钟前 |
- HTML5动画API详解与实战应用
- 193浏览 收藏
-
- 文章 · 前端 | 19分钟前 |
- 事件循环微任务合并优化技巧
- 149浏览 收藏
-
- 文章 · 前端 | 23分钟前 |
- JavaScript观察者模式全解析
- 170浏览 收藏
-
- 文章 · 前端 | 25分钟前 |
- JS实现全屏功能的两种方法
- 388浏览 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 511次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 498次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 484次学习
-
- 千音漫语
- 千音漫语,北京熠声科技倾力打造的智能声音创作助手,提供AI配音、音视频翻译、语音识别、声音克隆等强大功能,助力有声书制作、视频创作、教育培训等领域,官网:https://qianyin123.com
- 127次使用
-
- MiniWork
- MiniWork是一款智能高效的AI工具平台,专为提升工作与学习效率而设计。整合文本处理、图像生成、营销策划及运营管理等多元AI工具,提供精准智能解决方案,让复杂工作简单高效。
- 123次使用
-
- NoCode
- NoCode (nocode.cn)是领先的无代码开发平台,通过拖放、AI对话等简单操作,助您快速创建各类应用、网站与管理系统。无需编程知识,轻松实现个人生活、商业经营、企业管理多场景需求,大幅降低开发门槛,高效低成本。
- 137次使用
-
- 达医智影
- 达医智影,阿里巴巴达摩院医疗AI创新力作。全球率先利用平扫CT实现“一扫多筛”,仅一次CT扫描即可高效识别多种癌症、急症及慢病,为疾病早期发现提供智能、精准的AI影像早筛解决方案。
- 133次使用
-
- 智慧芽Eureka
- 智慧芽Eureka,专为技术创新打造的AI Agent平台。深度理解专利、研发、生物医药、材料、科创等复杂场景,通过专家级AI Agent精准执行任务,智能化工作流解放70%生产力,让您专注核心创新。
- 134次使用
-
- 优化用户界面体验的秘密武器:CSS开发项目经验大揭秘
- 2023-11-03 501浏览
-
- 使用微信小程序实现图片轮播特效
- 2023-11-21 501浏览
-
- 解析sessionStorage的存储能力与限制
- 2024-01-11 501浏览
-
- 探索冒泡活动对于团队合作的推动力
- 2024-01-13 501浏览
-
- UI设计中为何选择绝对定位的智慧之道
- 2024-02-03 501浏览