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. soname and real name

    [1] https://wiki.openssl.org/index.php/OpenSSL_1.1.0_Changes#Backward_compatibility [2] https://akka ...

  2. [luogu6185]序列

    对于2操作,如果把这些操作看成边,那么对于某一个连通块内的若干个点,满足权值可以任意分配(证明:归纳,若n个点可以,那么先将新增的点调整好,再对原来n个点重新分配即可),因此可以将原图缩点,并将连通块 ...

  3. Python之用型号构成一个三角形代码

    #coding=utf-8 #******直角三角形*********** #左下角三角形 for i in range(1,6):     print '*'*i print "=&quo ...

  4. Matlab流体后处理中的奇淫巧术总结

    Matlab流体后处理中的奇淫巧术总结 主要参考\demos\volvec.m示例 1.等值面绘制 %% Isosurface of MRI Data cla load mri D = squeeze ...

  5. PHP安装PDO_MySQL模块

    下载pdo_mysql扩展 wget http://pecl.php.net/get/PDO_MYSQL-1.0.2.tgz 解压压缩包 tar -zxvf PDO_MYSQL-1.0.2.tgz 执 ...

  6. 【机器学*与R语言】2-懒惰学*K*邻(kNN)

    目录 1.理解使用KNN进行分类 KNN特点 KNN步骤 1)计算距离 2)选择合适的K 3)数据准备 2.用KNN诊断乳腺癌 1)收集数据 2)探索和准备数据 3)训练模型 4)评估模型的性能 5) ...

  7. urllib的基本使用介绍

    1. urllib中urlopen的基本使用介绍 1 ### urllib中urlopen的基本使用介绍 2 3 ## urlopen的基本用法(GET请求) 4 import urllib.requ ...

  8. Oracle-怎么在表的特定位置增加列

    create table tmp as select ID,UserName,RealName,Sex,Tel,Addr from tabName;drop table tabName;rename ...

  9. 数据库(database)介绍

    0.数据定义:除了文本类型的数据,图像.音乐.声音都是数据. 数据分类:结构化数据.非结构化数据.1.数据库定义:"电子化的文件柜","数据仓库".数据库是一个 ...

  10. Redis集合解决大数据筛选

    Redis集合:集合是什么,就是一堆确定的数据放在一起,数学上集合有交集.并集的概念,这个就可以用来做大数据的筛选功能. 以商品为例,假如商品有颜色和分类.价格区间等属性. 给所有统一颜色的商品放一个 ...