使用代理的可观察数组会删除数组功能

Question

我试图弄清楚代理是如何工作的。

所以看起来 Array.observe(( 被弃用了，不幸的是它很容易实现。无论如何，经过一些研究，代理功能似乎是要走的路。

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

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

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

休息了一会儿终于自己找到了:)

你只需要归还使用的道具。这样：

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]; // <-
        }
    });
}