ES6标准入门摘要（Proxy）

作者: Upcccz | 来源:发表于2019-10-16 20:51 被阅读0次

Proxy

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

语法： var proxy = new Proxy(target, handler);

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

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

proxy.time // 35 
proxy.name // 35
proxy.title // 35
// 实际就是重载的.运算符读取属性的操作
// 不管访问什么，都被定义的get拦截到，返回35

注意，要使得Proxy起作用，必须针对Proxy实例（上例是proxy对象）进行操作，而不是针对目标对象（上例是空对象，target参数）进行操作。

var target = {};
var handler = {};
var proxy = new Proxy(target, handler);
proxy.a = 'b';
console.log(target.a) // "b"
// 如果没有设置任何拦截，访问proxy就等同于访问target。

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

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

let obj = Object.create(proxy);
// 即obj.__proto__ === proxy
obj.time // 35

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

Proxy 支持的拦截操作

get(target, propKey, receiver)

拦截对象属性的读取，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身（严格地说，是操作行为所针对的对象），其中最后一个参数可选。

利用 Proxy，可以将读取属性的操作（get），转变为执行某个函数，从而实现属性的链式操作。

var pipe = (function () {
  return function (value) {
    var funcStack = [];
    var oproxy = new Proxy({} , {
      get : function (pipeObject, fnName) {
        if (fnName === 'get') {
          return funcStack.reduce(function (val, fn) {
            return fn(val);
          },value);
        }
        funcStack.push(window[fnName]);
        return oproxy;
      }
    });

    return oproxy;
  }
}());

var double = n => n * 2;
var pow    = n => n * n;
var reverseInt = n => n.toString().split("").reverse().join("") | 0;
// 每次调用相当于是将 window.double , window.pow, window.rereverseInt 三个函数push进了funcStack数组
// 当最后一次调用.get的时候，就将传进去的3从左到右开始调用，并将处理后的值交给这下一个函数，返回最终值。
pipe(3).double.pow.reverseInt.get; // 63

利用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;
    }
  }
});

// 每一次dom.xx 都会生成对应的 xx dom元素
// 第一个参数是该dom元素的属性
// 第二个参数及以之后的参数都会当做是该dom元素的子元素（元素节点 或者 文本节点）
const el = dom.div({},
  'Hello, my name is ',
  dom.a({href: 'www.example.com'}, 'Mark'),
  '. I like:',
  dom.ul({},
    dom.li({}, 'The web'),
    dom.li({}, 'Food'),
    dom.li({}, '…actually that\'s it')
  )
);
document.body.appendChild(el);

get方法的第三个参数的例子，它总是指向原始的读操作所在的那个对象，一般情况下就是 Proxy 实例。

const proxy = new Proxy({}, {
  get: function(target, property, receiver) {
    return receiver;
  }
});
// receiver就指向proxy
proxy.getReceiver === proxy // true

// d.__proto__ = proxy
const d = Object.create(proxy);
// d 没有 a 属性，相当就是访问的 proxy.a 
// 这时，receiver就指向d，代表原始的读操作所在的那个对象。
d.a === d // true

如果一个属性不可配置（configurable）且不可写（writable），则 Proxy 不能修改该属性，否则通过 Proxy 对象访问该属性会报错。

set(target, propKey, value, receiver)

拦截对象属性的设置，可以接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例本身，其中最后一个参数可选。返回一个布尔值。

利用set方法，还可以数据绑定，即每当对象发生变化时，会自动更新 DOM。

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

const handler = {
  get (target, key) {
    invariant(key, 'get');
    return target[key];
  },
  set (target, key, value) {
    invariant(key, 'set');
    target[key] = value;
    // 严格模式下，set代理如果没有返回true，就会报错。即在严格模式下返回false，undefined都会报错
    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
// 要读写的属性名的第一个字符是下划线，一律抛错，从而达到禁止读写内部属性的目的。

set方法的第四个参数receiver，与get一样，指的是原始的操作行为所在的那个对象，一般情况下是proxy实例本身

const handler = {
  set: function(obj, prop, value, receiver) {
    obj[prop] = receiver;
  }
};
const proxy = new Proxy({}, handler);

proxy.foo = 'bar';
proxy.foo === proxy // true

const myObj = {};
Object.setPrototypeOf(myObj, proxy);
// 相当于做了一次set ，myObj.__proto__ = proxy

// 设置myObj.foo属性的值时，myObj并没有foo属性，因此引擎会到myObj的原型链去找foo属性。
// myObj的原型对象proxy是一个 Proxy 实例，设置它的foo属性会触发set方法。
// 这时，第四个参数receiver就指向原始赋值行为所在的对象myObj。 
myObj.foo = 'bar';
// 上面的赋值其实没有成功 此时访问myObj.foo 相当于访问proxy.foo
myObj.foo === myObj // true

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

apply(target, object, args)

拦截 Proxy 实例作为函数调用的操作、call和apply操作，接受三个参数，分别是目标对象、目标对象的上下文对象（this）和目标对象的参数数组。

var target = function () {};
var handler = {
  apply: function () {
    return 'I am the proxy';
  }
};
var p = new Proxy(target, handler);
// 此时 target 必须是一个函数，不然p() 会报错 p is not a function
// new Proxy 代理了 target， 返回一个实例
// 访问或者调用这个实例相当于访问或调用target 只不过这些操作被拦截了，会执行handle中定义的对应操作

// 函数调用被apply 拦截
console.log(p());

// "I am the proxy"

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

has(target, propKey)

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

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

var handler = {
  has (target, key) {
    if (key[0] === '_') {
      // 返回false 使用in操作符时不会被发现
      return false;
    }
    // 如果一个属性是从原型链上继承来的，in 运算符也会返回 true。
    return key in target;
  }
};
var target = { _prop: 'foo', prop: 'foo' };
Object.setPrototypeOf(target, {
  aaa: 'aaa'
})
var proxy = new Proxy(target, handler);
console.log('_prop' in proxy); // false
console.log('prop' in proxy); // true
console.log('aaa' in proxy); // true

// 如果某个属性不可配置（或者目标对象不可扩展），这时has拦截会报错。
Object.preventExtensions(target);
console.log('_prop' in proxy); // / TypeError

值得注意的是，has方法拦截的是HasProperty操作，而不是HasOwnProperty操作，即has方法不判断一个属性是对象自身的属性，还是继承的属性。

另外，虽然for...in循环也用到了in运算符，但是has拦截对for...in循环不生效。

construct(target, args)

拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(...args)。

construct方法可以接受两个参数。target：目标对象、args：构造函数的参数对象、newTarget：创造实例对象时，new命令作用的构造函数

var p = new Proxy(function (a, b, c) {}, {
  construct: function(target, args, newTarget) {
    console.log('called: ' + args.join(', '));
    // newTarget 指向 target , 现在设置该函数接受3个参数a,b,c
    // 即newTarget.length为3
    console.log(newTarget.length) // 3

    // 返回的必须是一个对象，否则会报错。
    return { value: args[0] * 10 };
  }
});

(new p(2)).value
// "called: 2"
// 20

deleteProperty(target, propKey)

拦截delete proxy[propKey]的操作，返回一个布尔值，如果这个方法抛出错误或者返回false，当前属性就无法被delete命令删除。还有一种情况，目标对象自身的不可配置（configurable）的属性，不能被deleteProperty方法删除，否则报错。

defineProperty(target, propKey, propDesc)

拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。

并且，如果目标对象不可扩展（non-extensible），则defineProperty不能增加目标对象上不存在的属性，否则会报错。另外，如果目标对象的某个属性不可写（writable）或不可配置（configurable），则defineProperty方法不得改变这两个设置。

getOwnPropertyDescriptor()

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

getPrototypeOf()

getPrototypeOf方法主要用来拦截获取对象原型。具体来说，拦截下面这些操作。

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

getPrototypeOf方法的返回值必须是对象或者null，否则报错。另外，如果目标对象不可扩展（non-extensible）， getPrototypeOf方法必须返回目标对象的原型对象。

isExtensible()

拦截Object.isExtensible操作。Object.isExtensible判断一个对象是否是可扩展的（是否可以在它上面添加新的属性）。

注意，该方法只能返回布尔值，否则返回值会被自动转为布尔值。

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

Object.isExtensible(proxy) === Object.isExtensible(target)

ownKeys()

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

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

const obj = { hello: 'world' };
const proxy = new Proxy(obj, {
  ownKeys: function () {
    return ['a', 'b'];
  }
});

for (let key in proxy) {
  console.log(key); // 没有任何输出
}
// ownkeys指定只返回a和b属性
// 由于obj没有这两个属性，因此for...in循环不会有任何输出。

ownKeys方法返回的数组成员，只能是字符串或 Symbol 值。如果有其他类型的值，或者返回的根本不是数组，就会报错。

使用Object.keys方法时，有三类属性会被ownKeys方法自动过滤，不会返回。

目标对象上不存在的属性
属性名为 Symbol 值
不可遍历（enumerable）的属性

如下

let target = {
  a: 1,
  b: 2,
  c: 3,
  [Symbol.for('secret')]: '4',
};

Object.defineProperty(target, 'key', {
  enumerable: false,
  configurable: true,
  writable: true,
  value: 'static'
});

let handler = {
  ownKeys(target) {
    return ['a', 'd', Symbol.for('secret'), 'key'];
  }
};

let proxy = new Proxy(target, handler);

Object.keys(proxy)
// 只输出了['a']
// 'd'是目标对象上不存在的属性，Symbol.for('secret')是Symbol 值，'key'是不可遍历（enumerable）的属性。

如果目标对象自身包含不可配置的属性，则该属性必须被ownKeys方法返回，否则报错。

如果目标对象是不可扩展的（non-extensible），这时ownKeys方法返回的数组之中，必须包含原对象的所有属性，且不能包含多余的属性，否则报错。

preventExtensions()

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

Object.preventExtensions()方法让一个对象变的不可扩展，也就是永远不能再添加新的属性。

这个方法有一个限制，即如果目标对象是可扩展的，proxy.preventExtensions返回true就会报错，即Object.isExtensible(proxy)为false（代表不可扩展），proxy.preventExtensions才能返回true

setPrototypeOf()

setPrototypeOf方法主要用来拦截Object.setPrototypeOf方法

注意，该方法只能返回布尔值，否则会被自动转为布尔值。另外，如果目标对象不可扩展（non-extensible），setPrototypeOf方法不得改变目标对象的原型。

Proxy.revocable()

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

let target = {};
let handler = {};

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

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

revoke();
proxy.foo // TypeError: Revoked

Proxy.revocable方法返回一个对象，该对象的proxy属性是Proxy实例，revoke属性是一个函数，可以取消Proxy实例。上面代码中，当执行revoke函数之后，再访问Proxy实例，就会抛出一个错误。使用场景是，目标对象不允许直接访问，必须通过代理访问，一旦访问结束，就收回代理权，不允许再次访问。

this问题

虽然 Proxy 可以代理针对目标对象的访问，但它不是目标对象的透明代理，即不做任何拦截的情况下，也无法保证与目标对象的行为一致。主要原因就是在 Proxy 代理的情况下，目标对象内部的this关键字会指向 Proxy 代理。

const target = {
  m: function () {
    console.log(this === proxy);
  }
};
const handler = {};

const proxy = new Proxy(target, handler);

target.m() // false
proxy.m()  // true

下面是一个例子，由于this指向的变化，导致 Proxy 无法代理目标对象。

const _name = new WeakMap();

class Person {
  constructor(name) {
    _name.set(this, name);
  }
  get name() {
    return _name.get(this);
  }
}

const jane = new Person('Jane');
jane.name // 'Jane'

const proxy = new Proxy(jane, {});
proxy.name // undefined
// 此时相当于是 return _name.get(proxy)
// 但是并没有set过 所以返回undefined

上面代码中，目标对象jane的name属性，实际保存在外部WeakMap对象_name上面，通过this键区分。由于通过proxy.name访问时，this指向proxy，导致无法取到值，所以返回undefined。

有些原生对象的内部属性，只有通过正确的this才能拿到，所以 Proxy 也无法代理这些原生对象的属性。

const target = new Date();
const handler = {};
const proxy = new Proxy(target, handler);

proxy.getDate();
// TypeError: this is not a Date object.

让this绑定原始对象，就可以解决这个问题。

const target = new Date('2015-01-01');
const handler = {
  get(target, prop) {
    if (prop === 'getDate') {
      return target.getDate.bind(target);
    }
    return Reflect.get(target, prop);
  }
};
const proxy = new Proxy(target, handler);

proxy.getDate() // 1

实例：Web 服务的客户端

Proxy 对象可以拦截目标对象的任意属性，这使得它很合适用来写 Web 服务的客户端。

所以不用为每一种数据写一个适配方法，只要写一个 Proxy 拦截就可以了。

const service = createWebService('http://example.com/data');

// service.employees =  () => httpGet('http://example.com/data/employees');
// service.employees() 即调用这个httpGet函数去请求 employees 数据

service.employees().then(json => {
  const employees = JSON.parse(json);
  // ···
});

function createWebService(baseUrl) {
  return new Proxy({}, {
    get(target, propKey, receiver) {
      return () => httpGet(baseUrl+'/' + propKey);
    }
  });
}

ES6标准入门摘要（Proxy）

Proxy

Proxy 支持的拦截操作

get(target, propKey, receiver)

set(target, propKey, value, receiver)

apply(target, object, args)

has(target, propKey)

construct(target, args)

deleteProperty(target, propKey)

defineProperty(target, propKey, propDesc)

getOwnPropertyDescriptor()

getPrototypeOf()

isExtensible()

ownKeys()

preventExtensions()

setPrototypeOf()

Proxy.revocable()

this问题

实例：Web 服务的客户端

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

ES6标准入门 摘要 （Proxy）

Proxy

Proxy 支持的拦截操作

get(target, propKey, receiver)

set(target, propKey, value, receiver)

apply(target, object, args)

has(target, propKey)

construct(target, args)

deleteProperty(target, propKey)

defineProperty(target, propKey, propDesc)

getOwnPropertyDescriptor()

getPrototypeOf()

isExtensible()

ownKeys()

preventExtensions()

setPrototypeOf()

Proxy.revocable()

this问题

实例：Web 服务的客户端

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

ES6标准入门摘要（Proxy）