尝试在事件处理程序中访问时，画布返回未定义答案

【问题标题】：Canvas Returning As Undefined When Trying To Access In Event Handeler尝试在事件处理程序中访问时，画布返回未定义
【发布时间】：2014-10-31 13:42:48
【问题描述】：

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

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

}

【问题讨论】：

标签： javascript dom-events typeerror

【解决方案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);

【讨论】：

【解决方案2】：

我在一个快速简单的网页中测试了您的代码。通过结束标签在底部加载您的代码，在我看到window的任何地方更改。它得到了以下内容：

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

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

【讨论】：