javascript - 使用 .value 理解 javascript 语法

Question

我有一个文本框，它会自动将用户输入的值更改为大写，代码按照我希望的方式工作:

function myFunction() {
    var x = document.getElementById("fname");
    x.value = x.value.toUpperCase();
}

但是，如果我按如下方式重写，它不会将文本框值更改为大写:

function myFunction() {
    var x = document.getElementById("fname").value; <--- notice I added value here
    x = x.toUpperCase();
}

我的印象是两个摘录的目的相同，那么为什么第二个摘录不符合我的预期？

Answer 1

在第一个片段中，x 是一个 DOM 元素，您可以通过分配更改其 value 属性

x.value = x.value.toUpperCase();

在第二个片段中，x 只是一个普通 String，它不包含对 DOM 元素的引用。这与执行 "someString"= "someOtherString" 相同，显然，它不会反射(reflect)在 DOM 中，因为在任何地方都没有对 DOM 元素的引用。

总结:

• 在第一个片段中，您使用了 setter，因此 value 得到了更新。
• 在第二个代码段中，您使用了 getter 并更改了它的返回值，这不会反射(reflect)在 DOM 元素中。