来源:https://www.jianshu.com/p/5cad911a3630

javascript中，对象定义属性有多种方式：

var personObj = {}; personObj.name = "盖聂"; personObj["sex"] = "男"; 

除了通过“obj.propertyName”和"obj[propertyName]"定义，修改外，还可以通过ES5原生API "obj.defineProperty"来定义和修改对象属性。

 Object.defineProperty(personObj, "name", { value: "剑圣盖聂" }) 

image.png

Object.defineProperty()

语法

Object.defineProperty(obj, prop, descriptor)

参数说明

obj: 必须。要在其上定义或者修改属性的对象
prop: 必须。对象属性的名称
descriptor: 必须。目标属性拥有的特性

返回值

传入函数的对象。即第一个参数obj。

重点关注传入的第三个参数值的属性

descriptor参数值的类型是object对象，主要包括value,writable,enumberable,configurable等字段名。简单分析理解下这些字段的作用和用法。

value: 需要操作的属性值，默认值为undefined

image.png

writable: 属性值是否可重写，为true时表示可重写，反之表示不能重写，默认为false

值为false时：

image.png

值为true时：

image.png

enumberable: 属性是否可被枚举，为true时表示可被枚举，反之表示不能被枚举，默认为false

值为false时：

image.png

值为true时：

image.png

configurable: 是否可以删除目标属性或者是否可以重新修改属性的特性，为true时表示可以删除或者修改，false时相反，默认为false。

该参数具有两个作用

• 目标属性是否可以使用delete删除
• 目标属性是否可以再次设置特性

值为false时：

image.png

值为true时：

image.png

除了可以给新定义的属性设置特性，也可以给已有的属性设置特性。

image.png

存取器描述

当使用存取器描述属性的特性的时候，descriptor参数允许使用getter和setter方法，用于设置或获取对象的某个属性的值。当使用了getter或setter方法，不允许使用writable和value这两个属性。在特性中使用get/set属性来定义对应的方法。

var mockData = { name: "剑圣-卫庄", title: "渊虹" }; var personObj = {}; Object.defineProperty(personObj,"name", { get: function(){ //在获取该属性值得时候触发该函数 debugger; return mockData.name }, set: function(value){ //当设置该属性值的时候触发该函数,设置的新值通过参数value拿到 debugger; mockData.name = value; } }) 

image.png