Object.defineProperty()与Object.defineProperties()

60 阅读1分钟

Object.defineProperty()

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

注:应当直接在 Object 构造器对象上调用此方法,而不是在任意一个 Object 类型的实例上调用。

语法:

Object.defineProperty(obj, prop, descriptor)

例:

let object = {}
let inValue = ''
Object.defineProperty(object, "name", {
    value: '张三',
    writable: true,//可写
    enumerable: true,//可读
    configurable: false,//不可以删除
    get() {
        return '李四'
    },
    set(val) {
        inValue = val
    }
})

console.log(object.name);

当不止改变一个属性时:

let object1 = { name: '', age: 21 }
let data = { name: '', age: 0 }
let keys = Object.keys(object1)


for (let i in keys) {
    let key = keys[i]
    Object.defineProperty(object1, key, {
        enumerable: true,
        configurable: false,
        get() {
            return data[key]
        },
        set(val) {
            data[key] = val
        }
    })
}

let的vm 与构造函数中的data有关联:

class Vue {
    $options;
    _data;
    constructor(options) {
        this.$options = options
        this._data = options.data
        this.initData()
    }

    initData() {
        let keys = Object.keys(this._data)  //this._data是构造函数的data
        for (let i in keys) {//遍历出data中的所有属性
            let key = keys[i]
            Object.defineProperty(this, key, { //this的指向是vm
                enumerable: true,
                configurable: false,
                get() {
                    return this._data[key]
                },
                set(val) {
                    this._data[key] = val
                }
            })
        }
    }
}

let vm = new Vue({
    data: {
        name: '张三', age: 21
    }
})
console.log(vm);

Object.defineProperties()

bject.defineProperties()  方法直接在一个对象上定义新的属性或修改现有属性,并返回该对象。

语法:

Object.defineProperties(obj, props)

例:

var object = {};
Object.defineProperties(object, {
  'property1': {
    value: true,
    writable: true
  },
  'property2': {
    value: 'Hello',
    writable: false
  }
  // etc. etc.
});