javascript - 使用 Proxy 的可观察数组删除了数组功能

Question

我正在尝试弄清楚 Proxy 是如何工作的。

所以 Array.observe() 似乎是 deprecated不幸的是，它很容易实现。无论如何，经过一些研究，代理功能似乎是可行的方法。

每当有东西被推送时，我设法创建了一个可观察的数组(不确定我创建它的方式是否写得很好)......但是代理似乎拦截了每个原型(prototype)功能。所以我似乎无法获得长度，也无法简单地使用它的索引检索值，什么都没有......

由于设计原因，我不能有 2 个数组，所以我如何设法继续使用数组功能但只观察它的推送功能？

function observableArray (arr, callback) {
  console.log('create observableArray');
  return new Proxy(arr, {
    'get': function (target, prop) {
      console.log('prop', prop);
      if (prop === 'push') {
        return function (elem) {
          console.log('pushed element', elem);
          console.log('callback', callback);
          return Array.prototype[prop].apply(target, arguments);
        }
      }
    }
  });
}

var list = [1, 2, 3];

list = observableArray(list, function () {
  console.log('test');
});

list.push(4);

console.log('list', list);

// Doesn't work, is being intercepted
for(var i = 0; i < list.length; i++) {
  console.log(list[i]);
}

Answer 1

终于在休息后自己找到了它:)

您只需要归还使用过的 Prop 。像这样:

function createObservableArray (arr, callback) {
    console.log('create observableArray');
    return new Proxy(arr, {
        'get': function (target, prop) {
            console.log('prop', prop);
            if (prop === 'push') {
                return function (elem) {
                    console.log('pushed element', elem);
                    console.log('callback', callback);
                    return Array.prototype[prop].apply(target, arguments);
                }
            }
            return target[prop]; // <-
        }
    });
}