Question

我希望创建一个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”并返回元素。正如你所看到的，我创建了一个文本框并动态调整并设置其ID以供将来使用，这是因为我以前曾尝试将该元素本身保存在类中并在事件中使用它 - 同样的问题，所以我试着通过使用document.getElementByID（）在每个事件的文档中找到它。奇怪的是，它似乎并没有集中它刚刚创建的文本框（如果这可能是问题的一部分，我也不知道）。这个项目完全是从零开始创建的，不使用任何库。所以我的问题是，你能否解释为什么元素的事件在创建它的类中看不到任何变量？我怎么能解决这个问题呢？

我还没有看到这个发布，因为许多人正在使用诸如JQuery之类的库和/或不使用类，问题是特定于事件处理的帮助，来自类的内部变量。

Answer 1

虽然它可能没有多大意义，但在JavaScript中是正常的，因为在您声明的本地函数中，它的值已经改变。因此，您必须正确理解如何在JavaScript中声明和使用函数：

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

但是，如果我们尝试声明方法（属于对象的函数）， this将是一个代表对象本身的魔术变量。每次调用this.my_property时，您都会获得对象属性的值，可以是“属性”或“方法”。

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

要解决此问题，您可以声明一个辅助变量并在处理程序中使用它。社区遵循的惯例是：

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

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

   // ...
};

使用此解决方法，您将不会遇到任何问题。

Answer 2

click函数中'this'的值是单击的元素。这就是你刚创建的<span>。

当您定义单击功能时，您希望返回此值。（问题可能还有：调用SpanInputPair函数时'this'的值是什么？您可能需要考虑这一点。）

你可以通过这样的方式将其添加到闭包中：

var thisInput = this.Input;
...

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

下一行的this.Span会遇到同样的问题。

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

2 个答案: