Object.defineProperty方法

对象的属性在创建的时候,都会带有属性描述符,分为数据描述符存取描述符

数据描述符是具有值的属性,改属性值可能可写,也可能只读,有四个可选键值
configurable:表示当前属性能否从对象上删除,能否改变描述符,默认false,只有值为true时才能实现上述操作;
enumerable:表示该属性是否可以枚举,即是否可以通过for in循环或者 Object.key()遍历到,默认false;
value:表示该属性对应的值可以是任何有效的JS值(数值,对象,函数等),默认undefined;
writable:表示该属性是否可写,即是否可以被赋值运算符修改。默认为false。

存取描述符:也叫访问器属性,有四个可选键值
configurable:同数据描述符中描述;
enumerable:同数据描述符中描述;
get:读取属性时调用的函数,当访问一个属性时,该方法被执行,默认为undefined;
set:修改属性值时调用的函数,当属性值被修改,处罚执行该方法。默认为undefined。

当使用字面量方式或者构造函数创建属性的时候,enumerable 、configurable 、 writable都为 true ,value、get、set都为undefined 。所以平时定义对象的时候,我们可以随意增删改查。

当使用Object.definePropertyObject.definePropertiesObject.create函数的情况下添加的属性。enumerable 、configurable、writable都为 false;value、get、set都为undefined。

Object.defineProperty语法可以修改默认属性的默认值
Object.defineProperty(obj, prop, descriptor)
obj:需要修改属性的对象,必填
prop:需要修改的属性,必填
descriptor:属性修饰符的配置对象,不填的情况下至少要有{}
最终返回的结果是处理后的obj对象
descriptor中可以配置数据描述符和存取描述符的所有属性,但有几点需要注意:
(1)数据描述符中的writable/value不可与存取描述符中的get/set同时存在,会报错
(2)存取描述符只写get时表示该属性只可读,只写set时表示该属性只可写
(3)存取描述符的get与set是个函数,函数里的 this 指向的是需要修改属性的对象obj
Object.defineProperties()可以劫持多个属性,若属性中还有对象,则需要深层遍历

var obj = {
  name: 'javascript',
  age: 8,
  info: {
    action: 'mutual',
    feature: 'smart'
  }
}

observer(obj);

obj.sex = 'female'
obj.info.face = 20;
obj.info.hobit = 'girl';
obj.age = 10;
obj.info.feature= 'small';
console.log(obj);

function observer(target) {
  if (!target || typeof target !== 'object') {
    return;
   }
  // 遍历对象中的每一个属性
   Object.keys(target).forEach(function (val) {
      definePro(target, target[val], val);
   });
}

function definePro(curObj, curVal, curKey) {
  observer(curVal); // 遍历子属性
  Object.defineProperty(curObj, curKey, {
    enumerable: true,
    configurable: true,
    get: function () {
      console.log('获取属性', curVal);
        return curVal;
    },
    set: function (newVal) {
      console.log('设置属性', newVal);
      curObj = newVal;
    }
  });
}

当设置新的属性值的时候,会触发get方法
缺点:
(1)无法检测到数组下标的变化,因此通过数组下标设置值的时候没有响应,vue中只检测了七个方法push、pop、shift、unshift、splice、sort、reverse来解决问题
(2)只能劫持对象的属性,这就需要对对象的每个属性进行遍历,当对象的属性依然是对象时需要递归,耗性能。Proxy可以劫持整个对象,这样就避免了递归+遍历

Proxy:代理
Proxy相当于是对象的代理器,需要访问或操作一个对象的时候,都要先经过代理,这样就可以对外界的访问和修改进行一些过滤

var obj = new Proxy({}, {
  get: function (target, key, receiver) {
  console.log(`getting ${key}!`);
     return Reflect.get(target, key, receiver);
  },
  set: function (target, key, value, receiver) {
    console.log(`setting ${key}!`);
      return Reflect.set(target, key, value, receiver);
     }
});

obj.name = 'html'; //setting name!
obj.name; // getting name!

这样就为obj这个对象设置了一层代理,当设置或获取里面的属性时,会触发set/get方法
ES6提供了Proxy的构造函数,用来生成Proxy实例

var proxy = new Proxy(target, handler);
// target 表示要拦截的对象
// handler 用来指定拦截行为

要使得Proxy起作用,必须针对Proxy实例进行操作,而不是针对目标对象(上例是空对象)进行操作,若handler不设拦截行为,返回的就是原来的对象

// handler 不设置拦截行为, 设置proxy的值就相当于设置target的值
var target = {};
var handler = {};
var proxy = new Proxy(target, handler);
proxy.a = 'b';
console.log(target.a) // "b"

Proxy实例作为对象的原型,不管访问哪个属性,Proxy实例始终返回'ES6',而obj上面没有name属性,就会在原型Proxy实例上找

var proxy = new Proxy({}, {
  get: function(target, property){
    return 'ES6';
  }
});

var obj = Object.create(proxy);
console.log(obj.name);  //ES6

未完。。。

你可能感兴趣的:(Object.defineProperty方法)