vue --- object.defineProperty基本使用

Posted 2021-04-16 橘子笔录

1、 object.defineProperty

给一个对象定义一个新的属性或者在修改一个对象现有的属性，并返回这个对象
语法：    object.defineProperty(参数1,参数2,参数3)    参数1：目标对象        参数2：要修改或者添加的属性名称        参数3：目标对象属性的一些特征（是一个对象）    参数1：                value：属性值           参数2：                writable：对象属性值是否可以被修改  true允许 false不允许           参数3：                configurable：对象属性是否可以被删除 true允许 false不允许           参数4：                enumerable：对象属性是否可被枚举           参数5：                get():给一个属性提供getter方法，当访问这个对象的属性值的时候触发该方法           参数6：                set():给一个属性提供setter方法，当设置属性值的时候触发该方法                

2、value

    var obj = {}; Object.defineProperty(obj,"name",{ value:"一只猴" }) Object.defineProperty(obj,"age",{ value:"19" }) console.log(obj); // {name: "一只猴", age: "19"}

3、writable

  var obj = {}; Object.defineProperty(obj,"name",{ value:"一只猴", writable:false // 当设置为false的时候当前对象的属性值不允许被修改 }) obj.name = "两只猴"; console.log(obj.name); // 一只猴

 var obj = {}; Object.defineProperty(obj,"name",{ value:"一只猴",  writable:true // 当设置为true的时候当前对象的属性允许被修改 }) obj.name = '两只猴' console.log(obj.name); // 两只猴

4、configurable

  var obj = {}; Object.defineProperty(obj,"name",{ value:"一只猴", configurable:false // 当设置为false的时候对象的属性不允许被删除 }) delete obj.name; console.log(obj.name); // 一只猴
  var obj = {}; Object.defineProperty(obj,"name",{ value:"yizhihou", configurable:true // 当设置为true的时候对象的属性允许被删除 }) delete obj.name; console.log(obj.name); // undefined

5、enumerable

 var obj = {name:"一只猴",age:"19"} Object.defineProperty(obj,"name",{ enumerable:false // 当设置为false的时候对象的属性不可被枚举 }) Object.defineProperty(obj,"age",{ enumerable:false }) console.log(Object.keys(obj)) // []

 var obj = {name:"一只猴",age:"19"} Object.defineProperty(obj,"name",{ enumerable:true // 当设置为true的时候对象的属性可被枚举 }) Object.defineProperty(obj,"age",{ enumerable:true }) console.log(Object.keys(obj)) // ["name", "age"]

6、for in && Object.keys()区别

  function Person(name,age) { this.name = name; this.age = age; } Person.prototype = { sex:"男" } var man = new Person("yizhihou",19); console.log(Object.keys(man)); // ["name", "age"]
 for (var key in man) { console.log(key); // name age sex }

 总结：      Object.keys(): 返回一个数组，数组值为对象自有的属性，不会包括继承原型的属性      for in : 遍历对象可枚举属性，包括自身属性，以及继承自原型的属性

7、get() && set()

 var obj = {name:"一只猴"} Object.defineProperty(obj,"name",{ get(){ console.log("被访问了") // 当访问的时候会触发get()方法 }, set(newVal){ console.log("被设置了"+newVal) // 当设置的时候会触发set()方法 } }) obj.name;// 输出：被访问了 obj.name='两只猴'; //输出：被设置了两只猴   注意：   当使用了get()方法或者set()方法的时候就不能使用value和writable中的任何一个属性否则会报错