Object.defineProperty( )

Object.defineProperty( )

vue中的Object.defineProperty()的原理

首先他的功能是给一个对象添加一个属性，用法是

var obj = {};
Object.defineProperty(obj,'name',{
    value:'123'
})
console.log(obj.name);

参数1是要添加的对象，参数2是添加的属性名key，参数3是添加的属性的值跟属性的描述。value属性就是内容属性，赋予添加的属性的内容。

writable是否可以修改值

数据类型为布尔值。只有添加了这属性的属性描述才可以修改值，

var obj = {};
Object.defineProperty(obj,'name',{
    value:'123',
    writable: true
})
console.log(obj.name);
obj.name = '654'//如果没用添加这个属性描述值无法改变

enumerable是否可枚举

数据类型为布尔值，控制是否可用于枚举，比方说

var user ={
    name:"狂奔的蜗牛",
    age:25
   } ;

Object.defineProperty(user,'age',{
    value: 123,
    enumerable:true
})
Object.defineProperty(user,'gender',{
    value: '2131231231',
    enumerable:false
})

for(const key in user) {
    console.log(user[key]);//狂奔的蜗牛 123
}

不可枚举的属性不可遍历

configurable是否可以被删和重新定义

var user ={
    name:"狂奔的蜗牛",
    age:25
   } ;

Object.defineProperty(user,'age',{
    value: 123,
    configurable:true
})
Object.defineProperty(user,'gender',{
    value: '2131231231',
    configurable:false
})

delete user.age
delete user.gender
console.log(user);
//狂奔的蜗牛   2131231231
Object.defineProperty(user,'gender',{//报错,不可以被重新定义
    value: '6666',
    configurable:true
})
console.log(user);

存取器set and get

set就是在修改对象的值的时候触发的，get就是在访问对象的值的时候触发的

var user ={
 name:"123"
} ;
var count = 12;
//定义一个age 获取值时返回定义好的变量count
Object.defineProperty(user,"age",{
 get:function(){
  return count;
 }
})

console.log(user.age)//返回的是12，因为被get拦截返回了count

var user ={
 name:"123"
} ;
var count = 12;
//定义一个age 获取值时返回定义好的变量count
Object.defineProperty(user,"age",{
 get:function(){
  return count;
 }
 set: function(newValue) {
    count = newValue
}
})

console.log(user.age);//12
user.age = 123//此处执行了set，age的值已经为123
console.log(user.age);//123

使用了get和set方法，就不能设置writable和value