Question

我已经阅读了关于“this”的关键字，并且我了解到'this'关键字适用于上下文中的对象。

    <!DOCTYPE html>
    <html>
    <body>



    <form id="myForm">
    <label>Type anything but "fun": <input id="noFun" type="text" oninput="checkValid" required ><input type="submit"></label>                                                              
    <div><button onclick="previewMessage()">Preview errors</button></div>
    <div id="err"></div>
    </form>

    <script>

        function checkValid() {
            if (this.value == "fun") {
                this.setCustomValidity("You're having too much fun!");
            } else {
        // input is fine -- reset the error message
        this.setCustomValidity('');
            }
        }
        function previewMessage() {
            var myform = document.getElementById("noFun")
            document.getElementById("err").innerHTML = myform.validationMessage;
        }
    </script>

    </body>
    </html>

但是当我使用oninput =“checkValid”时，它应该复制checkValid函数，函数内的“this”关键字应该指向输入对象。但事实并非如此!!!

查看另一段代码，它与前一段代码相同，但运行正常。

    <form id="myForm">
    <label>Type anything but "fun": <input id="noFun" type="text"         oninput="checkValid(this)" required ><input type="submit"></label>
    <div><button onclick="previewMessage();">Preview errors</button></div>
    <div id="err"></div>
    </form>
    <script>
        function checkValid(input) {
            if (input.value == "fun") {
                input.setCustomValidity("You're having too much fun!");
            } else {
                // input is fine -- reset the error message
                input.setCustomValidity('');
            }
        }
        function previewMessage() {
            var myform = document.getElementById("noFun")
            document.getElementById("err").innerHTML=myform.validationMessage;
        }
    </script>

你能解释一下这两个片段之间的区别，以及为什么第一个例子不能按预期工作。

提前致谢!!!

Answer 1

但是当我使用oninput =＆＃34; checkValid＆＃34; ，它应该复制checkValid函数和＆＃34; this＆＃34;函数内的关键字应该指向输入对象。

不，它不应该。

内在事件属性的值是事件处理函数的 body 。

HTML oninput="checkValid"等同于JavaScript：

reference_to_input.oninput = function (event) {
    checkValue;
};

提及变量（如checkValue）而不对其做任何事情（比如将()放在它后面来调用函数）什么都不做。

Answer 2

您设置事件处理程序的方式是this的值不为<input>元素。你已经得到了什么等于赤裸裸的＆＃34;函数调用，因此this将引用window对象。

但是，如果您要在JavaScript中建立事件处理程序，请执行以下操作：

document.getElementById("noFun").oninput = checkValid;

您将this引用该元素。

请注意，您的代码将将对该元素的引用作为参数传递，这就是您的第二个代码示例的工作原理。

在javascript中使用“this”关键字

2 个答案: