js如何让原型链上的属性不可写

要让原型链上的属性不可写,必须使用object.defineproperty方法并将writable设为false;2. 这样设置后,所有实例共享的原型属性无法被直接修改,确保了代码的健壮性和可预测性;3. 尽管原型属性不可写,实例仍可通过在自身创建同名属性来遮蔽原型属性,实现个性化覆盖而不影响其他实例或原型本身。

js如何让原型链上的属性不可写

要在JavaScript中让原型链上的属性不可写,核心在于使用

Object.defineProperty

方法。通过为属性设置

writable: false

,我们可以有效地阻止对该属性的直接赋值修改,从而保护原型上的共享状态不被意外或恶意地更改。这对于构建健壮、可预测的代码库至关重要。

js如何让原型链上的属性不可写

解决方案

要让原型链上的属性不可写,你需要直接在原型对象上使用

Object.defineProperty

。这个方法允许你精确控制一个对象属性的各种特性,包括它是否可写、是否可枚举、是否可配置,以及它的值。

具体来说,当你定义或修改一个原型属性时,可以这样操作:

js如何让原型链上的属性不可写

function MyClass() {  // 构造函数}// 在原型上定义一个属性,并使其不可写Object.defineProperty(MyClass.prototype, 'sharedValue', {  value: 100,         // 属性的初始值  writable: false,    // 核心:设置为不可写  enumerable: true,   // 是否可枚举(例如在for...in循环中可见)  configurable: true  // 是否可配置(例如是否可删除,或再次修改其属性描述符)});const instance1 = new MyClass();const instance2 = new MyClass();console.log(instance1.sharedValue); // 输出: 100console.log(instance2.sharedValue); // 输出: 100// 尝试修改这个不可写的原型属性try {  instance1.sharedValue = 200; // 在严格模式下会报错,非严格模式下静默失败} catch (e) {  console.error("尝试修改不可写属性时发生错误:", e.message);}console.log(instance1.sharedValue); // 仍然输出: 100 (原型上的值未变)console.log(MyClass.prototype.sharedValue); // 仍然输出: 100

这里需要注意的是,

writable: false

一旦设置,就意味着你不能通过简单的赋值操作来改变

sharedValue

的值。如果你尝试这样做,在严格模式下会抛出

TypeError

,而在非严格模式下,赋值操作会静默失败,属性的值保持不变。这种机制为原型属性提供了一层重要的保护。

为什么我们需要让原型链上的属性不可写?

这其实是一个关于代码健壮性和可维护性的深刻思考。想象一下,你构建了一个复杂的JavaScript库或框架,其中定义了许多共享的方法或常量在原型上。这些原型属性是所有实例共享的,它们构成了你API的核心行为。

js如何让原型链上的属性不可写

如果这些原型属性是可写的,那么任何一个实例,或者说任何一段代码,都有可能无意中(或者恶意地)修改这些共享属性。一旦原型上的属性被修改,所有继承自该原型的实例都会立即受到影响。这会导致难以追踪的bug,因为一个地方的修改可能会在完全不相关的代码路径中产生副作用。这简直是调试的噩梦,你得花大量时间去追溯是谁、在什么时候、以什么方式“污染”了原型。

所以,让原型链上的属性不可写,本质上是在推行一种“防御性编程”策略。它强制开发者在与这些核心功能交互时,要么通过提供的方法(如果允许修改的话),要么通过在实例上创建自己的同名属性来“覆盖”它(这被称为“属性遮蔽”,我们后面会聊到),而不是直接去改动共享的原型。这就像给你的核心逻辑加上了一道锁,确保其行为的稳定性和可预测性。对于常量、工具方法或者任何不应该在运行时被改变的共享配置,这都是一个非常棒的实践。

除了不可写,还有哪些属性描述符可以控制原型属性?

Object.defineProperty

的强大之处远不止

writable

。它提供了四个核心的属性描述符,让我们能够对属性的行为进行细致入微的控制。除了我们已经讨论的

writable

,还有

enumerable

configurable

,以及

value

(对于数据属性)或

get

/

set

(对于访问器属性)。

enumerable

(可枚举性):

如果设置为

true

(默认值),该属性会在

for...in

循环、

Object.keys()

JSON.stringify()

等操作中被枚举出来。如果设置为

false

,该属性会被“隐藏”起来,不会出现在这些枚举操作的结果中。这对于那些内部使用的、不希望暴露给外部枚举的属性非常有用。比如,你可能想在原型上放一个内部的缓存机制,但不希望它在遍历实例属性时被意外地处理。

Object.defineProperty(MyClass.prototype, 'internalId', {  value: Symbol('uniqueId'),  enumerable: false, // 不可枚举  writable: false,  configurable: false});const instance = new MyClass();for (let key in instance) {  console.log(key); // 不会输出 'internalId'}console.log(Object.keys(instance)); // 不包含 'internalId'console.log(instance.internalId); // 可以正常访问

configurable

(可配置性):

如果设置为

true

(默认值),该属性可以被删除(

delete

操作),并且它的属性描述符(包括

writable

enumerable

等)可以被再次修改。如果设置为

false

,该属性就变得“不可配置”了。这意味着你不能删除它,也不能再改变它的

enumerable

configurable

状态。对于数据属性,你也不能将

writable

false

改为

true

(但可以从

true

改为

false

)。一旦

configurable

false

,这个属性就基本被“锁死”了。

Object.defineProperty(MyClass.prototype, 'fixedMethod', {  value: function() { console.log('This method is fixed.'); },  writable: false,  enumerable: true,  configurable: false // 不可配置});try {  delete MyClass.prototype.fixedMethod; // 尝试删除,会失败(严格模式下抛错)} catch (e) {  console.error("尝试删除不可配置属性时发生错误:", e.message);}// 尝试修改其writable属性,也会失败try {  Object.defineProperty(MyClass.prototype, 'fixedMethod', { writable: true });} catch (e) {  console.error("尝试修改不可配置属性的writable时发生错误:", e.message);}

理解这些描述符,就如同拥有了对对象属性行为的“超能力”。它们让开发者能够创建出更加健壮、更符合预期的对象模型,尤其是在设计API或构建复杂的数据结构时,这种细粒度的控制能力显得尤为重要。

原型链属性不可写后,子对象能覆盖它吗?

这是一个非常好的问题,它触及了JavaScript原型链的核心机制之一——属性查找和属性赋值。答案是:子对象(实例)可以“覆盖”原型链上不可写的属性,但这里的“覆盖”并不是指修改了原型上的那个属性,而是指在子对象自身上创建了一个同名的新属性,从而“遮蔽”了原型上的属性。这在JavaScript中被称为“属性遮蔽”(Shadowing)。

我们来看一个例子:

function Animal(name) {  this.name = name;}// 在Animal的原型上定义一个不可写的属性Object.defineProperty(Animal.prototype, 'species', {  value: 'Unknown',  writable: false, // 设为不可写  enumerable: true,  configurable: true});const dog = new Animal('Buddy');const cat = new Animal('Whiskers');console.log(dog.species); // 输出: Unknown (来自原型)console.log(cat.species); // 输出: Unknown (来自原型)// 尝试修改dog实例的species属性dog.species = 'Canine'; // 看起来像是修改,但实际上...console.log(dog.species); // 输出: Canine (这是dog实例自己的属性)console.log(cat.species); // 输出: Unknown (cat实例仍然访问原型上的属性)// 验证原型上的属性是否被修改console.log(Animal.prototype.species); // 仍然输出: Unknown// 检查dog实例自身是否有'species'属性console.log(dog.hasOwnProperty('species')); // 输出: true// 检查cat实例自身是否有'species'属性console.log(cat.hasOwnProperty('species')); // 输出: false

在这个例子中,当你执行

dog.species = 'Canine'

时,JavaScript引擎并没有尝试去修改

Animal.prototype.species

,因为它知道那个属性是不可写的。相反,它在

dog

这个实例对象自身上创建了一个新的属性

species

,并将其值设为

'Canine'

当后续你访问

dog.species

时,JavaScript的属性查找机制会首先检查

dog

实例自身是否有

species

属性。因为它找到了,就会直接返回

dog

实例上的这个属性值,而不再向上沿着原型链查找。这就是“遮蔽”的含义:实例上的同名属性遮蔽了原型上的属性。

所以,即使原型上的属性被设为不可写,实例仍然可以拥有同名的可写属性。这是一种非常灵活且强大的机制,它允许我们为特定的实例定制行为,同时又保持了原型上共享属性的完整性和不变性。理解这一点对于避免在处理继承和属性赋值时的混淆至关重要。

以上就是js如何让原型链上的属性不可写的详细内容,更多请关注php中文网其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1513402.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 07:43:03
下一篇 2025年12月20日 07:43:08

相关推荐

  • CSS mask属性无法获取图片:为什么我的图片不见了?

    CSS mask属性无法获取图片 在使用CSS mask属性时,可能会遇到无法获取指定照片的情况。这个问题通常表现为: 网络面板中没有请求图片:尽管CSS代码中指定了图片地址,但网络面板中却找不到图片的请求记录。 问题原因: 此问题的可能原因是浏览器的兼容性问题。某些较旧版本的浏览器可能不支持CSS…

    2025年12月24日
    900
  • 为什么设置 `overflow: hidden` 会导致 `inline-block` 元素错位?

    overflow 导致 inline-block 元素错位解析 当多个 inline-block 元素并列排列时,可能会出现错位显示的问题。这通常是由于其中一个元素设置了 overflow 属性引起的。 问题现象 在不设置 overflow 属性时,元素按预期显示在同一水平线上: 不设置 overf…

    2025年12月24日 好文分享
    400
  • 网页使用本地字体:为什么 CSS 代码中明明指定了“荆南麦圆体”,页面却仍然显示“微软雅黑”?

    网页中使用本地字体 本文将解答如何将本地安装字体应用到网页中,避免使用 src 属性直接引入字体文件。 问题: 想要在网页上使用已安装的“荆南麦圆体”字体,但 css 代码中将其置于第一位的“font-family”属性,页面仍显示“微软雅黑”字体。 立即学习“前端免费学习笔记(深入)”; 答案: …

    2025年12月24日
    000
  • 为什么我的特定 DIV 在 Edge 浏览器中无法显示?

    特定 DIV 无法显示:用户代理样式表的困扰 当你在 Edge 浏览器中打开项目中的某个 div 时,却发现它无法正常显示,仔细检查样式后,发现是由用户代理样式表中的 display none 引起的。但你疑问的是,为什么会出现这样的样式表,而且只针对特定的 div? 背后的原因 用户代理样式表是由…

    2025年12月24日
    200
  • inline-block元素错位了,是为什么?

    inline-block元素错位背后的原因 inline-block元素是一种特殊类型的块级元素,它可以与其他元素行内排列。但是,在某些情况下,inline-block元素可能会出现错位显示的问题。 错位的原因 当inline-block元素设置了overflow:hidden属性时,它会影响元素的…

    2025年12月24日
    000
  • 为什么 CSS mask 属性未请求指定图片?

    解决 css mask 属性未请求图片的问题 在使用 css mask 属性时,指定了图片地址,但网络面板显示未请求获取该图片,这可能是由于浏览器兼容性问题造成的。 问题 如下代码所示: 立即学习“前端免费学习笔记(深入)”; icon [data-icon=”cloud”] { –icon-cl…

    2025年12月24日
    200
  • 为什么使用 inline-block 元素时会错位?

    inline-block 元素错位成因剖析 在使用 inline-block 元素时,可能会遇到它们错位显示的问题。如代码 demo 所示,当设置了 overflow 属性时,a 标签就会错位下沉,而未设置时却不会。 问题根源: overflow:hidden 属性影响了 inline-block …

    2025年12月24日
    000
  • 为什么我的 CSS 元素放大效果无法正常生效?

    css 设置元素放大效果的疑问解答 原提问者在尝试给元素添加 10em 字体大小和过渡效果后,未能在进入页面时看到放大效果。探究发现,原提问者将 CSS 代码直接写在页面中,导致放大效果无法触发。 解决办法如下: 将 CSS 样式写在一个单独的文件中,并使用 标签引入该样式文件。这个操作与原提问者观…

    2025年12月24日
    000
  • 为什么我的 em 和 transition 设置后元素没有放大?

    元素设置 em 和 transition 后不放大 一个 youtube 视频中展示了设置 em 和 transition 的元素在页面加载后会放大,但同样的代码在提问者电脑上没有达到预期效果。 可能原因: 问题在于 css 代码的位置。在视频中,css 被放置在单独的文件中并通过 link 标签引…

    2025年12月24日
    100
  • 为什么在父元素为inline或inline-block时,子元素设置width: 100%会出现不同的显示效果?

    width:100%在父元素为inline或inline-block下的显示问题 问题提出 当父元素为inline或inline-block时,内部元素设置width:100%会出现不同的显示效果。以代码为例: 测试内容 这是inline-block span 效果1:父元素为inline-bloc…

    2025年12月24日
    400
  • 上外边距未生效

    标题:探究margintop失效的原因及解决方法 导言:在进行网页设计或者开发过程中,经常会遇到某些元素的margintop属性失效的情况,造成布局上的问题。本文将探究margintop失效的原因,并提供解决该问题的具体代码示例。 一、margintop属性失效的可能原因 盒模型问题:当元素的盒模型…

    2025年12月24日
    000
  • 深度剖析程序设计中必不可少的数据类型分类

    【深入解析基本数据类型:掌握编程中必备的数据分类】 在计算机编程中,数据是最为基础的元素之一。数据类型的选择对于编程语言的使用和程序的设计至关重要。在众多的数据类型中,基本数据类型是最基础、最常用的数据分类之一。通过深入解析基本数据类型,我们能够更好地掌握编程中必备的数据分类。 一、基本数据类型的定…

    2025年12月24日
    000
  • 网页设计css样式代码大全,快来收藏吧!

    减少很多不必要的代码,html+css可以很方便的进行网页的排版布局。小伙伴们收藏好哦~ 一.文本设置    1、font-size: 字号参数  2、font-style: 字体格式 3、font-weight: 字体粗细 4、颜色属性 立即学习“前端免费学习笔记(深入)”; color: 参数 …

    2025年12月24日
    000
  • css中id选择器和class选择器有何不同

    之前的文章《什么是CSS语法?详细介绍使用方法及规则》中带了解CSS语法使用方法及规则。下面本篇文章来带大家了解一下CSS中的id选择器与class选择器,介绍一下它们的区别,快来一起学习吧!! id选择器和class选择器介绍 CSS中对html元素的样式进行控制是通过CSS选择器来完成的,最常用…

    2025年12月24日
    000
  • php约瑟夫问题如何解决

    “约瑟夫环”是一个数学的应用问题:一群猴子排成一圈,按1,2,…,n依次编号。然后从第1只开始数,数到第m只,把它踢出圈,从它后面再开始数, 再数到第m只,在把它踢出去…,如此不停的进行下去, 直到最后只剩下一只猴子为止,那只猴子就叫做大王。要求编程模拟此过程,输入m、n, 输出最后那个大王的编号。…

    好文分享 2025年12月24日
    000
  • CSS新手整理的有关CSS使用技巧

    [导读]  1、不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因,这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200*200=40, 000 次,占用资源。  2、无边框。推荐的写法是     1、不要使用过小的图片做背景平铺。这就是为何很多人都不用 …

    好文分享 2025年12月23日
    000
  • CSS中实现图片垂直居中方法详解

    [导读] 在曾经的 淘宝ued 招聘 中有这样一道题目:“使用纯css实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最 在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现未知尺寸…

    好文分享 2025年12月23日
    000
  • CSS派生选择器

    [导读] 派生选择器通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。在 css1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由于它们依赖于上下文关系来应 派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标…

    好文分享 2025年12月23日
    000
  • CSS 基础语法

    [导读] css 语法 css 规则由两个主要的部分构成:选择器,以及一条或多条声明。selector {declaration1; declaration2;     declarationn }选择器通常是您需要改变样式的 html 元素。每条声明由一个属性和一个 CSS 语法 CSS 规则由两…

    2025年12月23日
    300
  • CSS 高级语法

    [导读] 选择器的分组你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。h1,h2,h3,h4,h5 选择器的分组 你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明…

    好文分享 2025年12月23日
    000

发表回复

登录后才能评论
关注微信