vue2原理之defineProperty

专栏目录请点击

简介

• 我们新建一个对象，建完对象后给对象赋值属性，我们一般进行如下的操作

var obj = {}
obj.name = "sunwukong"

• 除此之外，我们还可以使用defineProperty来对对象添加属性，如下

var obj = {}
obj.name = "sunwukong"

Object.defineProperty(obj, "age", {
    value: 18
})

console.log(obj);

我们可以看到，她也是为对象obj添加了age属性

深入

Object.defineProperty的第三个参数传一个配置对象，这个配置对象可以跟下面的值

| configurable | enumerable | value | writable | get | set

value

用于给属性赋值默认值

var dog = {}
Object.defineProperty(dog,"name",{value:"wangcai"})
console.log(dog.name); // wangcai

get与set

// get set 当读取属性的时候，会调用相应的函数，从而实现属性的拦截操作
var age = 18
Object.defineProperty(obj,"age",{
    get(){
        // 读取的时候会调用get函数
        console.log("你正在读取age属性");
        return age
    },
    set(newVal){
        // 设置属性的时候，会调用当前函数
        console.log(`你正在设置age属性,设置的值为${newVal}`);
        age = newVal
    }
})

打印如下

Writable

// Writable:属性是否可写
Object.defineProperty(obj,"sex",{
    value:"male",
    writable:false
})
// obj.sex = "female" 会报错  Cannot assign to read only property 'sex' of object '#<Object>'

enumerable

// enumerable:定义属性是否能在 for...in 循环和 Object.keys() 中被枚举
var numbers = {}
Object.defineProperty(numbers,"a",{value:1,enumerable:true})
Object.defineProperty(numbers,"b",{value:2,enumerable:true})
Object.defineProperty(numbers,"c",{value:3,enumerable:false})
Object.defineProperty(numbers,"d",{value:4,enumerable:false})

console.log(Object.keys(numbers));

for(let _key in numbers){
    console.log(_key);
}

当然我们还可以用方法propertyIsEnumerable来判断属性是否可枚举

console.log(numbers.propertyIsEnumerable("a")); // true
console.log(numbers.propertyIsEnumerable("d")); // false

configurable

// configurable:用于表示对象的属性是否可以被删除，除 value 和 writable 特性外的其他特性是否可以被修改
var person = {}
Object.defineProperty(person,"name",{get(){return "hello"},configurable:false})

console.log(person.name);
delete person.name // 不可被删除，报错 Cannot delete property 'name' of #<Object>
console.log(person.name);