js中Object.defineProperty()方法解释不完整

菜菜：“老板，什么是对象。定义属性？”

假设我们有一个对象用户；我们想给它添加一个属性名，我们将这样做

var用户={ }；User.name='奔流蜗牛'；console.log(用户)；//{name: '火速蜗牛' }如果要添加一个sayHi方法？

user . SayHi=function(){ console . log(' Hi！') };console.log(用户)；//{name: '奔流蜗牛'，sayhi :n}这是什么物件。定义属性。

那么如何使用Object.defineProperty呢？

Object.defineProperty需要三个参数(对象、属性名、描述符)

1对象对象=要添加的对象2属性名称属性名称=要添加的属性的名称[类型：字符串]3描述符属性描述=该属性具有什么样的特征[类型：对象]

那么描述符就是一个对象。他有什么特质？别急，我们一个一个说；

因为我们可以向对象添加属性，所以我们使用它向用户添加名称属性。代码是这样的

var用户={ }；对象。定义属性(用户、' name '、{ value : ' rushing snail ' })console . log(用户)；//{name:' Snail Rushing'}显示仍然是经典的值属性，设置属性值。

等等，属性值只能是字符串吗？我们的数字函数Object boolean等等？

var用户={ }；Object.defineproperty(用户，'，name '，{ value : ' rush snail ' })object . define property(用户，'，isslow '，{ value : true })object . define property(用户，'，sayhi '，{ value : function(){ console . log))})object . define property(用户，'，age '，{ value :12 })object . define property(用户，'，birth '，{ value 3: { date 333366 }

说明事实证明任何类型的数据都是可以的~

问题又来了。如果用户对象已经有了name属性，我们可以通过Object.defineProperty更改这个值吗？

让我们试试

var用户={ }；对象。定义属性(用户、' name '、{ value : ' rushing snail ' })console . log(用户)；user . name=' new=rushing snail ' console . log(用户)；啊？我为什么不改？

原因：上面说了一个描述符有很多属性，除了值属性，还有一个可写的[顾名思义，属性是否可以重新赋值]。接受的数据类型是布尔值(默认值为false) true=支持重新分配。false=只读。

哦，原来如果不设置可写值，默认为只读，所以无法更改

让我们看看如果设置为true是否可以更改。

var用户={ }；object . definepreproperty(user，' name '，{value:' rushing snail '，writable : true })console . log(user)；user . name=' new=rushing snail ' console . log(用户)；

这个描述符还有其他属性吗？可枚举[顾名思义，属性是否可以枚举]接受的数据类型是布尔型(默认值为false) true=支持枚举。false=不支持

呃。枚举？瓦特小时.你什么意思？

假设我们想知道这个用户对象有哪些属性。我们通常这样做

Var用户={ name: '蜗牛'，年龄：25 }；//es6 var key=object . keys(用户)console.log(密钥)；//['name '，' age ']//es5 var key=[]；for(键入用户){ keys.push(键)；} console.log(键)；//['姓名'，'年龄']如果我们用Object的方式定义属性会发生什么。让我们看看输出

Var用户={ name: '蜗牛'，年龄：25 }；//定义一个对象. defineproperty(用户，‘性别’，{ value :‘男性’，enumerable:true})//定义一个对象. defineproperty(用户，‘出生’，{ value :‘1956-05-03’，enumerable : false })//es6 var keys=object . keys(用户)console . log(keys)；//['姓名'，'年龄'，'性别']console.log(用户)；//{姓名： '蜗牛奔跑'，年龄： 25，性别： '男性'，出生地3360 ' 1956-05-03 ' } console . log(user . born)；//1956-05-03说明很明显，我们定义为可枚举=false的出生属性还没有遍历，遍历=其实就是枚举(个人理解，不喜欢就不要喷~)

总结可枚举属性取布尔类型true | false，默认值为false，可以枚举为true的属性；相反，它不能。此设置不影响属性的调用和查看对象的值。

可配置是我们接下来要讨论的属性。该属性有两个功能：

1属性可以删除吗？2ca第一次设置后可以重新定义属性吗

Var用户={ name: '蜗牛'，年龄：25 }；//定义一个不能删除和重新定义的性别。对象。定义属性(用户，‘性别’，{ value:男性’，可枚举3360 true，可配置3360 false })//删除user.gender一次；console.log(用户)；//{姓名： '蜗牛'，年龄： 25，性别： '男性' }//重新定义属性对象。定义属性(用户，“性别”，{值：“男性”，可枚举：true，可配置： true })//未捕获类型错误：无法重新定义属性：性别//将报告错误，如下图所示

设置为真

Var用户={ name: '蜗牛'，年龄：25 }；//定义一个可以删除和重新定义性别的属性(用户、'性别'、{value: '男性'、可枚举3360 true、可配置： true })//删除前的console.log(用户)；//{name: '火速蜗牛'，age: 25，gender: '男性' }//delete delete user . gender；console.log(用户)；//{name:' Snail '，age: 25}//重定义属性对象. defineproperty (user，' gender '，{value:' male '，enumeratable 3360 true，可配置3360 false })//Delete console . log(user)before；//{name: '火速蜗牛'，age: 25，gender: '男' }//删除删除失败删除user.genderconsole.log(用户)；//{name:' Snail Rushing '，age: 25，gender: ' Male ' }如果可配置设置为true，则可以删除此属性并重新定义其特征；相反，不能删除和重新定义属性，默认值为false(Ps。您可以为新定义的属性设置属性，也可以为现有属性设置属性)

最后，我们来谈谈最重要的两个属性set和get(即访问器描述：定义如何访问属性)。这两个属性是用来做什么的？让我们看一下代码

Var用户={ name: '蜗牛' }；var计数=12；//返回已定义的变量count object . definepreproperty(user，' age '，{ get : function(){ return count；} })console . log(user . age)；//12//如果每次得到都返回count 1呢？var用户={ name : ' Running Snail ' }；var计数=12；//返回已定义的变量count object . definepreproperty(user，' age '，{ get : function(){ return count 1；} })console . log(user . age)；//13接下来就不用解释了，得到这个属性的时候你想怎么处理这个值~

来吧，让我们看看设置，更不用说代码了

Var用户={ name: '蜗牛' }；var计数=12；//返回已定义的变量count object . definepreproperty(user，' age '，{ get : function(){ return count；}，set : function(NewVal){ count=NewVal；} })console . log(user . age)；//12 user . age=145；console . log(user . age)；//145console.log(计数)；//145//以此类推，如果要设置，我会自动加1吗？其实我145的设置是146var user={ name: '火速蜗牛' }；var计数=12；//返回已定义的变量count object . definepreproperty(user，' age '，{ get : function(){ return count；}，set : function(NewVal){ count=NewVal 1；} })console . log(user . age)；//12 user . age=145；console . log(user . age)；//146console.log(计数)；//146注意：当使用getter或setter方法时，不允许使用可写和值(如果使用，将直接报告错误)

Get是获取值时的方法，类型是function，获取值时调用，未设置时未定义

Set是设置值时的一种方法，其类型为function。设置值时，它将被调用且未定义

Get或set不必成对出现，只需写其中任何一个即可

Var用户={ name: '蜗牛' }；var计数=12；//定义年龄取值时，返回已定义的变量count object . define property(user，' age '，{ get : function(){ console . log '(此人是来取值的！');返回计数；}，set : function(new val){ console . log('此人是来设置值的！');count=NewVal 1；} })console . log(user . age)；//12 user . age=145；console . log(user . age)；//146

[结束]

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

Value:设置是否可以重写属性writable:的值。True | false enumerable:是否可以枚举目标属性。True | false可配置：是否可以删除目标属性或是否可以再次修改属性true | false set:如何设置目标属性的值get:如何获取目标属性的值接下来，让我们看看如何使用它来进行简单的双向绑定

文章门户=手写一个简单的双向绑定

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。