Javascript 多重分配重新评估或结果传递？

Question

我所说的多重赋值(或者叫做链接？)是这样的赋值:

a = b = c = 2;

...之后a、b、c都等于2；

我的优化问题是，给定以下代码:

var dom1 = document.getElementById('layout_logos');
var dom2 = document.getElementById('layout_sitenav');
...
function layout_onscroll(){
  ...
  dom1.style.height = dom2.style.top = maxLogoHeight - scrollTop;
  ...
}

根据我一直在阅读的内容，恐怕 layout_onscroll 中的代码评估为:

dom2.style.top = maxLogoHeight - scrollTop;
dom1.style.height = dom2.style.top;

.. 它给出了正确的值，但访问了 dom2 两次——一次是设置 top，一次是获取 top。 (请注意，我来自 .NET 背景，在这种背景下，Microsoft 将所有内容层层包裹在访问器函数层中，使得使用这些隐藏变量的循环非常慢。)

如果是这样，创建一个额外的变量然后将两个 DOM 元素分配给该变量是否更快？

  ...
  var temp_var = maxLogoHeight - scrollTop;
  dom1.style.height = temp_var;
  dom2.style.top = temp_var;
  ...

这样做的明显损失来自于每次都分配临时变量。但是如果 dom2.style.top 被引擎盖下的两个 getter 函数访问(例如，如果第一个版本调用 dom2.getStyle().getTop() ，它又解析dom2 中单词“top”的 css 的所有文本)然后分配一个临时变量可能会更快。

Answer 1

这个:

dom1.style.height = dom2.style.top = maxLogoHeight - scrollTop;

……和这个不太一样:

dom2.style.top = maxLogoHeight - scrollTop;
dom1.style.height = dom2.style.top;

相反，右侧操作数 maxLogoHeight - scrollTop 被分配给 dom1.style.height 和 dom2 的 each。 style.top.

我们可以在下面的例子中看到这一点:

片段

var d= document.getElementById('D');

s = d.style.width= 'abc';
console.log(s);             //'abc'

d.style.width= 'abc';
s= d.style.width;
console.log(s);             //null string

#D {height: 100px; width: 100px; background: red;}

<div id="D"></div>

abc 是无效宽度，因此被 d.style.width 丢弃。但是，您会看到 s 在第一个 console.log() 中被分配了 abc，而在第二个中它被分配了空字符串控制台日志()。

---

下面的例子可能更直观:

const x = 3;
var y = x = 6;                   // x cannot change.  So is y 3 or 6?
document.body.innerHTML= x + y;  // -> 9 ... y must be 6!