# Proxy 和 Reflect

Proxy 代理，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。它内置了一系列”陷阱“用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。
Reflect 反射，它提供拦截 JavaScript 操作的方法。这些方法与 Proxy 的方法相同。

简单来说，我们可以通过 Proxy 创建对于原始对象的代理对象，而在代理对象中使用 Reflect 达到对于 JavaScript 原始操作的拦截。

# Proxy

# Proxy 简单示例

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

obj.count = 1
//  setting count!
++obj.count
//  getting count!
//  setting count!
//  2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 同一个拦截器对象，可以设置多个拦截操作

var handler = {
  get: function (target, name) {
    if (name === 'prototype') {
      return Object.prototype;
    }
    return 'Hello, ' + name;
  },

  apply: function (target, thisBinding, args) {
    return args[0];
  },

  construct: function (target, args) {
    return { value: args[1] };
  }
};

var fproxy = new Proxy(function (x, y) {
  return x + y;
}, handler);

fproxy(1, 2)
new fproxy(1, 2)
fproxy.prototype === Object.prototype
fproxy.foo === "Hello, foo"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# Proxy 支持的拦截操作一览，共 13 种

get(target, property, receiver)：拦截对象属性的读取，比如 proxy.foo 和 proxy['foo'] 。
set(target, property, value, receiver)：拦截对象属性的设置，比如 proxy.foo = v 或 proxy['foo'] = v，返回一个布尔值。
has(target, property)：拦截 property in proxy 的操作，返回一个布尔值。
deleteProperty(target, property)：拦截delete proxy[property] 的操作，返回一个布尔值。
ownKeys(target) ：拦截 Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in 循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而 Object.keys() 的返回结果仅包括目标对象自身的可遍历属性。
getOwnPropertyDescriptor(target, property)：拦截 Object.getOwnPropertyDescriptor(proxy, property)，返回属性的描述对象。
defineProperty(target, property, propDesc) ：拦截 Object.defineProperty(proxy, property, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
preventExtensions(target)：拦截 Object.preventExtensions(proxy)，返回一个布尔值。
getPrototypeOf(target)：拦截Object.getPrototypeOf(proxy)，返回一个对象。
isExtensible(target)：拦截 Object.isExtensible(proxy)，返回一个布尔值。
setPrototypeOf(target, proto)：拦截 Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。
apply(target, object, args)：拦截 Proxy 实例作为函数调用的操作，比如 proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
construct(target, args)：拦截 Proxy 实例作为构造函数调用的操作，比如 new proxy(...args)。

# get()

handler.get() 方法用于拦截对象的读取属性操作。接受三个参数，依次为目标对象、属性名和 proxy 实例本身（严格地说，是操作行为所针对的对象）

get 方法可以继承

let proto = new Proxy({}, {
  get(target, property, receiver) {
    console.log('GET ' + property);
    return target[property];
  }
});

let obj = Object.create(proto);
obj.foo // "GET foo"

1
2
3
4
5
6
7
8
9

实现私有变量

var foo = {
  _secret: 'bar',
  public: 'foo'
}

var fooProxy = new Proxy(foo, {
  get(target, property, receiver) {
    if (property.startsWith('_')) {
      console.log('不能获取私有变量')
      return false
    }
    return target[property]
  }
})
fooProxy.public; // foo
fooProxy._secret; // 不能获取私有变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

实现数组读取负数索引

var arr = [1, 2, 3]
var p = new Proxy(arr, {
  get(target, property, receiver) {
    console.log('GET ' + property);
    var index = Number(property);
    if (index < 0) {
      property = target.length + index;
    }
    return target[property];
  }

})

p[-1] // 3

1
2
3
4
5
6
7
8
9
10
11
12
13
14

约束如果一个属性不可配置（configurable），不可写（writable），则 Proxy 不能修改该属性，通过 Proxy 对象访问该属性会报错 TypeError。proxy 提供的方法都有类似的限制，后续不再赘述。

var obj = {};
Object.defineProperty(obj, "a", {
  configurable: false,
  enumerable: false,
  value: 10,
  writable: false
});

var p = new Proxy(obj, {
  get: function (target, prop) {
    return 20;
  }
});

p.a; //会抛出 TypeError

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# set()

handler.set() 方法用来拦截某个属性的赋值操作。接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例本身，其中最后一个参数可选。

修改属性的时候增加校验

var validator = {
  set: function (obj, prop, value) {
    if (prop === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError('The age is not an integer');
      }
      if (value > 200) {
        throw new RangeError('The age seems invalid');
      }
    }

    // 对于满足条件的 age 属性以及其他属性，直接保存
    obj[prop] = value;
    return true;
  }
};
var person = new Proxy({}, validator);
person.age = 100;

person.age // 100
person.age = 'young' // 报错
person.age = 300 // 报错

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

实现私有变量不能修改

var foo = {
  _secret: 'bar',
  public: 'foo'
}

var fooProxy = new Proxy(foo, {
  set(target, property, receiver) {
    if (property.startsWith('_')) {
      throw new Error('不能修改私有变量')
    }
    return target[property]
  }
})
fooProxy.public; // foo
fooProxy._secret = 'c'; // 不能修改私有变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

约束如果目标对象自身的某个属性不可写，那么set方法将不起作用

var obj = {};
Object.defineProperty(obj, 'foo', {
  value: 'bar',
  writable: false
});

var handler = {
  set: function (obj, prop, value, receiver) {
    obj[prop] = 'baz';
    return true;
  }
};

var proxy = new Proxy(obj, handler);
proxy.foo = 'baz';
proxy.foo // "bar"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

应当返回一个 boolean 表示操作成功或失败。严格模式下，没有返回 ture，就会报错

# has()

target.has()方法用来拦截HasProperty操作，即判断对象是否具有某个属性时，这个方法会生效。典型的操作就是in运算符。

实现隐藏私有变量不被发现

var handler = {
  has(target, key) {
    if (key[0] === '_') {
      return false;
    }
    return key in target;
  }
};
var target = {
  _prop: 'foo',
  prop: 'foo'
};
var proxy = new Proxy(target, handler);
'_prop' in proxy // false

// 不生效
Object.keys(proxy)
for (let v in proxy) {
  console.log(v);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# ownKeys()

ownKeys() 方法用来拦截对象自身属性的读取操作。具体来说，拦截以下操作。

Object.getOwnPropertyNames()
Object.getOwnPropertySymbols()
Object.keys()
for...in 循环

var target = {
  _bar: 'foo',
  _prop: 'bar',
  prop: 'baz'
};

var handler = {
  ownKeys(target) {
    return Object.keys(target).filter(key => key[0] !== '_');
  }
};

var proxy = new Proxy(target, handler);
for (var key of Object.keys(proxy)) {
  console.log(target[key]);
}
// "baz"

Object.getOwnPropertyNames(proxy) // ['prop']

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# deleteProperty()

handler.deleteProperty() 方法用于拦截 delete 操作。接受两个参数，依次为目标对象、属性名。如果这个方法抛出错误或者返回false，当前属性就无法被delete命令删除。

var target = { _prop: 'foo' };
var proxy = new Proxy(target, {
  deleteProperty(target, key) {
    if (key.startsWith('_')) {
      throw new Error('不能删除私有变量')
    }
    console.log('删除', key)
    delete target[key];
    return true;
  }
});
delete proxy._prop

1
2
3
4
5
6
7
8
9
10
11
12

# defineProperty()

handler.defineProperty() 方法用于拦截 Object.defineProperty()，Object.defineProperties() 操作。返回值只是用来提示操作情况，不能阻止添加新属性。

var p = new Proxy(
  {},
  {
    defineProperty(target, prop, descriptor) {
      console.log(`called: ${prop}`);
      return true;
    },
  },
);

var desc = {
  configurable: true,
  enumerable: true,
  value: 10
};
Object.defineProperty(p, "a", desc); // "called: a"

Object.defineProperties(p, {
  b: {
    configurable: true,
    enumerable: true,
    value: 10
  }
}) // called: b

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# getOwnPropertyDescriptor()

handler.getOwnPropertyDescriptor() 方法拦截 Object.getOwnPropertyDescriptor()，返回一个属性描述对象或者undefined。

var proxy = new Proxy({
  _foo: 'bar',
  baz: 'tar'
}, {
  getOwnPropertyDescriptor(target, key) {
    if (key[0] === '_') {
      return;
    }
    return Object.getOwnPropertyDescriptor(target, key);
  }
});
Object.getOwnPropertyDescriptor(proxy, 'wat')
// undefined
Object.getOwnPropertyDescriptor(proxy, '_foo')
// undefined
Object.getOwnPropertyDescriptor(proxy, 'baz')
// { value: 'tar', writable: true, enumerable: true, configurable: true }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# getPrototypeOf()

handler.getPrototypeOf() 方法主要用来拦截获取对象原型。拦截下面这些操作。getPrototypeOf()方法的返回值必须是对象或者null，否则报错。

Object.prototype.__proto__
Object.prototype.isPrototypeOf()
Object.getPrototypeOf()
Reflect.getPrototypeOf()
instanceof

var proto = {};
var p = new Proxy({}, {
  getPrototypeOf(target) {
    return proto;
  }
});
Object.getPrototypeOf(p) === proto // true

1
2
3
4
5
6
7

# setPrototypeOf()

setPrototypeOf() 方法主要用来拦截 Object.setPrototypeOf() 方法。该方法只能返回布尔值，否则会被自动转为布尔值。另外，如果目标对象不可扩展（non-extensible），setPrototypeOf() 方法不得改变目标对象的原型。

var handler = {
  setPrototypeOf(target, proto) {
    throw new Error('Changing the prototype is forbidden');
  }
};
var proto = {};
var target = function () {};
var proxy = new Proxy(target, handler);
Object.setPrototypeOf(proxy, proto);
// 只要修改target的原型对象，就会报错。
// Error: Changing the prototype is forbidden

1
2
3
4
5
6
7
8
9
10
11

# isExtensible()

isExtensible() 方法拦截 Object.isExtensible() 操作。该方法只能返回布尔值，否则返回值会被自动转为布尔值。

var p = new Proxy({}, {
  isExtensible: function (target) {
    console.log("called");
    return true;
  }
});

Object.isExtensible(p)
// "called"
// true

1
2
3
4
5
6
7
8
9
10

这个方法有一个强限制，它的返回值必须与目标对象的 isExtensible 属性保持一致，否则就会抛出错误。

var p = new Proxy({}, {
  isExtensible: function (target) {
    return false;
  }
});

// Object.seal(p)
Object.isExtensible(p)
// Uncaught TypeError: 'isExtensible' on proxy: trap result does not reflect extensibility of proxy target (which is 'true')

1
2
3
4
5
6
7
8
9

# preventExtensions()

preventExtensions() 方法拦截 Object.preventExtensions()。该方法必须返回一个布尔值，否则会被自动转为布尔值。

这个方法有一个限制，只有目标对象不可扩展时（即Object.isExtensible(proxy)为false），proxy.preventExtensions才能返回true，否则会报错。

var proxy = new Proxy({}, {
  preventExtensions: function (target) {
    console.log('called');
    Object.preventExtensions(target);
    return true;
  }
});

Object.preventExtensions(proxy)
// "called"
// Proxy {}

1
2
3
4
5
6
7
8
9
10
11

# apply()

handler.apply() 方法拦截函数的调用、call 和 apply 操作。接受三个参数，分别是目标对象、目标对象的上下文对象（this）和目标对象的参数数组。

示例

var target = function () { return 'I am the target'; };
var handler = {
  apply: function () {
    return 'I am the proxy';
  }
};
var p = new Proxy(target, handler);

p() // "I am the proxy"

1
2
3
4
5
6
7
8
9

处理返回值乘以2

var twice = {
  apply(target, ctx, args) {
    return target(args[0], args[1]) * 2;
  }
};

function sum(left, right) {
  return left + right;
};
var proxy = new Proxy(sum, twice);
proxy(1, 2) // 6
proxy.call(null, 5, 6) // 22
proxy.apply(null, [7, 8]) // 30

1
2
3
4
5
6
7
8
9
10
11
12
13

# construct()

target.construct()方法用于拦截 new 命令。接受三个参数，目标对象，构造函数的参数数组和创造实例对象时，new命令作用的构造函数（下面例子的p）。返回值必须是一个对象，否则会报错。

var p = new Proxy(function () {}, {
  construct: function (target, args, newTarget) {
    console.log('called: ' + args.join(', '));
    return { value: args[0] * 10 };
  }
});

(new p(1)).value
// "called: 1"
// 10

1
2
3
4
5
6
7
8
9
10

# Proxy.revocable()

Proxy.revocable()方法返回一个可取消的 Proxy 实例。

var target = {};
var handler = {};

var {
  proxy,
  revoke
} = Proxy.revocable(target, handler);

proxy.foo = 123;
proxy.foo // 123

revoke();
proxy.foo // TypeError: Cannot perform 'get' on a proxy that has been revoked

1
2
3
4
5
6
7
8
9
10
11
12
13

Proxy.revocable()的一个使用场景是，目标对象不允许直接访问，必须通过代理访问，一旦访问结束，就收回代理权，不允许再次访问。

# Reflect

Reflect的中文意思是“反射”，Reflect 上的所有方法都能找到原始的对应语法。

设计目的：

（1）将 Object 对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到 Reflect 对象上。现阶段，某些方法同时在 Object 和 Reflect 对象上部署，未来的新方法将只部署在 Reflect 对象上。也就是说，从 Reflect 对象上可以拿到语言内部的方法。
（2）修改某些 Object 方法的返回结果，让其变得更合理。比如，Object.defineProperty(obj, name, desc) 在无法定义属性时，会抛出一个错误，而 Reflect.defineProperty(obj, name, desc) 则会返回 false。

// 老写法
try {
  Object.defineProperty(target, property, attributes);
  // success
} catch (e) {
  // failure
}

// 新写法
if (Reflect.defineProperty(target, property, attributes)) {
  // success
} else {
  // failure
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

（3）让 Object 操作都变成函数行为。某些 Object 操作是命令式，比如 name in obj 和 delete obj[name] ，而 Reflect.has(obj, name) 和 Reflect.deleteProperty(obj, name) 让它们变成了函数行为。

var myObj = { foo: 'bar' };

// 老写法
'foo' in myObj // true
// 新写法
Reflect.has(myObj, 'foo') // true

// 旧写法
delete myObj.foo;
// 新写法
Reflect.deleteProperty(myObj, 'foo');

1
2
3
4
5
6
7
8
9
10
11

（4）Reflect 对象的方法与 Proxy 对象的方法一一对应，只要是 Proxy 对象的方法，就能在 Reflect 对象上找到对应的方法。这就让 Proxy 对象可以方便地调用对应的 Reflect 方法，完成默认行为，作为修改行为的基础。也就是说，不管 Proxy 怎么修改默认行为，你总可以在 Reflect 上获取默认行为。

var loggedObj = new Proxy(obj, {
  get(target, name) {
    console.log('get', target, name);
    return Reflect.get(target, name);
  },
  deleteProperty(target, name) {
    console.log('delete' + name);
    return Reflect.deleteProperty(target, name);
  },
  has(target, name) {
    console.log('has' + name);
    return Reflect.has(target, name);
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14

每一个Proxy对象的拦截操作（get、delete、has），内部都调用对应的Reflect方法，保证原生行为能够正常执行。添加的工作，就是将每一个操作输出一行日志。

# Reflect 静态方法

Reflect对象一共有 13 个静态方法。和 Proxy 一一对应，参数也是一样的

Reflect.apply(target, thisArg, args)
Reflect.construct(target, args)
Reflect.get(target, name, receiver)
Reflect.set(target, name, value, receiver)
Reflect.defineProperty(target, name, desc)
Reflect.deleteProperty(target, name)
Reflect.has(target, name)
Reflect.ownKeys(target)
Reflect.isExtensible(target)
Reflect.preventExtensions(target)
Reflect.getOwnPropertyDescriptor(target, name)
Reflect.getPrototypeOf(target)
Reflect.setPrototypeOf(target, prototype)

# Proxy 的 this

var obj = {
  _name: 'foo',
  get name() {
    return this._name;
  }
}
var proxy = new Proxy(obj, {
  get(target, prop, receiver) {
    return target[prop];
  }
});
var newObj = Object.create(proxy)

newObj._name = 'bar'
console.log(newObj.name);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

receiver是接受者的意思，表示调用对应属性或方法的主体对象，通常情况下，receiver参数是无需使用的，但是如果发生了继承，为了明确调用主体，就需要指定 receiver 。

# Proxy 和 Reflect

# Proxy

# Proxy 简单示例

# 同一个拦截器对象，可以设置多个拦截操作

# Proxy 支持的拦截操作一览，共 13 种

# get()

# set()

# has()

# ownKeys()

# deleteProperty()

# defineProperty()

# getOwnPropertyDescriptor()

# getPrototypeOf()

# setPrototypeOf()

# isExtensible()

# preventExtensions()

# apply()

# construct()

# Proxy.revocable()

# Reflect

# Reflect 静态方法

# Proxy 的 this

# 参考