object.defineProperty的理解

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

实际运用

参考文章
https://segmentfault.com/a/1190000007434923