尝试在事件处理程序中访问时，画布以未定义的方式返回

Question

我不知道为什么，但是当我尝试在事件处理程序中访问画布时，它返回为未定义。 我的代码：

var example = function(){

    this.canvas = wind.document.createElement("canvas");
    this.canvas.height = wind.innerHeight;
    this.canvas.width =  wind.innerWidth;

    document.body.appendChild(canvas);

    window.addEventListener('resize', function(){
        this.canvas.height = wind.innerHeight; // Error here saying canvas is undefined
        this.canvas.width =  wind.innerWidth;
    }, false);

}

Answer 1

在与函数example不同的上下文中调用事件处理程序，因此this的值将不同（并且this.canvas将不存在）。

要引用原始画布，只需将其保存在变量中并使用闭包即可：

var cv = this.canvas = wind.document.createElement("canvas");
cv.height = wind.innerHeight;
cv.width =  wind.innerWidth;

document.body.appendChild(cv);

window.addEventListener('resize', function(){
    cv.height = wind.innerHeight;
    cv.width =  wind.innerWidth;
}, false);

Answer 2

我在一个简单的网页中测试了您的代码。 通过结束标记将您的代码加载到底部，在我看到风到窗口的任何地方都进行了更改。 它具有以下内容：

1）在浏览器控制台（大多数浏览器为F12）中，输入example（）; undefined //返回
2）打字画布； 它返回以下内容：canvas height =“ 522” width =“ 911” //宽度会根据我是缩小还是扩大窗口大小而变化。

说明：我将该代码块放在底部，因此其他所有内容都加载到文档对象模型（DOM）中。 然后，我在浏览器控制台中调用该函数（第1步），它返回未定义的（不一定是一件坏事。例如，在Ruby中，当您在IRB中创建函数时，它返回Nil。）。 在这种情况下，未定义它将告诉您该函数示例是在过去的某个时间成功创建的，并在步骤1中生效。
有几种方法可以调用函数，但是如果您不调用它的话； 它只会坐在那儿，在这种情况下什么也不做。