在JavaScript构造函数中指定'this'的值

Question

我正在学习JavaScript而且我正在玩html5 canvas api.由于我首先必须创建canvas元素,而不是获得2d/3d上下文(这是2个未连接的变量),因此创建将这两者合并为一个的东西似乎是合乎逻辑的.

想法是拥有graphics(gfx)对象(实际上是上下文对象),并且graphics.canvas它是对canvas元素的引用,这样我就可以做类似的事情,gfx.fillRect(0,0,150,75);并且可能会重新调整画布gfx.canvas.width = x;等等...

当我尝试创建一个构造函数时,它并没有真正解决,我已经提出了一个context使用canvasas属性返回对象的解决方案,但我不确定这是否是正确的方法.

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

这是我的代码:

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;