拦截 JavaScript 数组访问器

Question

我想将一些副作用与每个数组访问器相关联，例如a[i]。例如，如果副作用是向控制台写入消息，则以下程序：

var array = [1, 2, 3]
var total = 0;
for (var i in array) {
  total += array[i]
}
console.log(total);

应该返回如下输出：

1 // access a[0]
2 // access a[1]
3 // access a[2]
6 // print original total

如果我有兴趣拦截数组方法push，我会使用此博客post 中的技术并提供一个拦截器：

var _push = Array.prototype.push;
Array.prototype.push = function( item ) {
    console.log( 'pushing ', item, ' into ', this );
    _push.apply( this, arguments );
}

是否可以将相同的技巧应用于数组访问器？或者对于这个问题有什么更好的解决方案？一个重要的注意事项是我不想修改程序的原始代码。因此，使用 JS proxies 拦截 getter 和 setter 似乎不是解决我的问题的有效选项。

我想介绍的一个特殊副作用是在访问的值未定义的情况下引发异常（JS 数组的索引的某些变体超出范围异常。）我会检查当前访问的值是否等于 @ 987654329@，并抛出异常，否则直接返回原值。

Answer 1

您不能覆盖数组的访问器。 这里举个例子：

Object.defineProperty(Array.prototype, 0, {
  get: function () { return "my get on 0"; }
});
var a = [1,2,3];
console.log(a[0]); // output: 1

但是，如果您尝试对数组中不存在的属性执行相同操作，您将实现它：

Object.defineProperty(Array.prototype, 5, {
  get: function () { return "my get on 5"; }
});
var a = [1,2,3];
console.log(a[5]); // output: my get on 5

您可以做的是通过数组的get 方法访问元素的一个小解决方法。

Array.prototype.get = function(i) { 
  console.log('my print'); 
  console.log(this[i]); 
  return "this is!"; 
};
var a = [1,2,3];
console.log(a.get(0)); // output: my print 1 this is!

所以，回到您的问题，您可以像为 push 所做的那样做一些事情，但使用 get，避免代理：

Array.prototype.get = function (i) {
  console.log('Accessing element: ' + this[i]);
  console.log(this);
  return this[i];
};
var array = [1, 2, 3];
var total = 0;
// be careful that now you cannot do anymore 
// for (var i in array), because inside the array there is also the property get defined and it will cycle also on that
// if you want to cycle again in that way, you need the check through hasOwnProperty method
/*
for(var i in array) {
  if (array.hasOwnProperty(i)){
    console.log(i);
    total += array.get(i);
  } 
}
*/
for(var i = 0; i < array.length; i++) {
  total += array.get(i);
}
console.log(total);

只是为了完成答案，你想要做的事情可以用数组的reduce方法在一行中完成：

var array = [1, 2, 3];
var result = array.reduce(function (accumulator, actual) {
  return accumulator + actual;
}, 0);
console.log(result);

我强烈建议您避免覆盖这些访问器。您将更改代码的基础，因此第三方人员在不阅读所有代码的情况下将无法理解正在发生的事情。此外，您将失去很多内置的有用方法。 我希望这会有所帮助

附言在您的编辑之后，为了检查未定义的值和引发异常，您可以在 get 方法的覆盖中添加检查。 但我的建议只是过滤数组，检测未定义的值并删除它们。 请注意，我使用的是双等号。因为undefined == null 但undefined !== null。 通过这种方式，您将删除未定义和空值。如果您只想删除未定义，请将其更改为if (typeof element === 'undefined')。

像这样，只使用一个带有数组的循环filter 方法：

var data = [1, 2, undefined, 3, 4, undefined, 5];

data = data.filter(function( element, index ) {
   // note that I am using the double equal. because undefined == null but undefined !== null. 
   // in this way you will remove both undefined and null values
   // if you want to remove only undefined, change it to if (typeof element === 'undefined')
   if (element == null) {
     console.log('found and undefined null value at index: ' + index);
   }
   return element != null;
});
console.log(data); // array without undefined and null values

Answer 2

不修改代码是不可能的：

• 您不能覆盖数组文字构造函数。见Overwriting the Array constructor does not affect [], right?

• 您也不能覆盖 for ... in 循环使用的迭代器的行为。见https://tc39.github.io/ecma262/#sec-enumerate-object-properties

• 虽然您可以在 Array.prototype 上添加带有拦截 getter 函数的属性，但是当数组实例上存在同名的属性时，这些原型属性将不会被访问，就像您的示例中的情况一样。

因此您需要修改代码、预处理代码或修改运行代码的 JavaScript 引擎。

在前两种情况下，我建议用显式调用 Array 构造函数替换数组字面量，可以覆盖它：

// Override default array constructor:
Array = (function(Array) {
  function LoggingArray(...args) {
    return new Proxy(Array(...args), {
      get: function(target, property) {
        console.log(target[property]);
        return Reflect.get(target, property);
      }
    });
  }
  Object.setPrototypeOf(LoggingArray, Array);
  LoggingArray.prototype = Array.prototype;
  return LoggingArray;
})(Array);

// Original code without array literal:
var array = Array(1, 2, 3);
var total = 0;
for (var i in array) {
  total += array[i]
}
console.log(total);