您可以通过定义一个来修复此错误set
您的处理程序上的方法:
set(target, property, value, receiver) {
target[property] = value;
}
这个错误的原因可能看起来有点奇怪。CanvasRenderingContext2D
实例没有自己的strokeStyle
财产。相反,CanvasRenderingContext2DPrototype
(每个的原型CanvasRenderingContext2D
实例)有一个访问器属性,其set
/get
组件将设置并获取实例的笔划样式值:
> ctx.hasOwnProperty("strokeStyle")
false
> Object.getOwnPropertyDescriptor(ctx.__proto__, "strokeStyle")
Object { get: strokeStyle(), set: strokeStyle(), enumerable: true, configurable: true }
(如果您有兴趣了解有关此模式的更多信息,请查看我的回答JSON.parse 在循环对象上不会出错 https://stackoverflow.com/q/20381239/710446.)
这里的问题是this
供应给CanvasRenderingContext2DPrototype.strokeStyle
设置器是proxy
对象,而不是实际的ctx
目的。也就是说,当我们仅在代理上设置属性时:
proxy.isAFake = true;
并在重新定义的设置器中测试它:
Object.defineProperty(ctx.__proto__, "strokeStyle", {
set: function() {
console.log("strokeStyle setter called for proxy?", this.isAFake);
}
});
我们看到设置器记录了仅代理属性:strokeStyle setter called for proxy? true
.
无论出于何种原因,二传手CanvasRenderingContext2DPrototype.strokeStyle
只接受正品CanvasRenderingContext2D
实例,而不是代理实例。