首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Javascript,当我们为只读数据属性赋值时会发生什么呢?

当我们为只读数据属性赋值时,会发生以下情况:

  1. 如果在严格模式下,会抛出一个TypeError错误,表示无法修改只读属性的值。
  2. 如果不在严格模式下,赋值操作会被忽略,没有任何效果,不会报错。

只读数据属性是指使用Object.defineProperty()方法或类似方式定义的属性,通过writable: false来设置。这种属性一旦被定义为只读,其值就不能被修改。

举个例子,假设有一个对象person,其中有一个只读属性age:

代码语言:txt
复制
const person = {
  name: "Alice",
  age: 25
};

Object.defineProperty(person, "age", {
  writable: false
});

在这个例子中,我们将age属性定义为只读属性。

如果我们尝试为只读属性赋值,例如:

代码语言:txt
复制
person.age = 30;

如果是在严格模式下,会抛出TypeError: Cannot assign to read only property 'age' of object '#<Object>'的错误,表示无法修改只读属性的值。

如果不在严格模式下,赋值操作会被忽略,没有任何效果。即使没有抛出错误,person.age的值仍然是原来的值,即25。

应用场景: 只读属性的应用场景包括但不限于以下情况:

  • 保护对象的属性,防止被意外修改。
  • 定义常量值,确保不会被修改。

腾讯云相关产品和产品介绍链接地址: 腾讯云提供了一系列云计算产品和解决方案,涵盖了云服务器、云数据库、云存储等多个领域。在Javascript相关的场景中,可以考虑以下产品:

  1. 云函数(SCF):腾讯云云函数是一种事件驱动的无服务器计算服务,可以让你无需管理服务器即可运行代码。它适用于处理Javascript脚本的场景,可以用来创建和运行Javascript函数。 产品介绍链接:https://cloud.tencent.com/product/scf
  2. 云开发(Tencent CloudBase):腾讯云云开发是一款支持多端一体化的后端云服务,提供云函数、数据库、存储等功能。可以用来开发和部署基于Javascript的应用程序。 产品介绍链接:https://cloud.tencent.com/product/tcb

以上是腾讯云在Javascript领域的两个产品,可以根据具体需求选择合适的产品进行开发和部署。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

理论+实践:从原型链到继承模式,掌握 Object 的精髓(二)

在之前的文章中我们说过,视图引用对象的属性时会触发 [[Get]] 操作,比如 myObject.a。对于默认的 [[Get]] 操作来说,第一步是检查对象本身是否有这个属性,如果有的话就使用它。...构造函数 function Foo(){ // } var a = new Foo(); • 在以上代码为什么会让我们认为 Foo 是一个类?...创建关联 • 那 [[Prototype]] 机制的意义是什么?为什么要创建这些关联?...访问对象中不存在的一个属性时,[[Get]] 操作就会查找对象内部 [[Prototype]] 关联的对象,这个关联关系就是一条 "原型链"(有点像嵌套的作用域),在找到属性时会对它进行遍历。...否则,这条赋值语句就会被忽略。总之,不会发生屏蔽。 3. 如果在 [[Prototype]] 原型链上层存在对象中的属性并且它是一个 setter,那就一定会调用这个 setter。

7910

petite-vue源码剖析-逐行解读@vuereactivity之reactive

在petite-vue中我们通过reactive构建上下文对象,并将根据状态渲染UI的逻辑作为入参传递给effect,然后神奇的事情发生了,状态发生变化时将自动触发UI重新渲染。...,否则若属性对象,则将其构造响应式对象(reactive)或只读对象(readonly) //文件 ....readonly(res) : reactive(res) } } } 这里可以看到读取属性时才根据属性值类型来属性值构造响应式对象,而不是当我们调用reactive时就一股脑的遍历对象所有属性...在上述代码中我们发现会使用到Proxy拦截函数入参receiver,如: 那么到底receiver是什么?...另外,我们可以看到访问子代理对象没有的属性时会访问其原型链的对象查找属性,并且get拦截器的receiver保持指向子代理对象。

63630
  • 《你不知道的JavaScript》:原型链访问的坑

    试图引用对象的属性时会触发[[Get]]操作,例如obj.a和newObj.a。对于默认的[[Get]]操作来说,第一步是检查对象本身是否有这个属性,如果有的话就使用它。...通常对象属性设置值我们采用=赋值操作符来进行,对象obj的foo属性设置值时: 1obj.foo = "bar"; 如果obj对象中包含名为foo的普通数据访问属性,这条赋值语句只会修改已有的属性值...如果属性名foo既出现在obj对象上也出现在上层原型对象上,那就会发生屏蔽,obj对象中包含的foo属性会屏蔽原型链上层的所有foo属性,因为obj.foo总是会选择原型链中最底层的foo属性。...但如果foo不直接存在于obj对象而是存在于原型链上层对象,赋值语句obj.foo = "bar";会按照不同情况来执行:(下面有对应代码示例) 如果原型链上层对象存在名为foo的普通访问数据属性并且没有被标记为只读...如果原型链上层对象存在foo属性并且还被标记为只读(`writable: false`),那么就无法修改已有属性或在obj对象上创建屏蔽属性

    59320

    JavaScript 实践+理论(总结篇):作用域、闭包、this、对象原型

    JavaScript 实践+理论(总结篇):作用域、闭包、this、对象原型 作用域与闭包 第一章 作用域是什么 • 作用域:根据标识符查找变量的一套规则。...在 JavaScript 中为什么 typeof null 会返回 object?...访问对象中一个不存在的属性时,[[Get]] 操作就会查找对象内部的 [[Prototype]] 关联的对象,而这个关联关系就像是嵌套的作用域,在查找属性时会对其进行遍历查找。...如果对象中的某个属性不直接存在于某个对象上时会发生以下几种情况: myObject.foo = 'bar'; let a = { foo: 'atxt', }; let c = Object.create...否则,这条赋值语句就会被忽略。总之,不会发生屏蔽。 1.

    9210

    原型

    那么,这个到底是什么意思? 先看_proto_开始说起 每一个JS对象一定对应一个原型对象,并且从原型对象那里继承属性和方法。...我们先把这个问题往后放,先搞清楚prototype和_proto_有什么区别?...现在我们完整地讲解一下这个过程 myObject.foo = "bar"; 如果myObject对象中包含名为foo的普通数据访问属性,这条赋值语句只会修改已有的属性值。...否则,这条赋值语句会被忽略。总之,不会发生屏蔽。 如果在 [Prototype] 链上层存在 foo 并且它是一个 setter(参见第 3 章),那就一定会调用这个 setter。...给对象添加属性大多数情况是第一种情况,但是原型链已存在该同名属性时,我们就不能用=来赋值了。我们可以用Object.defineProperty来向对象添加属性

    68720

    JavaScript 对象可以做到的三件事

    作者:John Au-Yeung 译者:前端小智 来源:medium 除了普通的对象属性赋值和遍历之外,我们还可以使用 JavaScript 对象执行许多其他操作。...在本文中,我们将了解如何使用它们,包括访问内部属性、操作属性描述符和继承只读属性。 1. 访问内部属性 JavaScript 对象无法以常规方式访问的内部属性。...属性描述符对象 数据属性包含了一个数据值的位置,在这个位置可以读取和写入值。也就是说,数据属性可以通过 对象.属性 访问,就是我么平常接触的用户赋什么值,它们就返回什么,不会做额外的事情。...foo.a 赋值时,如: foo.a = 2; 如果关闭了严格模式,浏览器将忽略,否则将抛出一个错误,因为我们将 writable 设置 false, 表示该属性不可写。...3.无法分配继承的只读属性 继承的只读属性不能再赋值。这是有道理的,因为我们这样设置它,它是继承的,所以它应该传播到继承属性的对象。

    71540

    TypeScript 初学者入门学习笔记(一)

    拥有活跃的社区,大多数常用的第三方库都提供了类型声明,并且开源免费 JavaScript 的缺点 首先JavaScript 是一门非常灵活的编程语言: 它没有类型约束,一个变量可能初始化时是字符串,又被赋值数字...基于原型的面向对象编程,使得原型上的属性或方法可以在运行时被修改。 TypeScript 的类型系统,在很大程度上弥补了 JavaScript 的缺点。 为什么使用 TypeScript?...void { alert('My name is Tom'); } 然而声明一个 void 类型的变量没什么用,因为只能将其赋值 undefined 和 null: let unusable:...对象中的一些字段只能在创建时被赋值,可以使用 **readonly **定义只读属性: 例一:使用 readonly 定义的属性 id 初始化后,又被重新赋值,所以会报错。...例二:只读的约束存在于第一次给对象赋值的时候,而不是第一次给只读属性赋值时: interface Person { readonly id: number; name: string;

    1.8K20

    vue3的Composition API

    什么是 Composition API?...Composition API 也叫组合式API, 是在vue3中新引入的一种API,vue2中已经有option API了,那为什么要新稿这么一套,其实主要原因是要解决vue2中的option API...(可以对 .value 赋值来进行修改, 如果将一个对象赋值给 ref,那这个对象则通过 reactive 转化为深层次响应式的数据),如果这个对象中存在ref也会被深层解包,避免这种深层次的转化,官方建议用...可以是 ref、reactive 对象、computed 计算属性或者一个自定义的getter函数。callback:侦听的源发生变化时会被调用的回调函数。...无需关心具体响应式属性:当你不需要关心响应式数据具体是哪个属性变化,只是想在其变化时做一些事情时。代码和效果图如下...

    8810

    死磕JS:闭包到底是个什么鬼?

    我们开始吧~ 函数调用时发生什么? 为了理解闭包,首先我们需要完全理解 JavaScript 到底是如何工作的! 那么函数调用是会发生什么?...注意,我们实际上可以访问函数执行期间可用的“新”数据,而不是声明。这就是词法作用域在 JavaScript 中的工作方式。 但是如果我们返回一个函数,而不是仅仅在外部函数体中调用它,会发生什么?...如果你想知道闭包到底有什么用,请继续看下面的示例。 01 模块封装 闭包允许我们保护或隐藏某些信息。[[scope]] 是一个隐藏的属性,所以我们不能像使用标准对象那样访问和更新它。...在下面的代码片段中,我们利用了所谓的IIFE(立即执行函数),它允许我们消除调用外部函数的中间步骤,就像我们赋值时直接调用它一样。...export 出去, 提供给其他人使用,我们他准备的 API 不允许他更改 apiKey,这就做到了只读属性,除了在源代码中重写它之外,调用方不可能更改它。

    34620

    Prototype (原型)

    如果 foo 不直接存在于 myObject 中而是存在于原型链上层时 myObject.foo ="bar" 会出现的三种情况: 如果在 [[Prototype]] 链上层存在名为 foo 的普通数据访问属性并且没有被标记为只读...否则,这条赋值语句会被忽略。总之,不会发生屏蔽。 如果在 [[Prototype]] 链上层存在 foo 并且它是一个 setter,那就一定会调用这个 setter。...无论添加什么标签都无法改变事实 :一种水果是苹果,另一种是橘子。更好的方法是直接把苹果叫作苹果——使用更加准确并且直接的术语。 继承 意味着复制操作,JavaScript (默认)并不会复制对象属性。...# “构造函数” function Foo() { // ... } var foo = new Foo(); 到底是什么我们认为 Foo 是一个“类”?...换句话说,在 JavaScript 中对于“构造函数”最准确的解释是,所有带 new 的函数调用。函数不是构造函数,但是且仅使用 new 时,函数调用会变成“构造函数调用”。

    36520

    TypeScript学习笔记(二)—— TypeScript基础

    有时候我们希望对象中的一些字段只能在创建的时候被赋值,那么可以用 readonly 定义只读属性: interface Person { readonly id: number; name...注意,只读的约束存在于第一次给对象赋值的时候,而不是第一次给只读属性赋值的时候: interface Person { readonly id: number; name: string...上例中,报错信息有两处,第一处是在对 tom 进行赋值的时候,没有给 id 赋值。 第二处是在给 tom.id 赋值的时候,由于它是只读属性,所以报错了。...上面的例子中,我们需要将 window 上添加一个属性 foo,但 TypeScript 编译时会报错,提示我们 window 上不存在 foo 属性。...任何类型都可以被断言 any any 可以被断言任何类型 那么类型断言有没有什么限制

    5.1K20

    TypeScript手记(三)

    它代表了有一个 label 属性且类型string 的对象。需要注意的是,我们在这里并不能像在其它语言里一样,说传给 printLabel 的对象实现了这个接口。我们只会去关注值的外形。...你可以在属性名前用 readonly 来指定只读属性: interface Point { readonly x: number readonly y: number } 你可以通过赋值一个对象字面量来构造一个...对象字面量会被特殊对待而且会经过额外属性检查,将它们赋值给变量或作为参数传递的时候。如果一个对象字面量存在任何“目标类型”不包含的属性时,你会得到一个错误。...width,那么就无所谓它们的类型是什么。...这是因为使用 number 来索引时,JavaScript 会将它转换成string 然后再去索引对象。

    90220

    Vuejs 设计与实现 —— 渲染器核心:挂载与更新

    下面是 Vue3.x 中定义最基本的 VNode 结构:vnode.type 是节点类型:标签、文本、注释、Fragment、Component 等vnode.props 是节点属性数据:HTML Attributes...只读 属性的 DOM Properties,不能直接进行赋值,因此也必须转换为 el.setAttribute(key, value) 的处理,如: 中的 form...属性就是只读属性源码中抽离了 shouldSetAsProp 用于去判断是否可通过 DOM Properties 去更新:特殊处理 classVue.js 对 class 做了增强:指定 class...最简单的方法:移除 之前的事件处理函数重新绑定 新的事件处理函数但这种方式并不是最优的方式,毕竟需要来回 移除、注册 才能实现事件更新,有没有什么方法是可以只注册一次事件,也能实现事件更新的方式?...,这里的更新时指,在初次挂载完成之后,后续渲染还会触发更新,只不过新 vnode 会变成 null,从而进入卸载阶段:容器的内容可能是某个或多个组件渲染的,卸载发生时,应该正确地调用这些组件的 beforeUnmount

    55840

    iOS:关于WWDC2020-Objective-C运行时的改进

    * clean memory:指加载后不会发生更改的内存。class_ro_t 就属于 clean memory,因为它是只读的。 * dirty memory:指在进程运行时会发生更改的内存。...虽然这些数据足以让我们开始,但运行时需要追踪每个类的更多信息,所以一个类首次被使用,运行时会为它分配额外的存储容量。...但为什么方法和属性也在只读数据中时,这里还要有方法和属性?...因为它们可以在运行时进行更改, category 被加载时,它可以向类中添加新的方法,而且程序员可以使用运行时 API 动态的添加它们,而 class_ro_t 是只读的,所以我们需要在 class_rw_t...三、tagged pointer 什么是 tagged pointer

    49920

    前端入门8-JavaScript语法之数据类型和变量声明正文-数据类型、变量

    但在 JavaScript 中,声明一个变量却没有进行赋值操作的话,默认值不是 null,而是 undefined。 那么,什么场景下,变量的值会是 null ?...意思就是说,null 是 JavaScript 设计出来的一个表示空值含义的数据类型,用来给你在程序中有需要给某个变量手动设置空值的场景时使用。...这也是为什么用 typeof 运算符获取 null 的数据类型时,会发现输出的是 Object。因为 null 实际上是个实际存在的数据值,只是它的含义是空值的意思,用于赋值给对象类型的变量。...undefined 还有另外一种场景: 访问对象中不存在的属性时,此时会输出 undefined,表示这个属性并未在对象中定义。...隐式转换 因为属性是对象才有的特性,所以对某个原始类型的变量进行属性操作时,此时会临时创建一个包装对象,属性操作结束后销毁包装对象。

    1.5K30

    这也许是你会遇到的Google Chrome Bug

    我们来看看打印结果: 执行 child.name = 'WangHaoyu' 时,实质上相当于我们在为 child 实例对象上进行赋值操纵自然而然和原型上的 name 属性并不会有任何关系。...Getter/Setter 在 JavaScript 定义对象时,我们同时可以通过 [[Getter]]、[[Setter]] 来属性绑定对应的执行函数。...同样调用 console.log(obj.name) 时,相当于进行了 LTS 查询(当然上边的赋值操作不仅仅会触发 LTS 同时会触发 RHS)。...的普通数据访问属性,那么这条赋值语句机会修改已有的属性值。...所谓 Getter/Setter 在某些情况下会发生属性的屏蔽,至于是什么情况下看到这里相信大家都已经了解的非常清楚了。 Chrome Bug 最后,我们再来看看 Chrome 下对于这一情况的展现。

    35310

    初识 vue3的Composition API

    什么是 Composition API?...Composition API 也叫组合式API, 是在vue3中新引入的一种API,vue2中已经有option API了,那为什么要新稿这么一套,其实主要原因是要解决vue2中的option API...(可以对 .value 赋值来进行修改, 如果将一个对象赋值给 ref,那这个对象则通过 reactive 转化为深层次响应式的数据),如果这个对象中存在ref也会被深层解包,避免这种深层次的转化,官方建议用...可以是 ref、reactive 对象、computed 计算属性或者一个自定义的getter函数。callback:侦听的源发生变化时会被调用的回调函数。...无需关心具体响应式属性:当你不需要关心响应式数据具体是哪个属性变化,只是想在其变化时做一些事情时。代码和效果图如下...

    16310

    深入浅出React(一):React的设计哲学 - 简单之美

    React认为属性应该是只读的,一旦赋值过去后就不应该变化。关于状态和属性的使用在后续文章中还会深入探讨。...React的初衷之一就是,既然整体刷新一定能解决层叠更新的问题,那我们什么不索性就每次都这么做?让框架自身去解决哪些局部UI需要更新的问题。...Action可以来自于用户的某个界面操作,比如点击提交按钮;也可以来自服务器端的某个数据更新。数据模型发生变化时,就触发刷新整个界面。...让数据模型也变简单:Immutability Immutability含义是只读数据,React提倡使用只读数据来建立数据模型。...针对只读数据,Facebook开发了一整套框架immutable.js,将只读数据的概念引入JavaScript,并且在github开源。

    1.2K20
    领券