javascript - Javascript拦截数组设置值

Question

有没有办法拦截或覆盖数组设置器？例如：

var array = [];
array[2] = 10;
var myInterceptor = function(index, newVal) {
    do stuff when the array value at index is changed.
}

所以我希望在执行第二行时调用 myInterceptor 。我希望找到一种方法来使用 Object.defineProperty()

Answer 1

不幸的是，无法覆盖[]javascript 数组的访问器。不过，还有其他一些可能性：

1）覆盖push()方法。对于单个数组实例这样做是合理的，但强烈建议您不要更改Array.prototype.push，因为这可能会在 javascript 代码的其他部分中导致意外的副作用。

2）添加自定义set()方法。同样，虽然您可以将其添加到核心 Array 原型中，但强烈建议您不要这样做。运行jsFiddle：http: //jsfiddle.net/dmillz/RUcBM/

arr.set = function (index, value) {
    var oldValue = this[index];
    this[index] = value;
    $.event.trigger("array-change", [this, index, oldValue, value]); // jQuery event trigger, but feel free to use something else besides jQuery    
};

3）（推荐）创建自己的由数组支持的可观察类，或者干脆使用提供可观察对象的库，例如Knockout 的 Observable Array、Ember 的 Observable或Backbone 的 Model

Answer 2

你可以做的是使用Proxy类来拦截set方法。

var handler = { 
    set: (base,idx,val) => { 
        console.log('values:',base,idx,val); base[idx] = val; 
    } 
};

var mylist = new Proxy([],handler)
mylist[0] = 1
mylist
    > Proxy {0: 1}
Array.isArray(mylist)
    > true