Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

Object.defineProperty(obj, prop, descriptor)

参数:

  obj 要在其上定义属性的对象。

  prop 要定义或修改的属性的名称。

  descriptor 将被定义或修改的属性描述符。

  前两个参数是常见的参数,就不多说了,主要来看第三个参数。

属性描述符

  对象里目前存在的属性描述符有两种主要形式:数据描述符存取描述符

  数据描述符是一个具有值的属性,该值可能是可写的,也可能不是可写的。

  存取描述符是由getter-setter函数对描述的属性。描述符必须是这两种形式之一;不能同时是两者。

  数据描述符和存取描述符均具有以下可选键值(共同具有)

  • configurable

    当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。

    默认为 false

  • enumerable

    当且仅当该属性的enumerabletrue时,该属性才能够出现在对象的枚举属性中。

    默认为 false

  数据描述符具有以下可选键值:

  • value

    该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。

    默认为 undefined

  • writable

    当且仅当该属性的writabletrue时,value才能被赋值运算符改变。

    默认为 false

  存取描述符同时具有以下可选键值:

  • get

    一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。当访问该属性时,该方法会被执行,方法执行时没有参数传入,但是会传入this对象(由于继承关系,这里的this并不一定是定义该属性的对象)。

    默认为 undefined

  • set

    一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。当属性值修改时,触发执行该方法。该方法将接受唯一参数,即该属性新的参数值。

    默认为 undefined

看完上面这些,可能会有点懵,到底什么是数据描述符,什么是存取描述符呢?我是这样理解:

  • 拥有value,writeable的描述符就是数据描述符;拥有get,set的描述符就是存取描述符

    这些选项不一定是自身属性,如果是继承来的也要考虑

  • 如果一个描述符不具有value,writable,get 和 set 任意一个关键字,那么它默认就是一个数据描述符。

  • 一个描述符中不能同时有(value或writable)和(get或set)关键字,也就是一个描述符要么是拥有value,writable的数据描述符,要么是拥有get,set存取描述符。

ES6 object.defineProperty的更多相关文章

  1. ES6 Object.setPrototypeOf ()方法和defineProperty()方法的使用

    将一个指定的对象的原型设置为另一个对象或者null(既对象的[[Prototype]]内部属性). 示例: <script type="text/javascript"> ...

  2. javascript之Object.defineProperty的奥妙

    直切主题 今天遇到一个这样的功能: 写一个函数,该函数传递两个参数,第一个参数为返回对象的总数据量,第二个参数为初始化对象的数据.如: var o = obj (4, {name: 'xu', age ...

  3. es6 Object.assign

    ES6 Object.assign 一.基本用法 Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target).它至少需要两个对象作为参数,第一个参数是目 ...

  4. est6 -- Object.is()、Object.assign()、Object.defineProperty()、Symbol、Proxy

    Object.is()用来比较两个值是否严格相等.它与严格比较运算符(===)的行为基本一致,不同之处只有两个:一是+0不等于-0,二是NaN等于自身. + === - //true NaN === ...

  5. es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  6. 关于Object.defineProperty 的基础知识

    Object.defineProperty 这个方法大家耳熟能详,可以对 对象的属性进行添加或修改的操作.即可以进行  数据劫持 .vue就是通过这个方法来劫持数据的. 平时我们创建对象的时候,一般通 ...

  7. Object.defineProperty()方法学习笔记

    这是js中一个非常重要的方法,ES6中某些方法的实现依赖于它,VUE通过它实现双向绑定 此方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象 参数 Object.def ...

  8. js中Object.defineProperty()方法的解释

    菜菜: “老大,那个, Object.defineProperty 是什么鬼?” 假设我们有个对象 user ; 我们要给它增加一个属性 name , 我们会这么做 1 2 3 var user = ...

  9. 双向绑定Proxy VS Object.defineProperty

    Vue3.0的双向绑定将使用Proxy代替Object.defineProperty,据尤大说,速度提升了1倍. 本文我们来探讨一下Proxy对比Object.defineProperty究竟有哪些优 ...

随机推荐

  1. elasticsearch在postman中创建复杂索引

    body,所选类型为raw和JSON,写的代码为 { "settings":{ "number_of_shards":1, "number_of_re ...

  2. 印象最深的一个bug:sessionStorage缓存在移动端失效

    无bug,不程序:作为程序员的我,不是修bug就是在写bug的路上. 移动端sessionStorage缓存失效是我"印象最深的一个bug"之一,为啥呢,因为这个问题导致我加班到很 ...

  3. Eclipse使用JDBC方式连接SQLServer2008

    JDBC_连接数据库一.配置 (一)  通过SQL Server配置管理器配置相关部分: 右键点击,启动tcp/ip协议右键点击属性查看自己的TCP端口号,记住,后面会用到右键点击SQL Server ...

  4. [atARC128F]Game against Robot

    为了方便,下文中的$n$是原来的$\frac{n}{2}$ 当确定排列$\{p_{i}\}$后,将$a_{i}$按照$p_{i}$从大到小排序,那么机器人即会不断选第一个元素 考虑玩家最后选择的$n$ ...

  5. Spark SQL知识点与实战

    Spark SQL概述 1.什么是Spark SQL Spark SQL是Spark用于结构化数据(structured data)处理的Spark模块. 与基本的Spark RDD API不同,Sp ...

  6. 动画录屏软件-LICEcap

    越来越觉得脑子不够用了,不记博客根本找不到自己以前都干了些啥,自己学的东西用不到就特别难受,学完不用,重新捡起来跟嚼蜡一样难受. 接下来推荐一款动画截屏软件,短小精悍: https://www.coc ...

  7. 快来使用Portainer让测试环境搭建飞起来吧

    Portainer是Docker的图形化管理工具,提供状态显示面板.应用模板快速部署.容器镜像网络数据卷的基本操作(包括上传下载镜像,创建容器等操作).事件日志显示.容器控制台操作.Swarm集群和服 ...

  8. SpringCloud微服务实战——搭建企业级开发框架(二十七):集成多数据源+Seata分布式事务+读写分离+分库分表

    读写分离:为了确保数据库产品的稳定性,很多数据库拥有双机热备功能.也就是,第一台数据库服务器,是对外提供增删改业务的生产服务器:第二台数据库服务器,主要进行读的操作. 目前有多种方式实现读写分离,一种 ...

  9. CSP-S2021 被碾压记

    没啥好说的,不会 T3 这种贪心/dk,或者说我的贪心能力太拉跨导致 T3 这种基本的贪心都不会. 只能说,还好 CSP 不算省选.自爆了,根本没心情写游记. 希望大家不要因为我这次的失误而瞧不起我这 ...

  10. 题解 P5320 - [BJOI2019]勘破神机(推式子+第一类斯特林数)

    洛谷题面传送门 神仙题(为什么就没能自己想出来呢/zk/zk) 这是我 AC 的第 \(2\times 10^3\) 道题哦 首先考虑 \(m=2\) 的情况,我们首先可以想到一个非常 trivial ...