Object.defineProperty()方法的使用

在我们学习到Vue响应式原理的时候,必然要了解到JS里Object.defineProperty()方法,底层就是用这个方法来实现的。可以实现对象的简单代理。

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

Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false
});

第一个参数object1:是要操作的对象

第二个参数'property1':表示的是object1里的属性

第二个参数:要定义或修改的属性描述符

描述符:

描述符有两种主要形式:数据描述符存取描述符数据描述符是一个具有的属性,该值可以是可写的,也可以是不可写的。存取描述符是由 getter 函数和 setter 函数所描述的属性。一个描述符只能是这两者其中之一;不能同时是两者。

数据描述符:

默认情况下,使用 Object.defineProperty() 添加的属性值是不可修改的。

configurable:当且仅当该属性的 configurable 键值为 true 时,该属性的描述符才能够被改变,同时该属性也能从对应的对象上被删除

enumerable:当且仅当该属性的 enumerable 键值为 true 时,该属性才会出现在对象的枚举属性中

value:该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)

writable:当且仅当该属性的 writable 键值为 true 时,属性的值,也就是上面的 value,才能被改变

存取描述符:

get:当访问该属性时,会调用此函数。执行时不传入任何参数,但是会传入 this 对象。该函数的返回值会被用作属性的值

set:当属性值被修改时,会调用此函数。该方法接受一个参数(也就是被赋予的新值),会传入赋值时的 this 对象

get,set的使用:

Object.defineProperty(o, "b", {
    enumerable : true,
    configurable : true
  // 下面两个缩写等价于:
  // get : function() { return bValue; },
  // set : function(newValue) { bValue = newValue; },
  get() { return bValue; },
  set(newValue) { bValue = newValue; },
});

上一篇:安装PHP环境


下一篇:初始vue