10
const t = {m: 1}
20
const p1 = new Proxy(t, {
30
  get: function(obj, prop) {
40
    return obj[prop]
50
  }
60
})
70

80
// 通过代理对象，访问目标对象
90
console.log(p1.m)  // 1
10

11
// 通过代理对象修改目标对象
12
p1.m = 2
13
console.log(t) // {m: 2}

100
class Internal {
200
  constructor(target, handler) {
300
    this.target = target
400
    this.handler = handler
500
  }
600
  get(property, receiver) {
700
    var handler = this.handler;
800
    if (handler.get ==undefined) {
900
      return this.target[property];
100
    }
110
    if (typeof handler.get === 'function') {
120
      return handler.get(this.target, property, receiver);
130
    }
140
  }
150
  set(property, value, receiver) {
160
    var handler = this.handler;
170
    if (handler.set == undefined) {
180
      this.target[property] = value;
190
    } else if (typeof handler.set === 'function') {
200
      var result = handler.set(this.target, property, value, receiver);
210
      if (!result) {
220
        console.error(`set 异常： ${property}`)
230
      }
240
    } else {
250
      console.error("Trap 'set' is not a function: " + handler.set);
260
    }
270
  }
280
}
290

300
function ProxyPolyfill(target, handler) {
310
  return proxyObject(new Internal(target, handler));
320
}
330

340
/**
350
 * Proxy object 这里是核心关键，使用 Object.create 的方式与 目标对象建立绑定关系
360
 * @param {Internal} internal 
370
 * @returns {object}
380
 */
390
function proxyObject(internal) {
400
  var target = internal.target;
410
  var descMap, newProto;
420
  
430
  descMap = observeProto(internal);
440
  newProto = Object.create(Object.getPrototypeOf(target), descMap);
450

460
  descMap = observeProperties(target, internal);
470
  return Object.create(newProto, descMap);
480
}
490

500
/**
510
 * Observe [[Prototype]]
520
 * @param {Internal} internal 
530
 * @returns {object} descriptors
540
 */
550
function observeProto(internal) {
560
  var descMap = {};
570
  var proto = internal.target;
580
  while (proto = Object.getPrototypeOf(proto)) {
590
    var props = observeProperties(proto, internal);
600
    Object.assign(descMap, props);
610
  }
620
  descMap.__PROXY__ = {
630
    get: function () {
640
      return internal.target ? undefined : 'REVOKED';
650
    }
660
  };
670
  return descMap;
680
}
690

700
/**
710
 * Observe properties
720
 * @param {object} obj
730
 * @param {Internal} internal 
740
 * @returns {object} descriptors
750
 */
760
function observeProperties(obj, internal) {
770
  var names = Object.getOwnPropertyNames(obj);
780
  var descMap = {};
790
  for (var i = names.length - 1; i >= 0; --i) {
800
    descMap[names[i]] = observeProperty(obj, names[i], internal);
810
  }
820
  return descMap;
830
}
840

850
/**
860
 * Observe property，让 代理对象的属性操作，映射到目标对象
870
 * @param {object} obj
880
 * @param {string} prop
890
 * @param {Internal} internal 
900
 * @returns {{get: function, set: function, enumerable: boolean, configurable: boolean}}
910
 */
920
function observeProperty(obj, prop, internal) {
930
  var desc = Object.getOwnPropertyDescriptor(obj, prop);
940
  return {
950
    get: function () {
960
      return internal.get(prop, this);
970
    },
980
    set: function (value) {
990
      internal.set(prop, value, this);
100
    },
101
    enumerable: desc.enumerable,
102
    configurable: desc.configurable
103
  };
104
}

1
const t = {m: 1}
2
const p1 = new ProxyPolyfill(t, {
3
  get: function(obj, prop) {
4
    return obj[prop]
5
  }
6
})
7

8
p1.m = 2
9
console.log(t) // {m: 2}

10
var targetImage = (function () {
20
  var imgNode = document.createElement('img');
30
  document.body.appendChild(imgNode);
40
  return {
50
    setSrc: function (src) {
60
      imgNode.src = src;
70
    }
80
  }
90
})();
10

11
var proxyImage = (function() {
12
  var img = new Image();
13
  // 先加载 loading 或者默认图片用于快速显示
14
  targetImage.setSrc('loading.gif')
15
  img.onload = img.onerror = function () {
16
    // 加载完成之后，替换目标图片
17
    targetImage.setSrc(img.src);
18
  };
19

20
  return {
21
    setSrc: function (src) {
22
      // 此时开始加载图片
23
      img.src = src;
24
    }
25
  }
26
})();
27

28
proxyImage.setSrc('https://cn.bing.com/sa/simg/hpb/LaDigue_EN-CA1115245085_1920x1080.jpg');

1
function sum(start, end) {
2
  let res = 0
3
  for (let i = start; i <= end; i++) {
4
    res += i
5
  }
6
  return res
7
}

1
sum(1, 100000)
2
sum(1, 100000)
3
sum(1, 100000)
4
sum(1, 100000)

10
function withSum(base) {
20
  const cache = {}
30

40
  return (...args) => {
50
    const str = `${args[0]}-${args[1]}`
60
    if (!cache[str]) {
70
      cache[str] = base.apply(null, args)
80
    }
90
    return cache[str]
10
  }
11
}

1
const _sum = withSum(sum)
2

3
_sum(1, 100000)
4
_sum(1, 100000)
5
_sum(1, 100000)
6
_sum(1, 100000)