JavaScript每日进阶--如何使用Object.defineProperty

Object.defineProperty()方法

定义：

这个方法会在一个对象上添加属性或者修改对象上的已有的属性，最后返回这个对象。

语法

Object.defineProperty(obj, prop, descriptor)

参数说明

obj：操作的对象
prop：要定义或者修改的属性的名称
description：要定义或者修改的属性的描述

特点

使用该方法添加的属性值是不可变的。而我们平常使用赋值的方式添加的属性是可以修改的，例如使用for...in 和 object.key 获取到某个对象的属性后，如果这个属性是通过赋值的方式添加到对象上的，那么它是可以修改的；如果这个属性是通过object.defineProperty的方法添加的，那么它是不可修改的。我们可以在一些框架的源码中找到它的身影。

对象的属性类别

要使用Object.defineProperty这个方法，我们需要先了解下JavaScript中对象的属性描述符，js中对象的属性描述符分为两类：数据描述符合存取描述符，这两种描述符决定你是否能够给一个对象添加和修改属性。目前JavaScript中对象的属性描述符有6种，分别是：value, writable, enumerable, configurable,get,set。其中，value, writable 和get,set 这两组不能同时存在。

使用方法

var o = {};
Object.defineProperty(o, 'a', {
  value: 37,
  writable : true ,
  enumerable : true,
  configurable : true
})
console.log(o)
o.a = 45;
console.log(o)

这里写图片描述

如果将writable值改为false，则该属性值不能修改
这里写图片描述

set和get以及value和writable的使用方法

/**
*  use writable 
*/
var o = {};
Object.defineProperty(o, 'a', {
  value: 37,
  writable : false,
  enumerable : true,
  configurable : true
})
console.log(o)
o.a = 45;
console.log(o)

/**
* use set and get 
*/

var obj = {};
var myfn = {
  get: function() {
    return "this is myfn-get";
  },
  set: function() {
    this.age = "this is myfn-set"
  }
};

function fn(){
  Object.defineProperty(this, "name", myfn);
}
var ins = new fn();
ins.name  = "jack";
console.log(ins.age)
console.log(ins.name)

输出结果