首页 > 解决方案 > Javascript 代理在 Array.push() 上的行为不同并由索引设置

问题描述

我正在处理类似于以下代码段的代码:

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()和通过索引设置值时的行为不同:

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

标签: javascript

解决方案


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

因为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;

推荐阅读