乐趣区

关于javascript:学习VUE总得知道ObjectdefineProxy怎么使用吧

jiezi

学习 VUE 总得晓得 Object.defineProxy 怎么应用吧

工作归工作，不要感觉会用就完事了，很多时候得多看看根底。明天就专门讲一下 Object.defineProxy 是如何应用的，这样在当前讲到 Vue2.X 的源码时，就更容易了解了。

Object.defineProperty()办法能够间接在一个对象上定义一个新属性或者批改它的一个先有属性并返回此对象。

上面先举个例子示意下。

const obj = {};
const obj2 = Object.defineProperty(obj, 'property', {
  value: 42,
  writable: false
});
obj.property = 77;
console.log(obj); // {property: 42}
obj2.test = 3
obj2.property = 78;
console.log(obj) // {test: 3, property: 42}
obj.test = 5
console.log(obj2) //{test: 5, property: 42}

能够看出入参有三个，出参就是原对象（批改后的）

Object.defineProperty(obj, prop, descriptor)

入参中第一个参数，就是要批改的对象，第二个参数是要定义或批改的属性，第三个参数是对应的属性形容符号。前两个比拟好了解，重点在于第三个参数。

属性描述符分为两类，一种是数据描述符一种是存取描述符。

数据描述符蕴含的属性有：configurable、enumerable、value、writable

存取描述符蕴含的属性有：configurable、enumerable、get、set

一个描述符不可能同时存在 value 或 writable 和 get 或 set

示例：

const obj = {};
const obj2 = Object.defineProperty(obj, 'property', {
 writable: false,
 get() {return 1}
});
console.log(obj2)

此时浏览器会报错：Invalid property descriptor. Cannot both specify accessors and a value or writable attribute

属性介绍：

  • configurable

    当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才可能被扭转，同时该属性也能从对应的对象上被删除。默认为 false。

  • enumerable

    当且仅当该属性的 enumerable 键值为 true 时，该属性才会呈现在对象的枚举属性中。默认为 false。

  • value

    该属性对应的值。能够是任何无效的 JavaScript 值（数值，对象，函数等）。默认为 undefined

  • writable

    当且仅当该属性的 writable 键值为 true 时，属性的值，也就是下面的 value，能力被 赋值运算符 (en-US) 扭转。** 默认为 false。

  • get 相比间接应用 value 能够多一些运算在外面 默认值 undefined
  • set 相比间接赋值能够多一些函数进行解决 默认值 undefined

几个简略示例:

const obj = {};
  const obj2 = Object.defineProperty(obj, 'property', {
   writable: false,
   value: 22
  });
  delete obj2.property
  console.log(obj2)
  // 你会发现无奈删除该属性
const obj = {};
  const obj2 = Object.defineProperty(obj, 'property', {get() {​    return property},
   set(val) {​    property = val + 1}/
   
  });
  obj2.property = 2
  console.log(obj2.property) 
  // 显示 3

这里值得注意的是 set 和 get 函数中的属性是如何设置或返回的。

简略用法就是这些，下一篇讲讲 VUE 是如何把它活用起来的。

退出移动版