Javascript 类变量在元素事件中不可见？

我希望创建一个web应用程序，这意味着HTML元素必须是非常动态的，因为它们将被创建，并由不同的其他元素处理。 因此，我决定使用类——非常成功，直到处理事件的时候。Chrome告诉我，这是一个可疑的类，它将它与未定义的变量混淆

function SpanInputPair(element) {
    span = document.createElement("span");
    this.Span = getNextInputID();
    span.style.display = "none";
    span.id = this.Span;
    element.appendChild(span);
    input = document.createElement("input");
    input.type = "text";
    this.Input = getNextInputID(); // request a new ID for this element and save into this class
    input.id = this.Input; // Attach it onto the element for future finding :/ (slow)
    element.appendChild(input);
    input.focus();
    span.onclick  = function() {
        var input = getInput(this.Input); // this.Input cannot be seen?
        var span = getInput(this.Span);
        input.value = span.innerHTML;
        toggleDisplay(input);
        toggleDisplay(span);
        input.focus();
    }
    input.onblur...

行“var input=getInput（this.input）；”是问题所在，因为Chrome告诉我它不再看到“this.input”。我知道这一点，因为我可以运行这一行，用实际值替换“this.Input”，它返回元素fine。 正如您所看到的，我创建了一个文本框，动态地跨越并设置它们的ID以供将来使用，这是因为我以前试图将元素本身保存在类中，并在事件中使用它-同样的问题，所以我尝试使用document.getElementByID（）在每个事件的文档中查找它。 奇怪的是，它似乎没有关注它刚刚创建的文本框（如果这也可能是问题的一部分，我不知道）。 这个项目完全是从零开始创建的，没有使用任何库。 所以我的问题是，你能解释一下为什么元素的事件在创建它的类中看不到任何变量吗？我怎样才能解决这个问题

---

我还没有看到这篇文章，因为许多人正在使用JQuery之类的库和/或不使用类，问题是特定于借助类的内部变量进行事件处理的。

单击函数中的“this”值是单击的元素。这里就是您刚刚创建的

在定义click函数时，您需要返回此函数的值。（问题也可能是：当<代码> SpjnPutoPux/Cux>函数被调用时，‘这个’的值是什么？您可能想考虑一下。” 您可以这样做，将其添加到闭包中：

var thisInput = this.Input;
...

span.onclick  = function() {
    var input = getInput(thisInput);

---

下一行的

this.Span将出现同样的问题。
单击函数中的'this'值是单击的元素。这里就是您刚刚创建的

在定义click函数时，您需要返回此函数的值。（问题也可能是：当<代码> SpjnPutoPux/Cux>函数被调用时，‘这个’的值是什么？您可能想考虑一下。”
您可以这样做，将其添加到闭包中：

var thisInput = this.Input;
...

span.onclick  = function() {
    var input = getInput(thisInput);

下一行的
this.Span也会有同样的问题。
虽然它可能没有太多意义，但在JavaScript中是正常的，因为它的值在您声明的本地函数中已更改。因此，您必须正确理解如何在JavaScript中声明和使用函数：

JavaScript中的函数有一个称为上下文的东西，这意味着每个函数都绑定到一个特定的对象。如果我们在脚本中声明一个函数，它将绑定到全局对象（浏览器中的窗口）

但是，如果我们试图声明一个方法（属于对象的函数），
这将是一个代表对象本身的神奇变量。每次调用
this.my_属性
，都会得到对象属性的值，即“属性”或“方法”

因此，函数的上下文可以更改，就像事件处理程序一样。在您的场景中，事件处理程序是上下文已更改的函数，因此每次您访问它时，它的值将是当您单击它时接收事件的HtmleElement对象

为了解决这个问题，您可以声明一个辅助变量并在处理程序内部使用它。社区的普遍做法是：

var that = this;   // Also, the people use 'self' instead of 'that'

span.onclick = function() {
   var input = that.input;

   // ...
};

使用此解决方法，您不会有任何问题。
尽管它可能没有太多意义，但在JavaScript中这是正常的，因为它的值在您声明的本地函数中已更改。因此，您必须正确理解如何在JavaScript中声明和使用函数：

JavaScript中的函数有一个称为上下文的东西，这意味着每个函数都绑定到一个特定的对象。如果我们在脚本中声明一个函数，它将绑定到全局对象（浏览器中的窗口）

但是，如果我们试图声明一个方法（属于对象的函数），
这将是一个代表对象本身的神奇变量。每次调用
this.my_属性
，都会得到对象属性的值，即“属性”或“方法”

因此，函数的上下文可以更改，就像事件处理程序一样。在您的场景中，事件处理程序是上下文已更改的函数，因此每次您访问它时，它的值将是当您单击它时接收事件的HtmleElement对象

为了解决这个问题，您可以声明一个辅助变量并在处理程序内部使用它。社区的普遍做法是：

var that = this;   // Also, the people use 'self' instead of 'that'

span.onclick = function() {
   var input = that.input;

   // ...
};

使用此解决方法，您不会有任何问题。
此
值将是
span
元素，而不是
窗口
。没错，这是一个很大的错误。感谢大家对函数如何创建自己的“this”进行了深入的解释，这确实很有意义，因为我首先将函数用作类。然而，现在存储在该类中的span和input元素被SpanInputPair的每个新实例覆盖，导致输入和span不是基于实例的。。这是否意味着我需要使用“this”？@LeeAllan如果它们是基于实例的，代码是正确的。但如果它们是基于类的，则必须将这些值存储在SpanInputPair的原型中。因此，您必须执行以下操作：