Proxy 与 defineProperty

proxy

链式操作实现

function pipe (value) {
  const arr = [];
  const proxy = new Proxy(
    {},
    {
      // recevier接受者，即proxy代理对象本身
      get(target, property, recevier) { 
        if (property === "get") {
          return arr.reduce((prev, fn) => {
            return fn(prev);
          }, value);
        }
        arr.push(window[property]);
        return recevier;
      },
      set(target, property, value, recevier) {
        
      },
      // 除了get/set，proxy的拦截器handler还有很多
    }
  );

  return proxy;
}

var double = n => n * 2;
var pow = n => n * n;
var reverseInt = n => n
  .toString()
  .split("")
  .reverse()
  .join("");

console.log(pipe(3).double.pow.reverseInt.get); // 63
// 3 > 6 > 36 > 63

捕捉器(traps)

traps 是一系列提供属性访问的方法。类似于操作系统中捕获器的概念。

// 代理陷阱
handler.apply()
handler.construct()
handler.defineProperty()
handler.deleteProperty()
handler.get()
handler.getOwnPropertyDescriptor()
handler.getPrototypeOf()
handler.has()
handler.isExtensible()
handler.ownKeys()
handler.preventExtensions()
handler.set() // 需返回一个布尔值，true表示设置成功
handler.setPrototypeOf()

defineProperty

var obj = {};
var _a;
Object.defineProperty(obj, "a", {
  // 元操作（JS中最基础的操作）
  configurable: true,  // delete
  enumerable: true,
  // value: 1,
  // writable: true,
  // 定义了get/set 就不需要定义value/writable
  get() {
    return _a;
  },
  set(val) {
    _a = val;
  }
});

defineProperties

// Object.defineProperties
Object.defineProperties(obj, {
  "key1": {
    configurable: true,
    enumerable: true,
    value: 1,
    writable: true
  },
  "key2": { 
    // ...
  }
});

参考

mdn-proxy
mdn-Object.defineProperty
mdn-Object.defineProperties