在JavaScript构造函数中分配'this'的值

我正在学习JavaScript，并且正在使用html5 canvas api。由于我首先必须创建画布元素，并且获取2d/3d上下文（这是2个未连接的变量），因此创建可将这两个元素合并为一个的东西似乎是合乎逻辑的。在JavaScript构造函数中分配'this'的值

想法是有图形（gfx）对象（这实际上是上下文对象）和graphics.canvas这是参考canvas元素，这样我可以这样做gfx.fillRect(0,0,150,75);，也许重新大小画布gfx.canvas.width = x;等等

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

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

这里是我的代码：

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();

来源

2013-04-08 Jinx

您不能分配'this'任何东西。它是只读的。 – 2013-04-08 20:45:20

不要使用'this'。 – js1568 2013-04-08 20:45:49

你根本不能改变'this'指针。这是ecmascript。 – lib3d 2013-04-08 20:46:21

this是在JavaScript保留字，指的是只读上下文变量。你不能重新分配它。

如果没有理由不能简单地继续使用contex变量，那就这样做。如果你需要创建一个局部变量，然后将其命名别的东西：

var that = contex;

来源

2013-04-08 20:45:40 cdhowie

'contex'有意拼写错误。它指的是从'canvas.getContext（context）'检索到的上下文对象，而'context'是我的构造函数的参数，它的值是一个字符串''2d'|| “3d''。我不知道这是如何创建全局变量的，你能解释一下吗？ – Jinx 2013-04-08 20:53:59

@Jinx然后你需要把var放在它之前，除非你希望这个变量是全局变量。 – cdhowie 2013-04-08 20:54:25

注意逗号'，' – Jinx 2013-04-08 20:55:39

有了ES2015，你可以做

Object.assign(this, contex)

来源

2017-09-22 00:30:23 Falieson

在JavaScript构造函数中分配'this'的值

回答

相关问题