Proxy——拦截 JavaScript 操作的方法_javascript 方法拦截

概述

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。
Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

var obj = new Proxy({},  {
  get: function (target, propKey, receiver) {
    console.log(`getting ${propKey}!`);
    return Reflect.get(target, propKey, receiver);
  },
  set: function (target, propKey, value, receiver) {
    console.log(`setting ${propKey}!`);
    return Reflect.set(target, propKey, value, receiver);
  }
});
1
2
3
4
5
6
7
8
9
10

上面代码对一个空对象架设了一层拦截，重定义了属性的读取（get）和设置（set）行为。

obj.count = 2
//  setting count!
++obj.count
//  getting count!
//  setting count!
//  3
1
2
3
4
5
6

上面代码说明，Proxy 实际上重载（overload）了点运算符，即用自己的定义覆盖了语言的原始定义。

ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。

var proxy = new Proxy(target, handler);
1

Proxy 对象的所有用法，都是上面这种形式，不同的只是handler参数的写法。其中，new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。

我们来一个比较极端的拦截方式，如下：

var proxy = new Proxy({}, {
  get: function(target, propKey) {
    return "我就是固执得返回这句话，你拿我怎么样啊？";
  }
});
1
2
3
4
5

proxy.time //  我就是固执得返回这句话，你拿我怎么样啊？
proxy.name // 我就是固执得返回这句话，你拿我怎么样啊？
proxy.title // 我就是固执得返回这句话，你拿我怎么样啊？
1
2
3

上面代码中，作为构造函数，Proxy接受两个参数。第一个参数是所要代理的目标对象（上例是一个空对象），即如果没有Proxy的介入，操作原来要访问的就是这个对象；第二个参数是一个配置对象，对于每一个被代理的操作，需要提供一个对应的处理函数，该函数将拦截对应的操作。

当然，我们可以把这个空对象修改一下，变成一个对象，当然我们可以任意修改返回的值，比如

let obj = {str: "我才是顺位第一！"}
var proxy = new Proxy(obj, {
  get: function(target, propKey) {
    return "我就是固执得返回这句话，你拿我怎么样啊？";
  }
});
proxy .str //我就是固执得返回这句话，你拿我怎么样啊？
proxy .whyFixStr //我就是固执得返回这句话，你拿我怎么样啊？
1
2
3
4
5
6
7
8

上述例子，虽然我们总是能够获取到“我就是固执得返回这句话，你拿我怎么样啊？”但是，我们要知道，obj对象还是它本身

obj // {str: '我才是顺位第一！'}
1

这是因为，要使得Proxy起作用，必须针对Proxy实例（上例是proxy对象）进行操作，而不是针对目标对象（上例是obj对象）进行操作。这里又要注意，如果这里对obj的属性进行set，那么obj也是会改变的。

如果handler没有设置任何拦截，那就等同于直接通向原对象。

var target = {};
var handler = {};
var proxy = new Proxy(target, handler);
proxy.a = 'b';
target.a // "b"
1
2
3
4
5

上面代码中，handler是一个空对象，没有任何拦截效果，访问proxy就等同于访问target。

一个技巧是将 Proxy 对象，设置到object.proxy属性，从而可以在object对象上调用。

var object = { proxy: new Proxy(target, handler) };
1

Proxy 实例也可以作为其他对象的原型对象。

var proxy = new Proxy({}, {
  get: function(target, propKey) {
    return 35;
  }
});

let obj = Object.create(proxy);
obj.time // 35
1
2
3
4
5
6
7
8

上面代码中，proxy对象是obj对象的原型，obj对象本身并没有time属性，所以根据原型链，会在proxy对象上读取该属性，导致被拦截。

同一个拦截器函数，可以设置拦截多个操作。

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) // 1
new fproxy(1, 2) // {value: 2}
fproxy.prototype === Object.prototype // true
fproxy.foo === "Hello, foo" // true
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

关于this指向

我们已经知道了Proxy构建函数可以接收两个参数，分别是target和handle，target是一个对象，而handler是一个函数方法。这里就又要分两个this指向，一个是target对象，一个是handler操作方法。
target
我们看一个例子，

const target = {
  test: function () {
    console.log(this === proxy);
    return "test fn"
  }
};
const handler = {};

const proxy = new Proxy(target, handler);

target.test()  // false
proxy.test()  // true
1
2
3
4
5
6
7
8
9
10
11
12

这里的target中test的方法本身就是target自身，如果我们改成this === target，那么结果就反过来了，如下

const target = {
  test: function () {
    console.log(this === target );
    return "test fn"
  }
};
const handler = {};

const proxy = new Proxy(target, handler);

target.test()  // true
proxy.test()  // false
1
2
3
4
5
6
7
8
9
10
11
12

handler

const target = {
    m: 100,
    n: 23
};
const handler = {
    get(target, property,receiver){
        console.log(this === handler)
        console.log(receiver === proxy)
        console.log('property', property)
        return target[property]
    }
};

const proxy = new Proxy(target, handler);
console.log(proxy.m)
//true
//true
//property m
//100

console.log(proxy.n)
//true
//true
//property n
//23
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。

handler 对象的方法

handler 对象是一个容纳一批特定属性的占位符对象。它包含有 Proxy 的各个捕获器（trap）。

所有的捕捉器是可选的。如果没有定义某个捕捉器，那么就会保留源对象的默认行为。

handler.getPrototypeOf()
Object.getPrototypeOf 方法的捕捉器。

handler.setPrototypeOf()
Object.setPrototypeOf 方法的捕捉器。

handler.isExtensible()
Object.isExtensible 方法的捕捉器。

handler.preventExtensions()
Object.preventExtensions 方法的捕捉器。

handler.getOwnPropertyDescriptor()
Object.getOwnPropertyDescriptor 方法的捕捉器。

handler.defineProperty()
Object.defineProperty 方法的捕捉器。

handler.has()
in 操作符的捕捉器。

handler.get()
属性读取操作的捕捉器。

handler.set()
属性设置操作的捕捉器。

handler.deleteProperty()
delete 操作符的捕捉器。

handler.ownKeys()
Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器。

handler.apply()
函数调用操作的捕捉器。

handler.construct()
new 操作符的捕捉器。

一些不标准的捕捉器已经被废弃并且移除了。

操作 DOM 节点
1

let view = new Proxy({
  selected: null
}, {
  set: function(obj, prop, newval) {
    let oldval = obj[prop];

    if (prop === 'selected') {
      if (oldval) {
        oldval.setAttribute('aria-selected', 'false');
      }
      if (newval) {
        newval.setAttribute('aria-selected', 'true');
      }
    }

    // 默认行为是存储被传入 setter 函数的属性值
    obj[prop] = newval;

    // 表示操作成功
    return true;
  }
});

let i1 = view.selected = document.getElementById('item-1');
console.log(i1.getAttribute('aria-selected')); // 'true'

let i2 = view.selected = document.getElementById('item-2');
console.log(i1.getAttribute('aria-selected')); // 'false'
console.log(i2.getAttribute('aria-selected')); // 'true'
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
26
27
28
29

Proxy 实例的方法

get()

var person = {
  name: "张三"
};

var proxy = new Proxy(person, {
  get: function(target, propKey) {
    if (propKey in target) {
      return target[propKey];
    } else {
      throw new ReferenceError("Prop name \"" + propKey + "\" does not exist.");
    }
  }
});

proxy.name // "张三"
proxy.age // 抛出一个错误
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

上述是对proxy对象进行错误捕获，下列我们对数组负数系列获取做一个计算

function createArray(...elements) {
  let handler = {
    get(target, propKey, receiver) {
      let index = Number(propKey);
      if (index < 0) {
        propKey = String(target.length + index);
      }
      return Reflect.get(target, propKey, receiver);
    }
  };

  let target = [];
  target.push(...elements);
  return new Proxy(target, handler);
}

let arr = createArray('a', 'b', 'c');
arr[-1] // c
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

下面的例子则是利用get拦截，实现一个生成各种 DOM 节点的通用函数dom。const dom = new Proxy({}, {

  get(target, property) {
    return function(attrs = {}, ...children) {
      const el = document.createElement(property);
      for (let prop of Object.keys(attrs)) {
        el.setAttribute(prop, attrs[prop]);
      }
      for (let child of children) {
        if (typeof child === 'string') {
          child = document.createTextNode(child);
        }
        el.appendChild(child);
      }
      return el;
    }
  }
});

const el = dom.div({},
  'Hello, my name is ',
  dom.a({href: '//example.com'}, 'Mark'),
  '. I like:',
  dom.ul({},
    dom.li({}, 'The web'),
    dom.li({}, 'Food'),
    dom.li({}, '…actually that\'s it')
  )
);

document.body.appendChild(el);
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
26
27
28
29

set()
set方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例本身，其中最后一个参数可选。
通过代理，你可以轻松地验证向一个对象的传值。下面的代码借此展示了 set handler 的作用。

let 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');
      }
    }

    // The default behavior to store the value
    obj[prop] = value;

    // 表示成功
    return true;
  }
};

let person = new Proxy({}, validator);

person.age = 100;

console.log(person.age);
// 100

person.age = 'young';
// 抛出异常: Uncaught TypeError: The age is not an integer

person.age = 300;
// 抛出异常: Uncaught RangeError: The age seems invalid

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
26
27
28
29
30
31
32

有时，我们会在对象上面设置内部属性，属性名的第一个字符使用下划线开头，表示这些属性不应该被外部使用。结合get和set方法，就可以做到防止这些内部属性被外部读写。

const handler = {
  get (target, key) {
    invariant(key, 'get');
    return target[key];
  },
  set (target, key, value) {
    invariant(key, 'set');
    target[key] = value;
    return true;
  }
};
function invariant (key, action) {
  if (key[0] === '_') {
    throw new Error(`Invalid attempt to ${action} private "${key}" property`);
  }
}
const target = {};
const proxy = new Proxy(target, handler);
proxy._prop
// Error: Invalid attempt to get private "_prop" property
proxy._prop = 'c'
// Error: Invalid attempt to set private "_prop" property
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

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

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

const 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

上面代码中，obj.foo属性不可写，Proxy 对这个属性的set代理将不会生效。

注意，set代理应当返回一个布尔值。严格模式下，set代理如果没有返回true，就会报错。

'use strict';
const handler = {
  set: function(obj, prop, value, receiver) {
    obj[prop] = receiver;
    // 无论有没有下面这一行，都会报错
    return false;
  }
};
const proxy = new Proxy({}, handler);
proxy.foo = 'bar';
// TypeError: 'set' on proxy: trap returned falsish for property 'foo'
1
2
3
4
5
6
7
8
9
10
11

apply()
apply方法拦截函数的调用、call和apply操作。

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
10
11

上面代码中，变量p是 Proxy 的实例，当它作为函数调用时（p()），就会被apply方法拦截，返回一个字符串。这个例子，target就是外层的target对象，cxt为undefined，然后args就是[]。

var twice = {
  apply (target, ctx, args) {
    return Reflect.apply(...arguments) * 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

上面代码中，每当执行proxy函数（直接调用或call和apply调用），就会被apply方法拦截。

另外，直接调用Reflect.apply方法，也会被拦截。

Reflect.apply(proxy, null, [9, 10]) // 38
1

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

has()方法可以接受两个参数，分别是目标对象、需查询的属性名。

下面的例子使用has()方法隐藏某些属性，不被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
1
2
3
4
5
6
7
8
9
10
11

上面代码中，如果原对象的属性名的第一个字符是下划线，proxy.has()就会返回false，从而不会被in运算符发现。

如果原对象不可配置或者禁止扩展，这时has()拦截会报错。

var obj = { a: 10 };
Object.preventExtensions(obj);

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

'a' in p // TypeError is thrown
1
2
3
4
5
6
7
8
9
10

construct()
construct()方法用于拦截new命令，下面是拦截对象的写法。

const handler = {
  construct (target, args, newTarget) {
    return new target(...args);
  }
};
1
2
3
4
5

construct()方法可以接受三个参数。

target：目标对象。
args：构造函数的参数数组。
newTarget：创造实例对象时，new命令作用的构造函数（下面例子的p）。

const p = new Proxy(function () {}, {
  construct: function(target, args) {
    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

construct()方法返回的必须是一个对象，否则会报错。

const p = new Proxy(function() {}, {
  construct: function(target, argumentsList) {
    return 1;
  }
});

new p() // 报错
// Uncaught TypeError: 'construct' on proxy: trap returned non-object ('1')
1
2
3
4
5
6
7
8

另外，由于construct()拦截的是构造函数，所以它的目标对象必须是函数，否则就会报错。

const p = new Proxy({}, {
  construct: function(target, argumentsList) {
    return {};
  }
});

new p() // 报错
// Uncaught TypeError: p is not a constructor
1
2
3
4
5
6
7
8

参考文献：
Proxy
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy