ES5 中对象方法扩展：Object.create()、Object.defineProperties()、对象本身的 get 与 set 详解

绝地灬酷狼 2021-12-05 14:49 334阅读 0赞

##### Object.create() #####

`Object.create(prototype[, descriptors])` 以指定的对象为原型创建新的对象。

*  `prototype`: 新建对象的原型对象，即该参数会被赋值到目标对象(即新对象，或说是最后返回的对象)的原型上。
 *  `propertiesObject` : 添加到新创建对象的可枚举属性（即其自身的属性，而不是原型链上的枚举属性）
    
     *  用该参数来创建非空对象的属性描述符默认是为false的（可读；不可写、不可枚举、不可配置），而构造函数或字面量方法创建的对象属性的描述符默认为true。
 *  返回值：在指定原型对象上添加新属性后的对象。
    
    详细示例：
    
        var obj = { name: "妲己", gender: 'girl',  e}
        var newObj = { }
        // 以 obj 为原型创建了一个新的对象，且添加了新的属性
        newObj = Object.create(obj, { 
            age: { 
                // 设置属性值
                value: 1000,
                // 设置属性可修改，默认不可修改（false）
                writable: true,
                // 设置当前属性可删除(可配置)，默认不可删除
                configurable: true
                // 设置当前属性可以被 for in 枚举，默认不可枚举
                enumerable: true
            },
            /* 该属性默认不可写、不可枚举、不可配置 */
            nickname: { 
                // 属性值
                value: '柔柔'
            }
        })
        console.log(newObj.age)
        newObj.age = 369
        console.log(newObj.age)
        /* // 删除 newObj 的 age 属性 delete newObj.age console.log(newObj.age) */
        // 遍历 newObj 的属性
        for (var item in newObj) { 
            console.log(item)
        }
    
    输出的结果：
    
        { age: 1000, nickname: "柔柔"}
        1000
        999
        age
        name
        gender
        maritalStatus

##### Object.defineProperties() #####

`Object.defineProperties(obj, props)` 直接在一个对象上定义新的属性或修改现有属性，并返回该对象。

*  `obj` 需要定义或修改属性的对象。
 *  `props` 要定义其可枚举属性或修改的属性描述符的对象，该对象的一个或多个键值对，定义了将要为 `obj` 对象添加或修改的属性的具体配置。
    
     *  描述符具有以下键值
    
    `configurable` `enumberable` `value` `writable` `get` `set`
    
    `get` 获取当前属性值的回调函数，获取当前属值时就会触发该回调函数。
    
    `set` 监听当前属性值，当属性值发生变化时会触发该回调函数，并且函数唯一的参数即为修改后的值。
    
    **补充：** 存取器属性：setter 用来存值，getter 用来取值。
    
    示例：
    
        var obj = { uname: "妲己", gender: 'girl', maritalStatus: false}
        Object.defineProperties(obj, { 
            nameAndGender: { 
                // 获取扩展属性的值；在获取扩展属性的值时才会调用该方法（惰性求值）
                get: function () { 
                    return this.uname + ',' + this.gender
                },
                // 监听扩展属性，当扩展属性发生变化时会自动调用；自动调用后会将变化的值传入 set 函数；（该方法将接受唯一参数，即该属性新的参数值）
                set: function (data) { 
                    // 处理传入的值
                    var keyValue = data.split(',') // 将值转成 数组
                    // 修改 this 指向的对象的属性值
                    this.uname = keyValue[0]
                    this.gender = keyValue[1]
                }
            }
        })
        
        console.log(obj.nameAndGender)
        obj.nameAndGender = "小乔" + ',' + "女孩"
        console.log(obj.nameAndGender)
        console.log(obj.uname)
    
    执行结果：
    
        妲己,girl
        小乔,女孩
        小乔

##### 对象本身的 get 与 set #####

*  `get propertyName(){}` 获取当前属性值的回调函数。
 *  `set propertyName() {}` 监听当前属性值变化的回调函数。
    
    示例：
    
        var obj = { 
            uname: "妲己",
            gender: 'girl',
            maritalStatus: false,
        
            get nameAndGender() { 
                return this.uname + ',' + this.gender
            },
            set nameAndGender(data) { 
                var keyValue = data.split(',') // 将值转成 数组
                // 修改 this 指向的对象的属性值
                this.uname = keyValue[0]
                this.gender = keyValue[1]
            }
        }
        
        console.log(obj.nameAndGender)
        obj.nameAndGender = "小乔" + ',' + "女孩"
        console.log(obj.nameAndGender)
        console.log(obj.uname)
    
    执行结果：
    
        妲己,girl
        小乔,女孩
        小乔