js 中的Object.defineProperty()

在js中我们给一个对象添加属性的常用方法是用.语法，或者直接在对象创建时给他添加，如下

var obj = new Object()
obj.pro = "pro"

var obj1 = {
     pro1 = "pro1"
}

上图即为给一个对象实例添加属性的最常用的方法。然而在js中，给对象添加属性并不是只有这两种方法.接下来就是我们今天要提到的另一种给对象添加属性的方法Object.defineProperty()

Object.defineProperty() 方法可以直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象。

Object.defineProperty(obj, prop, descriptor)

参数说明：

1. obj：必需。目标对象

2. prop：必需。需定义或修改的属性的名字

3. descriptor：必需。目标属性所拥有的特性（也就是说明这个属性能否可读写，被删除等等）

返回值：

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

下面我们演示如何使用该函数在obj上添加一个新属性

Object.defineProperty(obj,'newpro',{
   configurable:true,     
   enumerable:true,
   writable:true,
   value:'newpro'
})
console.log(obj.name); 

[[Configurable]]

表示是否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性(属性直接定义在对象中，默认为true)。 当为false时，不能重新定义不能使用delete删除。

[[Enumerable]]

表示能否通过for-in循环返回属性，也就是该属性是否可见(属性直接定义在对象中，默认为true)

[[Writable]]

表示能否修改属性的值。(属性直接定义在对象中，默认为true)

[[Value]]

包含这个属性的数据值 name:jacky

要修改属性默认的特性，也必须使用Object.defineProperty()该方法才能做到。

除此之外，Object.defineProperty()还能自定义访问器属性：

何为访问器属性呢？我们可以简单理解为一种专门为了操作该对象上的数据属性的特殊属性。

访问器属性只包含一对函数，setter (即为一个set函数)，getter （即为一个set函数）

get
当访问(调用)该属性时，会触发此函数，返回值会被用作属性的值，如果没有设置 getter，则返回 undefined， 默认为 undefined。

set
当属性值被修改时，会触发此函数。该方法接受一个参数（需要修改的值），会传入赋值时的 this 对象。如果没有 setter，则返回 undefined， 默认为 undefined。

下面我们给obj对象定义一个访问器属性去获取和修改里面的pro属性

Object.defineProperty(obj,"change",{

get:function(){
return this.pro
},
set:function(newpro){
this.pro = newpro
}})
console.log(obj.pro)
obj.change = "123"
console.log(obj.pro)