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

在javascript中设置不带setter的对象属性时会发生什么

在JavaScript中,当设置不带setter的对象属性时,该属性将被视为只读属性,即无法通过赋值来修改该属性的值。如果尝试修改该属性的值,JavaScript引擎将忽略该操作或抛出错误,具体取决于是否启用了严格模式。

不带setter的对象属性通常用于表示只读的或者是计算得出的属性值。这种属性的值可以在对象创建时通过构造函数或者直接赋值进行初始化,但之后无法通过赋值来修改。

以下是一个示例:

代码语言:javascript
复制
// 定义一个对象
const person = {
  firstName: 'John',
  lastName: 'Doe',
  
  // 定义一个只读属性
  get fullName() {
    return this.firstName + ' ' + this.lastName;
  }
};

console.log(person.fullName); // 输出: John Doe

// 尝试修改只读属性的值
person.fullName = 'Jane Smith'; // 无效操作,不会修改属性的值

console.log(person.fullName); // 输出: John Doe

在上述示例中,fullName属性被定义为一个只读属性,它的值是通过firstNamelastName属性计算得出的。尝试通过赋值来修改fullName属性的值是无效的,因为它没有setter方法。

对于不带setter的对象属性,优势在于可以确保属性的值不会被意外修改,从而提高代码的可靠性和安全性。这种属性常用于表示对象的状态或者是根据其他属性计算得出的派生属性。

在实际应用中,不带setter的对象属性可以用于各种场景,例如表示用户信息、配置项、只读的计算结果等。对于腾讯云相关产品和产品介绍链接地址,由于不能提及具体品牌商,建议参考腾讯云官方文档或者咨询腾讯云的技术支持团队获取相关信息。

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

相关·内容

在 JavaScript 中,对象是拥有属性和方法的数据

JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。 在 JavaScript 中,对象是拥有属性和方法的数据。...字符串对象: var txt = "Hello"; 属性: txt.length=5 方法: txt.indexOf() txt.replace() txt.search() 在面向对象的语言中,使用...JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。...全局变量:在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。全局变量会在页面关闭后被删除。...向未声明的 JavaScript 变量来分配值:如果把值赋给尚未声明的变量,该变量将被自动作为全局变量声明,即使它在函数内执行。

3.7K10

那些Vue开发遇到的坑---响应式系统

Vue的响应式指的是你在一个页面中展示了一个变量的值,当这个变量的值由于一些操作发生改变时,Vue会自动在无需刷新界面的前提下帮你把新的值展示到相应的位置,当然这个过程不需要你自己写任何的dom刷新渲染的代码...今天我就为大家分析一下,在利用Vue进行开发的时候,为什么有些数据的变化不会被及时监听到并触发相关组件从新渲染。 对象类型在JavaScript中是一个引用类型,与基本类型不同,对象是按照引用访问的。...,意图是想要在点击按钮时,为message对象设置contact属性的值为‘clicked’。...然后作为一个程序员,你可能就要开始打debugger一步一步的调试,然后你会发现,你的代码并没有写错,在调试器中,message的属性确实改变了,并且按照预期被设置为‘clicked’,但是,为什么页面毫无反应...} } } } 值得提醒的是,数组类型在JavaScript中也是一个比较特殊的数据类型,与对象类型相似,数组也是引用类型,因此在开发中也会遇到和对象类型相似的问题

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

    在之前的文章中我们说过,当视图引用对象的属性时会触发 [[Get]] 操作,比如 myObject.a。对于默认的 [[Get]] 操作来说,第一步是检查对象本身是否有这个属性,如果有的话就使用它。...属性设置和屏蔽 • 之前说过,给一个对象设置属性不仅仅是添加一个新属性或修改已有的属性值那么简单,下面来聊一下完整的这个过程。...当访问对象中不存在的一个属性时,[[Get]] 操作就会查找对象内部 [[Prototype]] 关联的对象,这个关联关系就是一条 "原型链"(有点像嵌套的作用域),在找到属性时会对它进行遍历。...如果对象中的属性不直接存在于当前对象中而是存在于原型链上层时会出现三种情况: 1....总之,不会发生屏蔽。 3. 如果在 [[Prototype]] 原型链上层存在对象中的属性并且它是一个 setter,那就一定会调用这个 setter。

    9210

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

    文章重点内容主要阐述 JavaScript 中 Getter/Setter 属性访问/操作符的”屏蔽“作用。 我会花稍多的篇幅来描述它的展现和效果,但是请你相信我。...Getter/Setter 在 JavaScript 定义对象时,我们同时可以通过 [[Getter]]、[[Setter]] 来为属性绑定对应的执行函数。...第一种即为我们熟知的,如果属性 name 同时出现在了实例上以及原型 prototype 中的话,那么此时首先就会发生所谓的屏蔽。...如果 child 的原型链上存在一个 name 并且此时他是一个 setter 时,那么此时我们在实例上进行赋值操作时,原型上的同名 setter 会被调用,并且 name 属性并不会被添加到实例中,同时也不会对原型上的...其实至此,我想和大家阐述的重点就已经完成了。所谓 Getter/Setter 在某些情况下会发生属性的屏蔽,至于是什么情况下看到这里相信大家都已经了解的非常清楚了。

    35610

    计算属性是如何被Vue实现的

    其次,Computed 相关原理需要一些 Effect 相关的原理。如果你不是很清楚 Effect 是什么,推荐你优先阅读我的这篇 Vue3中的响应式是如何被JavaScript实现的。...了解了这些基础特点后,我们在控制台来打印一下 computed 来看看它是什么东西: // ......Effect 我已经在前置文章 Vue3中的响应式是如何被JavaScript实现的 中介绍过它的实现,有兴趣深入了解的同学可以移步查阅。 同理,当我们首次访问该计算属性时。...之后,每当 computed 中依赖的响应式数据发生变化时。我们在之前提过到每当 computed 中依赖的数据发生变化时会执行自身 Effect 中的 scheduler: // ......这样,也就达到了我们刚才的需求:当 computed 中依赖的数据发生改变时会触发自身的 Effect 执行,在自身 Effect 中的处理函数同时会通知依赖于当前 computed 的 Effect

    82630

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

    本篇开始看下js对象原型[[Prototype]]。 js中的对象有一种特殊的内置属性 [[Prototype]],其实就是对于其他对象的引用。...几乎所有的对象在创建时都 [[Prototype]]属性都会被赋予一个非空的值。...当试图引用对象的属性时会触发[[Get]]操作,例如obj.a和newObj.a。对于默认的[[Get]]操作来说,第一步是检查对象本身是否有这个属性,如果有的话就使用它。...通常为对象属性设置值我们采用=赋值操作符来进行,当为对象obj的foo属性设置值时: 1obj.foo = "bar"; 如果obj对象中包含名为foo的普通数据访问属性,这条赋值语句只会修改已有的属性值...如果属性名foo既出现在obj对象上也出现在上层原型对象上,那就会发生屏蔽,obj对象中包含的foo属性会屏蔽原型链上层的所有foo属性,因为obj.foo总是会选择原型链中最底层的foo属性。

    59920

    《你不知道的JavaScript》-- 对象(笔记)

    不同的对象在底层都表示为二进制,在JavaScript中二进制前三位都为0的话会被判断为object类型,null的二进制表示全是0,自然前三位也是0,所以执行typeof时会返回“object”。...无论返回值是什么类型,每次访问对象的属性就是属性访问,如果属性访问返回的是一个函数,那它也并不是一个“方法”。属性访问返回的函数和其他函数没有任何区别(除了可能发生的隐式绑定this)。...如果是,在非严格模式下静默失败,在严格模式下抛出TypeError异常; 3)如果都不是,将该值设置为属性的值。 如果对象中不存在这个属性,[[Put]]操作会更复杂。...1.3.9 Getter 和 Setter 对象默认的 [[Put]] 和 [[Get]]操作分别可以控制属性值的设置和获取。...在ES5中可以使用getter和setter部分改写默认操作,但是只能应用在单个属性上,无法应用在整个对象上。

    66220

    全面梳理JS对象的访问控制及代理反射

    在 Javascript 中,读取、赋值、调用方法等等,几乎一切操作都是围绕“对象”展开的;长久以来,如何更好的了解和控制这些操作,就成了该语言发展中的重要问题。 I....在同一个对象中,不能为一个已有真实值的变量使用 set ,也不能为一个属性设置多个 set ?...JS中的代理和反射 在对象本身上,一个个属性的定义访问控制,有时会带来代码臃肿,甚至难以维护;了解代理和反射的概念和用法,可以有效改善这些状况。...[2.1] 传统的代理模式 在经典的设计模式(Design Pattern)中,代理模式(Proxy Pattern)被广泛应用;其定义为: 在代理模式中,一个代理对象(Proxy)充当着另一个目标对象...在 JAVA/AS3 等语言中,反射一般被用于在运行时获取某个对象的类名、属性列表,然后再动态构造等;比如通过 XML 配置文件中的值动态创建对象,或者根据名称提取 swf 文件中的 MovieClip

    2.2K30

    《你不知道的js(上卷)》笔记2(this和对象原型)

    如果你把null或者undefined作为this的绑定对象传入call、apply或者 bind,这些值在调用时会被忽略,实际应用的是默认绑定规则。...new绑定 JavaScript中new的机制实 际上和面向类的语言完全不同。 在JavaScript中,构造函数只是一些 使用new操作符时被调用的函数。它们并不会属于某个类,也不会实例化一个类。...function foo(p1,p2) { this.val = p1 + p2; } // 之所以使用 null 是因为在本例中我们并不关心硬绑定的 this 是什么 // 反正使用 new 时...原型 JavaScript中的对象有一个特殊的 [[Prototype]] 内置属性,其实就是对于其他对象的引用。几乎所有的对象在创建时 [[Prototype]] 属性都会被赋予一个非空的值。...在JavaScript中对于“构造函数”最准确的解释是,所有带new的函数调用。

    70310

    2021Vue.js面试题汇总及答案【全网最全 建议收藏】「建议收藏」

    1.5.Vue.js 3.0 放弃defineProperty, 使用Proxy的原因 1.6.Vue 2 中给 data 中的对象属性添加一个新的属性时会发生什么?如何解决?...用来依赖收集,setter 用来派发更新),并且在内部追踪依赖,在属性被访问和修改时通知变化。...和 setter 基本不会再有针对性优化 1.6.Vue 2 中给 data 中的对象属性添加一个新的属性时会发生什么?...="message" @input=" 1.15.data为什么是一个函数而不是对象 JavaScript中的对象是引用类型的数据,当多个实例引用同一个对象时,只要一个实例对这个对象进行操作,其他实例中的数据也会发生变化...换句话说,只要观察到数据变化,就会自动开启一个队列,并缓冲在同一个事件循环中发生的所以数据改变。在缓冲时会去除重复数据,从而避免不必要的计算和 DOM 操作。

    8.7K30

    《你不知道的JavaScript(上)之原型对象》读书笔记

    属性的数据描述符中writable是否是false?如果是,在非严格模式下静默失败,在严格模式下抛出 TypeError 异常。如果都不是,将该值设置为属性的值。5....【Getter】& 【Setter】对象默认的 [[Put]] 和 [[Get]] 操作分别可以控制属性值的设置和获取。...在 ES5 中可以使用 getter 和 setter 部分改写默认操作,但是只能应用在单个属性上,无法 应用在整个对象上。getter 是一个隐藏函数,会在获取属性值时调用。...总之,不会发生屏蔽。如果在[[Prototype]]链上层存在foo并且它是一个setter(参见第3章),那就一定会 调用这个 setter。...这个关联关系实际上定义了一条“原型链”(有点像嵌套的作用域链),在查找属性时会对它进行遍历。

    65130

    VueJS 基础知识

    computed:根据已经存在的属性计算出新的属性,对于相同的数据会缓存,当依赖的属性值发生变化时,这个属性的值也会自动更新。 watch:监听 data 中的数据变化。...在 computed 中的,属性都有一个 get 和一个 set 方法(自己配置),当数据变化时,调用 set 方法。 watch 不支持缓存,发生改变,直接会触发监听事件。...官方文档说明,当我们从一个组件的 data 函数中返回一个普通的 JavaScript 对象时,Vue 会将该对象包裹在一个带有 get 和 set 处理程序的 Proxy 中。...但若建立一个与 DOM 树对应的虚拟 DOM 对象( JavaScript 对象),以对象嵌套的方式来表示 DOM 树及其层级结构,那么每次 DOM 的更改就变成了对 DOM 对象的属性的增删改查,这样一来查找...JavaScript 对象的属性变化要比查询 DOM 树的性能开销小。

    24710

    第十六章 vue数据监测原理

    通过赋值操作添加的普通属性是可枚举(遍历)的,在枚举对象属性时会被枚举到(​​​for...in​​​​ 或 ​​​Object.keys​​​​方法),可以改变这些属性的值,也可以​​​删除​​​​这些属性...需求:能否让people对象中的age属性动态发生变化呢? **尝试方法:**在外界定义变量num 把num的值赋给perople中的age属性。...编码不方便,所以 vue又把​​_data​​​中的属性取出来在vm实例对象上放了一份。...问题三: vm实例对象上的​​_data​​属性中为什么也会有对应的getter和setter方法呢?使用的是数据代理吗?...----对象 案例:手动实现简易版vue监测对象的数据原理: **需求:**定义data数据 当其中属性的值发生改变时 就 在控制台输出 ​​某属性发生了改变​​。

    7810

    vue响应式原理(数据双向绑定的原理)

    (UI) - Viewmodel:在vue中指vue实例对象,是一个公开公共属性和命令的抽象的view;是一个转值器,负责转换Model中的数据对象,来让对象变得更容易管理和使用。...Vue实例对象(在该对象中有Directives和DOM Listeners) 在vue.js里面只需要改变数据,Vue.js通过Directives指令去对DOM做封装,当数据发生变化,会通知指令去修改对应的...Vue实现数据双向绑定的原理: 如new Vue一个实例对象a,其中有一个属性a.b,那么在实例化的过程中,通过Object.defineProperty()会对a.b添加getter和setter,同时...任何时候如果javascript对象或者一个HTML输入字段被侦测到发生变化,将代理事件变成发布者-订阅者模式,这会反过来变化广播,并传播到所有绑定的javascript对象以及DOM元素上。...首先,需要对observe的数据对象进行递归遍历,包括子属性对象的属性,都加上setter getter。这样的话,给这个对象的某个属性赋值,就会触发setter,那么就能监听到数据变化。

    2.7K40

    Vue数据双向绑定实现原理

    ​ 在vue中,我们知道它的核心思想是数据驱动视图,表现层我们知道在页面上,当数据发生变化,那么视图层也会发生变化。这种数据变化驱动视图背后依靠的是什么?...每劫持一组对象,每一个属性会实例化一个Dep对象,每个拦截的对象属性都会动态添加get和set将传入的data或者prop变成响应式,在Object.defineProperty的get中,当我们访问对象的某个属性时...,就会先调用get方法,依赖收集调用dep.depend(),当我们设置该属性值时就会调用set方法调用dep.notify()``派发更新所有的数据,在调用notify时会调用实例Watch的run,...在源码里里面处理是相当复杂的,我们可以看到访问数据时,会先调用get方法,在dep.depend()进行依赖收集,然后再设置对象的值时,会调用set方法,派发更新操作。...总结 在vue2中数据劫持是用Object.defineProperty,当访问对象属性时会触发get方法进行依赖收集,当设置对象属性时会触发set方法进行派发更新操作。

    67740

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

    JavaScript 实践+理论(总结篇):作用域、闭包、this、对象原型 作用域与闭包 第一章 作用域是什么 • 作用域:根据标识符查找变量的一套规则。...在 JavaScript 中为什么 typeof null 会返回 object?...当访问对象中一个不存在的属性时,[[Get]] 操作就会查找对象内部的 [[Prototype]] 关联的对象,而这个关联关系就像是嵌套的作用域,在查找属性时会对其进行遍历查找。...如果对象中的某个属性不直接存在于某个对象上时会发生以下几种情况: myObject.foo = 'bar'; let a = { foo: 'atxt', }; let c = Object.create...在 JavaScript 中对于构造函数最准确的解释是,所有带 new 的函数调用。 6. 何为原型链?

    10010

    Prototype (原型)

    由于所有的“普通”(内置,不是特定主机的扩展)对象都“源于”(或者说把 [[Prototype]] 链的顶端设置为)这个 Object.prototype 对象,所以它包含 JavaScript 中许多通用的功能...# 属性设置和屏蔽 myObj.foo = 'bar'; 如果属性名 foo 既出现在 myObject 中也出现在 myObject 的 [[Prototype]] 链上层,那么就会发生屏蔽。...总之,不会发生屏蔽。 如果在 [[Prototype]] 链上层存在 foo 并且它是一个 setter,那就一定会调用这个 setter。...JavaScript 中只有 对象。 在 JavaScript 中,类无法描述对象的行为,(因为根本就不存在类!)对象直接定义自己的行为。...委托行为 意味着某些对象(XYZ)在找不到属性或者方法引用时会把这个请求委托给另一个对象(Task)。

    36920

    JavaScript|面向对象 or 基于对象?

    为什么 JavaScript(直到 ES6)有对象的概念,但是却没有像其他的语言那样,有类的概念呢? 为什么在 JavaScript 对象里可以自由添加属性,而其他的语言却不能呢?...从运行时角度来谈论对象,就是在讨论 JavaScript 实际运行中的模型,这是由于任何代码执行都必定绕不开运行时的对象模型。...在 JavaScript 中,将状态和行为统一抽象为“属性”,考虑到 JavaScript 中将函数设计成一种特殊对象,所以 JavaScript 中的行为和状态都能用属性来抽象。...在 JavaScript 中,对象的状态和行为其实都被抽象为了属性。...它也有四个特征: 1)getter:函数或 undefined,在取属性值时被调用。 2)setter:函数或 undefined,在设置属性值时被调用。

    90120

    【 JavaSE 】 类和对象

    ; } } 注意:此处写的方法不带 static 关键字 类的实例化 定义: 用类类型创建对象的过程,称为类的实例化 类是模型,限定其中的成员有什么 类的实例化出的对象占用内存,存储类成员变量...方法间接使用 Getter 是获取这个属性,Setter 是修改这个属性 创造getter和setter方法: 在 IDEA 中可以使用 alt + insert (或者 alt + F12)...快速生成 setter / getter 方法 在 VSCode 中可以使用鼠标右键 菜单 -> 源代码操作 中自动生成 setter / getter 方法 示例: class Person {...;setName 即为 setter 方法, 表示设置这个成员的值 当set方法的形参名字和类中的成员属性的名字一样的时候,如果不使用this, 相当于自赋值. this 表示当前实例的引用 不是所有的字段都一定要提供...什么是代码块 使用 {} 定义的一段代码 代码块分类: 普通代码块 构造块 静态块 同步代码块 普通代码块 定义: 定义在方法中的代码块(也叫本地代码块) 示例: public class

    46420

    烂大街的Spring循环依赖该如何回答?

    在Spring中,对象的实例化是通过反射实现的,而对象的属性则是在对象实例化之后通过一定的方式设置的。这个过程可以按照如下方式进行理解: ? 大致绘制依赖流程图如下: ?...从图中我们可以很清楚的看到,B对象的a属性是在第三步中注入的半成品A对象,而A对象的b属性是在第二步中注入的成品B对象,此时半成品的A对象也就变成了成品的A对象,因为其属性已经设置完成了。...所以不会存在什么提高了效率的说法 带AOP循环依赖 带AOP的跟不带AOP的其实几乎一样,只是在三级缓存中存放的是函数式接口,在需要调用时直接返回代理对象。...三级缓存存在的意义: ❝只有真正发生循环依赖的时候,才去提前生成代理对象,否则只会创建一个工厂并将其放入到三级缓存中,但是不会去通过这个工厂去真正创建对象 ❞ ?...当A、B两个类发生循环引用时,在A完成实例化后,就使用实例化后的对象去创建一个对象工厂,添加到三级缓存中,如果A被AOP代理,那么通过这个工厂获取到的就是A代理后的对象,如果A没有被AOP代理,那么这个工厂获取到的就是

    1.3K30
    领券