更新时间:2022-11-10 10:12:55
您可以通过在处理程序上定义 set
方法来解决此错误:
You can fix this erro by defining a set
method on your handler:
set(target, property, value, receiver) {
target[property] = value;
}
此错误的原因似乎有点奇怪. CanvasRenderingContext2D
实例没有自己的 strokeStyle
属性.相反, CanvasRenderingContext2DPrototype
(每个 CanvasRenderingContext2D
实例的原型)具有访问器属性,其 set
/ get
组件将设置并获取实例的笔触样式值:
The reason for this error might seem a bit strange. CanvasRenderingContext2D
instances don't have their own strokeStyle
property. Instead, the CanvasRenderingContext2DPrototype
(the prototype of every CanvasRenderingContext2D
instance) has an accessor property whose set
/get
components will set and get the stroke-style value for the instance:
> ctx.hasOwnProperty("strokeStyle")
false
> Object.getOwnPropertyDescriptor(ctx.__proto__, "strokeStyle")
Object { get: strokeStyle(), set: strokeStyle(), enumerable: true, configurable: true }
((如果您有兴趣了解有关此模式的更多信息,请查看我对 JSON.parse的回答,不会在循环中出错)对象.)
(If you're interested in learning more about this pattern, have a look at my answer on JSON.parse not erroring on cyclic objects.)
这里的问题是提供给 CanvasRenderingContext2DPrototype.strokeStyle
设置器的 this
是 proxy
对象,而不是实际的 ctx
对象.也就是说,当我们仅在代理服务器上设置属性时:
The problem here is that the this
supplied to the CanvasRenderingContext2DPrototype.strokeStyle
setter is the proxy
object, not the actual ctx
object. That is, when we set a property on the proxy only:
proxy.isAFake = true;
并在重新定义的设置器中对其进行测试:
and test for it in a redefined setter:
Object.defineProperty(ctx.__proto__, "strokeStyle", {
set: function() {
console.log("strokeStyle setter called for proxy?", this.isAFake);
}
});
我们看到设置器记录了仅代理属性: strokeStyle设置器调用了代理吗?是
.
We see the setter logs the proxy-only property: strokeStyle setter called for proxy? true
.
无论出于何种原因, CanvasRenderingContext2DPrototype.strokeStyle
上的设置器将仅接受真正的 CanvasRenderingContext2D
实例,而不接受代理实例.
For whatever reason, the setter on CanvasRenderingContext2DPrototype.strokeStyle
will accept only a genuine CanvasRenderingContext2D
instance, not a proxied one.