Object.defineProperty()详解

为什么要使用Object.defineProperty()？

我们对一个Object对象设置属性时，一般是通过对象的.操作符或者[]操作符直接赋值的，例如obj1.a = 1 或 obj1['a'] = 1，通过这种方式添加的属性后续可以更改属性值，并且默认该属性是可枚举的，即通过for (const key in obj1) 或 obj1.keys()均可访问到属性。如果我们想在新增属性后不允许再更改属性值或者将该属性设置为非枚举属性，那我们该如何处理呢？

此时我们就需要使用静态方法Object.defineProperty(obj, prop, descriptor)，其可以通过定义属性的元数据信息精确地控制属性的行为。

方法签名

Object.defineProperty(obj, prop, descriptor)

• 参数
  • obj
    Object，Required，要在其上定义属性的对象。
  • prop
    String|Symbol，Required，要定义或修改的属性的名称。
  • descriptor
    Object，Required，将被定义或修改的属性描述符。
• 返回值
  Object，返回被传递给函数的对象obj。

方法描述

该方法允许精确添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的，能够在属性枚举期间呈现出来（for...in 或 Object.keys 方法）， 这些属性的值可以被改变，也可以被删除。方法Object.defineProperty()允许修改默认的属性元数据配置。我们可以认为使用Object.defineProperty()定义的属性在使用上更加严格。

属性描述符

Object.defineProperty(obj, prop, descriptor)中的参数descriptor就是属性描述符，就是定义属性行为的元数据信息。属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个Boolean类型的元数据属性，值为true或false，用于定义对属性的某种操作行为是允许还是禁止。存取描述符是由getter-setter函数对描述的属性。描述符必须是这两种形式之一，即descriptor要么是数据描述符，要么是存取描述符，不能同时包含数据描述符和存取描述符。

• 数据描述符和存取描述符均具有以下可选键值:

  • configurable
    当且仅当该属性的 configurable 为 true 时，才能够再次修改该属性的属性描述符，同时该属性也能从对应的对象上被删除。默认为 false。
  • enumerable
    当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为 false。

• 数据描述符除了具有configurable和enumerable这两个元数据键值外，还具有以下可选键值:

  • value
    该属性的初始值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。
  • writable
    当且仅当该属性的writable为true时，该属性才能被写入值。默认为 false。

• 存取描述符除了具有configurable和enumerable这两个元数据键值外，还具有以下可选键值:

  • get
    一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。默认为 undefined。
  • set
    一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。默认为 undefined。

• 描述符可同时具有的键值

  	configurable	enumerable	value	writable	get	set
  数据描述符	Yes	Yes	Yes	Yes	No	No
  存取描述符	Yes	Yes	No	No	Yes	Yes

  如果一个描述符不具有value,writable,get 和 set 任意一个关键字，那么它将被认为是一个数据描述符。如果一个描述符同时有(value或writable)和(get或set)关键字，将会产生一个异常。

示例

• 创建属性
  如果对象中不存在指定的属性，Object.defineProperty()就创建这个属性。当描述符中省略某些字段时，这些字段将使用它们的默认值。拥有布尔值的字段的默认值都是false。value，get和set字段的默认值为undefined。一个没有get/set/value/writable定义的属性被称为“通用的”，并被“键入”为一个数据描述符。

  • 向对象中添加一个属性并设置数据描述符

    	const obj1 = {};
    
    	// 向对象obj1中添加一个属性a，并设置数据描述符的示例
    	Object.defineProperty(obj1, "a", {
        	value: 1,
        	writable: true,
        	enumerable: true,
        	configurable: true
    	});
    
    	// 对象obj1有了属性a，其值为1
    	console.log(obj1.a) // 输出: 1，表示属性a的【value: 1】默认值已生效
    

  • 向对象中添加一个属性并设置存取描述符

    	const obj1 = {};
    
    	// 向对象中添加一个属性b，并设置存取描述符的示例
    	var bValue;
    	Object.defineProperty(obj1, "b", {
       		get: function () {
            	return bValue;
        	},
        	set: function (newValue) {
            	bValue = newValue;
        	},
        	enumerable: true,
        	configurable: true
    	});
    
    	obj1.b = 2;
    
    	// 对象obj1有了属性b，其值为2
    	console.log(obj1.b); // 输出: 2，表示属性b的getter和setter均生效
    

  • 数据描述符和存取描述符不能混合使用

    	const obj1 = {};
    
    	// 数据描述符和存取描述符不能混合使用
    	// 抛出异常: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute
    	Object.defineProperty(obj1, "c", {
        	value: 1,
        	get: function () {
            	return 2;
        	}
    	});
    

• writable
  当writable设置为false时（默认值即是false），该属性被定义为只读属性，即只能读取该属性值，不能给该属性写入值。

  	const obj1 = {};
  
  	Object.defineProperty(obj1, 'a', {
      	value: 1, // 用于定义a的默认值为1
      	writable: true // 用于定义属性a可写
  	});
  
  	Object.defineProperty(obj1, 'b', {
      	value: 2, // 用于定义b的默认值为2
      	writable: false // 用于定义属性b不可写
  	});
  
  	obj1.a = 100; // 向属性a中写入值
  	console.log(obj1.a); // 输出: 100，表示属性a的【writable: true】已生效
  
  	// 严格模式下抛出异常 TypeError: Cannot assign to read only property 'b' of object '#