js之Object.defineProperty和Object.defineProperties详解

痛定思痛。 2023-02-13 08:58 65阅读 0赞

#  1. `Object.defineProperty()`  #

> `Object.defineProperty()` 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

**备注：**应当直接在 [`Object`][Object] 构造器对象上调用此方法，而不是在任意一个 `Object` 类型的实例上调用。

语法：

>     Object.defineProperty(obj, prop, descriptor)

`obj`

要定义属性的对象。

`prop`

要定义或修改的属性的名称或 [`Symbol`][Symbol] 。

`descriptor`

要定义或修改的属性描述符。

例子

在我们平常的使用中，给对象添加一个属性时，直接使用`object.param`的方式就可以了，或者直接在对象中挂载。

const person = {
        name: 'hj'
    }

在ECMAScript5中，对每个属性都添加了几个属性类型，来描述这些属性的特点。他们分别是

*  **`configurable`**:   默认false

`configurable` 特性表示对象的属性是否可以被删除，以及除 `value` 和 `writable` 特性外的其他特性是否可以被修改。

当第一次设置为false后，再改写是不可以的。属性值也是不能被删除的。

*  **`enumerable`**:  默认false

`enumerable` 定义了对象的属性是否可以在 [`for...in`][for...in] 循环和 [`Object.keys()`][Object.keys] 中被枚举。

[`for...in`][for...in] 循环和 [`Object.keys()`][Object.keys]  定义： 任意顺序遍历一个对象的除[Symbol][Symbol 1]以外的[可枚举][Link 1]属性。

打印 对象 o 在谷歌浏览器中查看

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70][]

o.propertyIsEnumerable('a'); // true
    o.propertyIsEnumerable('b'); // false
    o.propertyIsEnumerable('c'); // false
    o.propertyIsEnumerable('d'); // true
    o.propertyIsEnumerable(Symbol.for('e')); // true
    o.propertyIsEnumerable(Symbol.for('f')); // false
    
    var p = { ...o }
    p.a // 1
    p.b // undefined
    p.c // undefined
    p.d // 4
    p[Symbol.for('e')] // 5
    p[Symbol.for('f')] // undefined

*  **`writable`**:  默认false

当 `writable` 属性设置为 `false` 时，该属性被称为“不可写的”。它不能被重新赋值。

*  ** value :  默认undefined**

> 如果对象中不存在指定的属性，`Object.defineProperty()` 会创建这个属性。当描述符中省略某些字段时，这些字段将使用它们的默认值。

*  **`get`**: 当我们通过`person.name`访问name的值时，get将被调用。该方法可以自定义返回的具体值是多少。get默认值为undefined
 *  **`set`**: 当我们通过`person.name = 'Jake'`设置name的值时，set方法将被调用。该方法可以自定义设置值的具体方式。set默认值为undefined

> **考虑特性被赋予的默认特性值非常重要，通常，使用点运算符和 `Object.defineProperty()` 为对象的属性赋值时，数据描述符中的属性默认值是不同的**

> **需要注意的是，不能同时设置value、writable 与 get、set的值。**

var person = {}
    
    // 通过get与set自定义访问与设置name属性的方式
    Object.defineProperty(person, 'name', {
        get: function() {
            // 一直返回TOM
            return 'TOM'
        },
        set: function(value) {
            // 设置name属性时，返回该字符串，value为新值
            console.log(value + ' in set');
        }
    })
    
    // 第一次访问name，调用get
    console.log(person.name)   // TOM
    
    // 尝试修改name值，此时set方法被调用
    person.name = 'alex'   // alex in set
    
    // 第二次访问name，还是调用get
    console.log(person.name) // TOM

> **请尽量同时设置get、set。如果仅仅只设置了get，那么我们将无法设置该属性值。如果仅仅只设置了set，我们也无法读取该属性的值。**

# 2.`Object.defineProperties` #

当我们想要同时设置多个属性的特性时，需要使用`Object.defineProperties`

> 语法：  `Object.defineProperties(obj, props)`

参数说明

> `obj`
> 
> 在其上定义或修改属性的对象。
> 
> `props`
> 
> 要定义其可枚举属性或修改的属性描述符的对象。对象中存在的属性描述符主要有两种：数据描述符和访问器描述符（更多详情，请参阅[`Object.defineProperty()`][Object.defineProperty]）。描述符具有以下键：
> 
> `configurable`
> 
> `true` 当且仅当该属性描述符的类型可以被改变并且该属性可以从对应对象中删除。  
> **默认为 `false`**
> 
> `enumerable`
> 
> `true` 当且仅当在枚举相应对象上的属性时该属性显现。  
> **默认为 `false`**
> 
> `value`
> 
> 与属性关联的值。可以是任何有效的JavaScript值（数字，对象，函数等）。  
> **默认为 [`undefined`][undefined].**
> 
> `writable`
> 
> `true`当且仅当与该属性相关联的值可以用[assignment operator][]改变时。  
> **默认为 `false`**
> 
> `get`
> 
> 作为该属性的 getter 函数，如果没有 getter 则为[`undefined`][undefined]。函数返回值将被用作属性的值。  
> **默认为 [`undefined`][undefined]**
> 
> `set`
> 
> 作为属性的 setter 函数，如果没有 setter 则为[`undefined`][undefined]。函数将仅接受参数赋值给该属性的新值。  
> **默认为 [`undefined`][undefined]**

**用法除了格式基本与****Object.defineProperty相同**

var person = {}
    
    Object.defineProperties(person, {
        name: {
            value: 'Jake',
            configurable: true
        },
        age: {
            get: function() {
                return this.value || 22
            },
            set: function(value) {
                this.value = value
            }
        }
    })
    
    person.name   // Jake
    person.age    // 22

读取属性的特性值

我们可以使用`Object.getOwnPropertyDescriptor`方法读取某一个属性的特性值。

var person = {}
    
    Object.defineProperty(person, 'name', {
        value: 'alex',
        writable: false,
        configurable: false
    })
    
    var descripter = Object.getOwnPropertyDescriptor(person, 'name');
    
    console.log(descripter);  // 返回结果如下
    
    descripter = {
        configurable: false,
        enumerable: false,
        value: 'alex',
        writable: false
    }

[Object]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object
[Symbol]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol
[for...in]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in
[Object.keys]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
[Symbol 1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Enumerability_and_ownership_of_properties
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200528140730642.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70
[Object.defineProperty]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
[undefined]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined
[assignment operator]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Assignment_Operators