Javascript 代理在 Array.push() 上的行为不同并由索引设置

Question

我正在编写类似于以下 sn-p 的代码：

let arr = [];
let arr_handlers = {
    set: function(target, property, value, receiver) {
        console.log('setting ' + property + ' for ' + target + ' with value ' + value);

        target[property] = value;
        return true;
    }
};
let arr_proxy = new Proxy(arr, arr_handlers);

arr_proxy.push(1);
// setting 0 for  with value 1
// setting length for 1 with value 1
arr_proxy[1] = 5;
//  setting 1 for 1 with value 5
console.log(arr.length);
// 2

问题是当我使用arr_proxy.push() 和通过索引设置值时代理的行为不同：

当数组值由索引设置时，为什么不调用代理设置器来设置长度？

Answer 1

当数组值由索引设置时，为什么不调用代理设置器来设置长度？

因为数组特有的动态length 属性仅存在于target，在您的代理内部。

相比之下，push 方法确实在其接收器上显式设置了.length 属性。它不会通过分配给索引而自动触发。你可以试试

const obj = { length: 0, push: Array.prototype.push };
obj.push(5)
console.log(obj) // { length: 1, 0: 5 }

您可以通过编写实现与arr_proxy.push(5) 调用相同的行为

const _len = arr_proxy.length;
arr_proxy[_len] = 5;
arr_proxy.length = _len + 1;