javascript - 在 JavaScript 构造函数中赋值 'this'

Question

我正在学习 JavaScript，目前正在使用 html5 canvas api。由于我首先必须创建 canvas 元素，然后获取 2d/3d 上下文(这是 2 个未连接的变量)，因此创建将这两个元素合并为一个的东西似乎是合乎逻辑的。

想法是拥有图形(gfx)对象(实际上是上下文对象)和graphics.canvas，它是对canvas元素的引用，这样我就可以做类似的事情gfx.fillRect(0,0,150,75); 并且可能使用 gfx.canvas.width = x; 等调整 Canvas 大小...

当我尝试创建构造函数时，它并没有真正起作用，我想出了一个解决方案，以 canvas 作为属性返回 context 对象，但是我不确定这是否是正确的方法。

解决这个问题的最佳方法是什么？

这是我的代码:

function Canvas (context, width, height) {
    var canvas = document.createElement('canvas'),
    contex = canvas.getContext(context);

    this = contex; // <<-- Getting error here
    this.canvas = canvas;

    this.canvas.width = width;
    this.canvas.height = height;

    this.append = function () {
        document.body.appendChild(this.canvas);
    };
}

function Canvas2 (context, width, height) {
    var canvas = document.createElement('canvas'),
    contex = canvas.getContext(context);

    contex.canvas = canvas;

    contex.canvas.width = width;
    contex.canvas.height = height;

    contex.append = function () {
        document.body.appendChild(this.canvas);
    };

    return contex;
}

var gfx = new Canvas('2d', 400, 400),
gfx2 = Canvas2('2d', 400, 400);

gfx.append();
gfx2.append();

Answer 1

this 是 JavaScript 中的保留字，指的是只读上下文变量。您无法重新分配它。

如果没有理由不能继续使用 contex 变量，就这样做。如果您需要创建局部变量，请将其命名为其他名称:

var that = contex;