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

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
    小乔,女孩
    小乔
    

你可能感兴趣的:(ES5 中对象方法扩展:Object.create()、Object.defineProperties()、对象本身的 get 与 set 详解)