Object.defineProperty()的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性。

Object.defineProperty(obj,prop,descriptor)
obj 要在其定义属性的对象
prop 要定义或者修改的属性的名称
descriptor 将被定义或修改的属性描述符

通过Object.defineProperty()为对象定义属性,有两种形式,且不能混合使用,分别为数据描述符,存取描述符。
下面分别描述两者的区别:

数据描述符 -- 特有的两个属性(value,writable)
value 属性值
writable 是否可以改变属性的值。默认为false,不能改变。

    let obj = {}
Object.defineProperty(obj, 'name', {
value: 'jack',
writable: false // 不能改变属性的值
})
obj.name = '123'
console.log(obj)// {name: 'jack'}
    let obj = {}
Object.defineProperty(obj, 'name', {
value: 'jack',
writable: true // 可以改变属性的值
})
obj.name = '123'
console.log(obj)// {name: 123}

存取描述符 -- 是由一对 getter、setter 函数功能来描述的属性
get:一个给属性提供getter的方法,如果没有getter则为undefined。该方法返回值被用作属性值。默认为undefined。
set:一个给属性提供setter的方法,如果没有setter则为undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认值为undefined。

    let obj = {}
let temp = null
Object.defineProperty(obj, 'name', {
get: function (val) {
return temp
// console.log("set方法被调用"+val);
},
set: function (val) {
temp = val
console.log("get方法被调用" + val);
}
})
obj.name = 'chen'
console.log(obj.name) //chen

数据描述符和存取描述都具有以下描述符:
configrable 描述属性是否配置,以及可否删除
enumerable 描述属性是否会出现在for in 或者 Object.keys()的遍历中

configrable
单独设置:configurable: false 不能删除属性、不能重新定义属性
单独设置:configurable: true 能删除属性

同时设置:configurable:true 和 writable:false 可以修改属性值
注意:通过赋值的形式,不可以修改,因为 writable为false

    let obj = {}
Object.defineProperty(obj,'name',{
value: 'chen',
configurable: true,
writable: false
})
Object.defineProperty(obj,'name',{
value: 'rose'
})
//通过属性定义的形式可以修改name的属性值
console.log(obj.name)
//通过赋值的形式,不可以修改,因为 writable为false
obj.name = 'JS'
console.log(obj.name)// rose

同时设置:configurable:false 和 writable:true 可以修改属性值
注意:通过赋值的形式,可以修改,因为 writable为true

    let obj = {}
Object.defineProperty(obj,'name',{
value: 'chen',
configurable: false,
writable: true
})
Object.defineProperty(obj,'name',{
value: 'rose'
})
//通过属性定义的形式可以修改name的属性值
console.log(obj.name) // rose
//通过赋值的形式,可以修改,因为 writable为 true
obj.name = 'JS'
console.log(obj.name)// JS

configurable 总结:
configurable: false 时,不能删除当前属性,且不能重新配置当前属性的描述符(可以把writable的状态由true改为false,而无法由false改为true),但是在writable: true的情况下,可以改变value的值
configurable: true时,可以删除当前属性,可以配置当前属性所有描述符。

enumerable 看如下代码

    let obj = {}
Object.defineProperty(obj,'name',{
value: 'chen',
enumerable: false
}) obj.gender = 'HTML' Object.defineProperty(obj,'age',{
value: '110',
enumerable: true
}) console.log(Object.keys(obj)) //['gender', 'age'] for (let i in obj) {
console.log(i)// gender,age
} console.log(obj.propertyIsEnumerable('name')) // false
console.log(obj.propertyIsEnumerable('gender')) // true
console.log(obj.propertyIsEnumerable('age')) // true

注意:下面代码的区别

    let obj = {}
obj.gender = 'HTML' // 等价于下面的代码
Object.defineProperty(obj,'gender',{ // 等于这里
value: 'HTML',
configurable: true,
writable: true,
enumerable:true
}) Object.defineProperty(obj,'age',{ // 等价于下面的代码
value: '120'
})
Object.defineProperty(obj,'age',{ // 等于这里
value: '120',
configurable: false,
writable: false,
enumerable: false
})

不变性
1、对象常量
结合writable: false 和 configurable: false 就可以创建一个真正的常量属性(不可修改,不可重新定义或者删除)

    let obj = {}
Object.defineProperty(obj,'name',{
value: 'HTML',
configurable: false,
writable: false,
})
delete obj.name //不可删除
obj.name = 'JS' //不可以重新赋值
//通过赋值,可以添加新属性
obj.gender = 'CSS'
console.log(obj.gender) // CSS
//不可重新定义
Object.defineProperty(obj,'name',{value: 'chen'})// 报错: Cannot redefine property: name

2、禁止扩展
如果你想禁止一个对象添加新属性并且保留已有属性,就可以使用 Object.preventExtensions(...)

禁止扩展片段一:

   'use strict'
var obj = {name: 'JS'}
Object.preventExtensions(obj)
obj.gender = 'CSS'
console.log(obj.gender) // Cannot add property gender, object is not extensible

禁止扩展片段二:

    var obj = {name: 'JS'}
Object.preventExtensions(obj) // 禁止扩展
// 但是仍然可以进行配置
Object.defineProperty(obj, 'name',{
value: 'HTML',
writable: false,
configurable: false
})
console.log(obj.name) // HTML
//不能进行扩展
obj.gender = 'CSS'
console.log(obj.gender) //undefined

注意:在非严格模式下,创建属性gender会静默失败,在严格模式下,将会抛出异常。

3、密封
Object.seal()会创建一个密封的对象,这个方法实际上会在一个现有对象上调用object.preventExtensions(...)并把所有现有属性标记为configurable:false。

    var obj = {
name: 'HTML'
}
Object.seal(obj)
obj.gender = 'CSS'
// 不能扩展属性
console.log(obj.gender)// undefined
// 再次验证
console.log(Object.keys(obj)) // ['name']
// 不能再次配置属性
Object.defineProperty(obj,'name',{ // Cannot redefine property: name
name: 'JS',
configurable: true
})

密封之后不仅不能添加新属性,也不能重新配置或者删除任何现有属性(虽然可以改属性的值)

4、冻结
Object.freeze()会创建一个冻结对象,这个方法实际上会在一个现有对象上调用Object.seal(),并把所有现有属性标记为writable: false,这样就无法修改它们的值。

     var obj = {
name: 'HTML'
}
Object.freeze(obj)
obj.name = 'Chen'
// 不可以修改已有属性的值
console.log(obj.name) // HTML

这个方法是可以应用在对象上级别最高的不可变性,它会禁止对于对象本身及其任意直接属性的修改(但是这个对象引用的其他对象是不受影响的)
你可以深度冻结一个对象,具体方法为,首先这个对象上调用Object.freeze()然后遍历它引用的所有对象,并在这些对象上调用Object.freeze()。
但是一定要小心,因为这么做有可能会无意中冻结其他共享对象。

var obj = {
name: 'HTML'
}
Object.freeze(obj)
obj.name = 'Chen'
// 不可以修改已有属性的值
console.log(obj.name) // HTML

简单的理解 Object.defineProperty()的更多相关文章

  1. 深入理解 Object.defineProperty 及实现数据双向绑定

    Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外 ...

  2. 理解 Object.defineProperty

    理解 Object.defineProperty 本文写于 2020 年 10 月 13 日 Object.defineProperty 用于在一个对象上定义新的属性或修改现有属性并返回该对象. 什么 ...

  3. 理解Object.defineProperty()

    理解Object.defineProperty() Object.defineProperty() 方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 基本语法:Obj ...

  4. 理解Object.defineProperty函数中的get与set

    defineProperty是什么: 该函数可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象.通俗理解就是: 给对象添加一个新的属性,或者针对对象里的某些属性,可以给这 ...

  5. 理解Object.defineProperty的作用

    对象是由多个名/值对组成的无序的集合.对象中每个属性对应任意类型的值.定义对象可以使用构造函数或字面量的形式: var obj = new Object; //obj = {} obj.name = ...

  6. [转] 理解Object.defineProperty的作用

    对象是由多个名/值对组成的无序的集合.对象中每个属性对应任意类型的值.定义对象可以使用构造函数或字面量的形式: var obj = new Object; //obj = {} obj.name = ...

  7. 《转》理解Object.defineProperty的作用

    对象是由多个名/值对组成的无序的集合.对象中每个属性对应任意类型的值.定义对象可以使用构造函数或字面量的形式: var obj = new Object; //obj = {} obj.name = ...

  8. vue之Object.defineProperty()

    了解Object.defineProerty()方法 关于Object.defineProperty()方法的解释,理解Object.defineProperty的作用 这篇文章做了很详细的概述 关于 ...

  9. 20+行代码使用es5 Object.defineProperty 实现简单的watch功能

    /** * 一个简单的demo 帮助理解defineProperty,只对Object类型参数有效 */ $watch=function(myObject,callback){ function in ...

随机推荐

  1. [loj2977]巧克力

    先考虑第一个问题,即求最小的巧克力块数 将这张网格图建图(仅对$c_{i,j}\ne -1$的位置建点),即求点数最少的连通块(的点数)使得存在$k$个不同的$c_{i,j}$ (以下$c$仅用一维数 ...

  2. 【PS】证件照转换背景色

    证件照转换背景色 2019-07-14  12:18:49  by冲冲 1. 需求 自由切换证件照的背景颜色(白底.蓝底.红底...) 2. 步骤 ① 双击 图层锁 解锁,弹出的"新建图层0 ...

  3. [NOIP2018 提高组] 旅行

    考虑如果我们要回溯的话,一定要把非环上的子树都搜索完. 而在环上的一个地方回溯,相当于把环上的下一个点置于所有环的顺序的最后. 所以我们只有在环上遇到环上的最大点时且周围的点都比这个点小时非正常回溯即 ...

  4. [NOI2020] 美食家

    很好,自己会做NOI签到题了,去年只要会这题,再多打点暴力,\(Ag\)到手,希望今年\(NOI\)同步赛过\(Ag\)线吧,得有点拿得出手的成绩证明啊. 考虑\(T\)非常大,\(n\)又很小. 想 ...

  5. 【Python小试】使用列表解析式简化代码

    列表解析式的好处: 代码简洁 可读性强 运行快 示例 来自<Python编程>中的一个例子:同时投掷两颗面数不同的骰子(如一个6面的D6和一个10面的D10)n次,统计两个骰子点数之和,并 ...

  6. Notepad++—英文版卡框架翻译

    用到了,就积累到这里,不急一时,慢慢沉淀. 一.File 二.Edit 三.Search 四.View视图 Always on top  #总在最前 Toggle full screen mode  ...

  7. 学习Java的第四天

    一.今日收获 1.java完全手册的第一章 2.   1.6节了解了怎么样用记事本开发java程序 与用Eclipse开发 2.完成了对应例题 二.今日难题 1.一些用法容易与c++的混淆 2.语句还 ...

  8. day31 协程

    day31 协程 一.死锁与递归锁 ​ 所谓死锁:是指两个或者两个以上的进程或线程在执行过程中,因争夺资源而造成的一种互相等待的现象,若无外力作用,它们都将无法推进下去.此时称系统处于死锁状态或系统产 ...

  9. Java 性能优化的 50 个细节

    在JAVA程序中,性能问题的大部分原因并不在于JAVA语言,而是程序本身.养成良好的编码习惯非常重要,能够显著地提升程序性能. #尽量在合适的场合使用单例 使用单例可以减轻加载的负担,缩短加载的时间, ...

  10. Oracle中dbms_random包详解

    Oracle之DBMS_RANDOM包详解参考自:https://www.cnblogs.com/ivictor/p/4476031.html https://www.cnblogs.com/shen ...