javascript - 为什么 document.getElementById ('foo' ).value 不是引用？

Question

我正在尝试以下功能，我喜欢它:
var $ = function( id ) { return document.getElementById( id ); };

对于我当前的代码，我仅引用每个元素的 value .
所以我想，“为什么不直接更新我的函数以包含 .value ？

所以这工作得很好:

var $ = function( id ) { return document.getElementById( id ); };
 $("foo").value = whatever // WORKS JUST FINE :)

但这会破坏:

var $ = function( id ) { return document.getElementById( id ).value; };
$("foo") = whatever // Left side of assignment is not a reference

我想我知道发生了什么，但由于很难用语言表达，所以我宁愿假设我错了。

那么这里发生了什么？

顺便说一下，请随时发表评论:

• 就像我假设的那样，这是一个引用错误吗？
• 有没有办法可以突出显示我的代码以更好地指出每行之间的差异？
• 我怎样才能编写我的代码来显示像这张图片一样的错误而不是我的评论文本(特别是如何让它更小)？

Answer 1

元素的.value实际上是一个setter/getter。当出现以下情况时

document.getElementById( id ).value

被计算为一个表达式(就像在 $ 中，您试图返回它)，而不是被分配给 getter，而是调用 getter，并且它计算结果为原语。所以，对解释器来说:

return document.getElementById( id ).value;

变成类似的东西

return 'someValue';

因此，当调用 $ 时，会返回一些字符串，但就像

'someValue' = 'newValue'

不起作用，也不起作用

$("foo") = 'newValue';

为了使您想要执行的操作有效，您必须通过分配给 .value 属性来调用 setter 。一旦 .value 被计算为表达式(例如在 return 的右侧)，您就已经调用了 getter。

调用 setter 的一种可能方法是:

const set$ = (id, newVal) => {
  document.getElementById(id).value = newVal;
};
set$('foo', 'myNewVal');