Uncaught :代理集处理程序为属性“长度”返回false

Question

我开始测试以下代理模式，并在使用.splice()方法时获得标题错误。

class A extends Array {
  constructor(...x) {
    super(...x)
    return new Proxy(this, {
      set(o,p,v) {
        console.log("set: ",o,p,v)
        return o[p] = v
      },
            
      get(o,p) {
        console.log("get: ",o,p)
        return o[p]
      },
    })
  }
}

const a = new A(1,2,3)

a.splice(1,0,"a")

产生以下控制台输出：

get:  Array(3) [ 1, 2, 3 ] splice
get:  Array(3) [ 1, 2, 3 ] length
get:  Array(3) [ 1, 2, 3 ] constructor
set:  Array [] length 0

Uncaught TypeError: proxy set handler returned false for property '"length"'
    InnerModuleEvaluation self-hosted:2411
    InnerModuleEvaluation self-hosted:2411
    evaluation self-hosted:2358

有谁知道在使用set时需要true返回.splice()的内部细节吗？

Answer 1

这不仅仅是splice方法，在所有严格模式代码中，当尝试设置不可写属性时都会发生这种情况。陷阱处理程序的falsy返回值表示设置该属性失败。

​

"use strict";
const a = new Proxy([1,2,3], {
  set(o,p,v) {
    console.log("set: ",o,p,v)
    return o[p] = v
  },
});
a.length = 0; // TypeError: 'set' on proxy: trap returned falsish for property 'length'

​

在您的示例中，问题是在陷阱应该返回一个布尔值时返回新的属性值。因此，当您设置a.length = 5时，它是“工作的”，而不是针对a.length = 0。通过使用对象为陷阱提供的默认实现来修复此问题，如果您只想记录而不是实际拦截分配，并且不要忘记接收方参数：

const handler = {
  set(o,p,v,r) {
    console.log("set: ",o,p,v)
    return Reflect.set(o,p,v,r);
  },
  get(o,p,r) {
    console.log("get: ",o,p)
    return Reflect.get(o,p,r);
  },
}

class A extends Array {
  constructor(...x) {
    super(...x)
    return new Proxy(this, handler)
  }
}