Question

好的，所以Javascript是一种'原型'语言，根据我的理解，这意味着它有这样的东西：

var c = document.getElementById('myCanvas');
c.ctx = c.getContext('2d');

现在，如果我这样做：

var c = document.getElementById('myCanvas');
c.ctx = c.getContext('2d');
c = document.getElementById('newCanvas');

c.ctx会在影响全新画布时保持并正常运行吗？谢谢！

我的实验说不，但我问，因为也许我错过了一些东西。如果理论上这不起作用，你有没有什么好方法可以相对容易地解决它？（或者不那么容易，但很容易就是偏好！）

Answer 1

c.ctx会在影响全新画布时保持并正常运行吗？

不，您正在为c创建一个全新的参考。

所以Javascript是一种'原型'语言

为什么不在原型中定义你想要的东西呢？

Object.defineProperty(
    HTMLCanvasElement.prototype,
    'ctx',
    {
        'get': function () { return this.getContext('2d'); },
        'configurable': true
    }
);

现在，通过DOM接口访问的所有<canvas>个元素都有一个属性 ctx ，获取其上下文。

如果您对缓存的上下文感到满意，可以改用

function () { return this.ctx = this.getContext('2d'); }

在实例上设置一个新属性，该属性遮蔽了原型的getter。

Answer 2

分配时：

c = document.getElementById('newCanvas');

您正在使用对新对象的引用替换整个c变量。之前的c对象的先前属性将不会保留。

Answer 3

在您的代码中

var c = document.getElementById('myCanvas');
c.ctx = c.getContext('2d');
c = document.getElementById('newCanvas');

在最后一行，你只是覆盖c变量。

您可以将其视为运行此

var c = document.getElementById('myCanvas');
c.ctx = c.getContext('2d');
c = 3;

假设您编写的代码实际上意味着什么：虽然您很幸运，但是ctx内置了一个画布引用（它与您想要的相反，但它是相同的交易）

ctx.canvas;

Javascript：复制的变量和原型

3 个答案: