JavaScript对象进阶

数据劫持

1. 概念

一旦访问或者修改对象的属性时拦截这个行为(访问/修改) 并对其添加除这个行为外的操作最后返回结果

2. 实现

2.1 getter和setter

在对象中通过在对象中设置 getter 和 setter 方法拦截属性的访问 / 修改

get方法无参数但是有返回值

set方法有参数但是无返回值

  const obj = {
    // 在属性前面加上 _ 代表该属性私有 能被外部访问 但是不应该被外部直接访问
    _name:"bob",
    // 这里的方法名不能和_name相同 否则会无限递归
    get name(){
      console.log(this._name + '被人访问了')
      return this._name;
    },
    set name(value){
      console.log(this._name + '被修改为' + value)
      this._name = value;
    }
  }

  //这里应该使用getter 和 setter 设置的属性名操作
  //而不是对象中的私有属性

  // 在访问有get语法的属性时，调用绑定的函数
  obj.name // bob被人访问了
  // 在改变有set语法的属性时，调用绑定的函数
  obj.name = 'tom' // bob被修改为tom

缺点

每有一个需要劫持的对象属性就要设置一对getter和setter

对象属性和get set后面设置的属性名不能相同否则会造成无限递归

2.2 Object.defineProperty

Object.defineProperty(obj, prop, descriptor)

obj: 要定义属性的对象

prop: 要定义或修改的属性的名称或 Symbol

descriptor: 要定义或修改的属性描述符

返回值: obj(传递给函数的对象)

descriptor描述符

configurable
表示对象的属性是否可以被删除以及除 value 和 writable 特性外的其他特性是否可以被修改

    const object = {}
    Object.defineProperty(object, 'name', {
      get() {
        return name;
      },
      set(value) {
        name = value;
      },
      // 属性可以被删除 默认不可删除 configurable : false
      configurable : true
    });
    
    object.name = 'tom';
    console.log(object.name)// tom
    delete object.name
    console.log(object.name)// undefined

enumerable
定义了对象的属性是否可以在 for...in 循环和 Object.keys() 中被枚举

    const object = {}
    Object.defineProperty(object, 'name', {
      value : 'tom',
      enumerable : true
    });
    Object.defineProperty(object, 'age', {
      // 默认无法被枚举 enumerable = false
      value : 18
    });

    for (i in object) {
      console.log(i)
    }

value
该属性对应的值可以是任何有效的 JavaScript 值(数值对象函数等) 默认为 undefined

const object = {};

Object.defineProperty(object, 'name', {
  // name默认值为tom
  value : 'tom'
});

console.log(object.name);//tom

writable
当且仅当该属性的 writable 键值为 true 时，属性的值也就是上面的 value，才能被赋值运算符改变默认为 false

    const object = {};

    Object.defineProperty(object, 'name', {
      get(){
        console.log(name + '被访问了');
        return name;
      },
      // object中的name不可被修改
      writable : false;
    });

    console.log(object.name);//tom

get
当访问该属性时会调用此函数执行时不传入任何参数但是会传入 this 对象(由于继承关系这里的this并不一定是定义该属性的对象) 该函数的返回值为属性的值默认为 undefined

    const object = {};

    Object.defineProperty(object, 'name', {
      // 访问劫持
      get(){
        console.log(name + '被访问了');
          return name;
      }
    });

    console.log(object.name); //空

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

    const object = {};

    Object.defineProperty(object, 'name', {
      // 访问劫持
      get(){
        console.log(name + '被访问了');
        return name;
      },
      // 修改劫持
      set(value){
        name = value
      }
    });

    object.name = 'tom';
    console.log(object.name);//tom

注意:

对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个具有值的属性，该值可以是可写的，也可以是不可写的。存取描述符是由 getter 函数和 setter 函数所描述的属性。一个描述符只能是这两者其中之一；不能同时是两者。

描述符可拥有的键值

	configurable	enumerable	value	writable	get	set
数据描述符	可以	可以	可以	可以	不可以	不可以
存取描述符	可以	可以	不可以	不可以	可以	可以

2.3 Object.defineProperties

Object.defineProperty(obj, prop1:{
...descriptor
},prop2:{
...descriptor
},...
)

obj: 要定义属性的对象

prop: 要定义或修改的属性的名称或 Symbol

descriptor: 要定义或修改的属性描述符

返回值: obj(传递给函数的对象)

用法和Object.defineProperty大致相同

    var obj = {};
    Object.defineProperties(obj, {
      // obj第一个属性
      'property1': {
        value: true,
        writable: true
      },
      // obj第二个属性
      'property2': {
        value: 'Hello',
        writable: false
      }
    });

和 Object.defineProperty 区别

Object.defineProperty每个属性都要写一遍

Object.defineProperties多个属性可以写在一起

2.4 数据代理Proxy

ES6新增本地对象 new Proxy(target, handler)

target: 要代理的目标对象

handler: 描述符( 以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理的行为 )

返回值: 代理后的对象

    const obj = { name: 'Jack', age: 18 }
    // 开始代理
    const result = new Proxy(obj, {
      // 配置 get 进行代理设置
      get (target, property) {
        // target：要代理的目标对象
        // property：该对象内的每一个属性，自动遍历
        return target[property];
      },
      // 配置 set 进行修改
      set (target, property, val) {
        // target：要代理的目标对象
        // property：该对象内要修改的属性
        // val：要修改的属性的值
        target[property] = val

        // 注意：简单代理需要返回：true
        return true;
      }
    })

Proxy方法和handler方法参考MDN:[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy]