javascript - javascript数组上的getter/setter？

Question

有没有办法在数组上获取/设置行为？我想象这样的事情:

var arr = ['one', 'two', 'three'];
var _arr = new Array();

for (var i = 0; i < arr.length; i++) {
    arr[i].__defineGetter__('value',
        function (index) {
            //Do something
            return _arr[index];
        });
    arr[i].__defineSetter__('value',
        function (index, val) {
            //Do something
            _arr[index] = val;
        });
}

Answer 1

使用 Proxies ，您可以获得所需的行为:

var _arr = ['one', 'two', 'three'];

var accessCount = 0;
function doSomething() {
  accessCount++;
}

var arr = new Proxy(_arr, {
  get: function(target, name) {
    doSomething();
    return target[name];
  }
});

function print(value) {
  document.querySelector('pre').textContent += value + '\n';
}

print(accessCount);      // 0
print(arr[0]);           // 'one'
print(arr[1]);           // 'two'
print(accessCount);      // 2
print(arr.length);       // 3
print(accessCount);      // 3
print(arr.constructor);  // 'function Array() { [native code] }'

<pre></pre>

代理构造函数将创建一个对象来包装我们的数组，并使用称为陷阱的函数来覆盖基本行为。 get 函数将被调用以进行任何 属性查找，并在返回值之前调用doSomething()。

代理是 ES6 的一项功能，在 IE11 或更低版本中不受支持。参见 browser compatibility list.