引言

es5 给提供了对象属性劫持的方法 Object.definedProperty，es6 同样通过 proxy 给我们带来了类似的功能，而且性能更好

Object.defineProperty （es5）

  • configurable 可配置
  • enumerable 可枚举
  • writeable 可写入
  • value
  • get
  • set
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var tmp = "123";
var obj = {};
Object.defineProperty(obj, "key", {
  get() {
    return tmp;
  },
  set(val) {
    tmp = val;
  },
  enumerable: true,
  configurable: true,
});

obj.key; // 将会调用get方法
obj.key = 123; //将会调用set方法
1
2
3
4
5
6
7
var obj = {};
Object.defineProperty(obj, "key", {
  value: "123",
  writeable: true,
  enumerable: true,
  configurable: true,
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var obj = {};
Object.defindProperties(obj, {
  key1: {
    value: "123",
    writeable: true,
    enumerable: true,
    configurable: true,
  },
  key2: {
    value: "123",
    writeable: true,
    enumerable: true,
    configurable: true,
  },
});

Proxy 拦截器

  • target 劫持对象
  • propkey 操作的属性
  • receiver proxy 的实例
1
2
3
4
5
6
7
8
9
10
11
var obj = {
  name: "zhangsan",
  age: 13,
};
var person = new Proxy(obj, {
  get(target, propKey, receiver) {
    if (propKey in target) {
      return target[propKey];
    }
  },
});

通过 proxy 实现对象的私有属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const obj = {
  _attr: "我是私有属性",
  attr: "我是一个属性",
};
const privateList = ["_attr"];
const object = new Proxy(obj, {
  get(target, key, reciver) {
    if (privateList.indexOf(key) > -1) {
      throw new Error(`${key} 是一个私有属性！`);
    }
    return target[key];
  },
  set(target, key, val) {
    if (privateList.indexOf(key) > -1) {
      throw new Error(`${key} 是一个私有属性！`);
    }
    target[key] = val;
  },
});
console.log(object._attr);