Javascript 多重分配重新评估或结果通过？

Question

我说的多重赋值（或者叫chaining？）是这样的赋值：

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 的 [=43] 的所有文本=] 对于单词 'top') 然后分配一个临时变量可能会更快。

Answer 1

这个：

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

……和这个不太一样：

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

相反，右侧操作数 maxLogoHeight - scrollTop 分配给 each of dom1.style.height and dom2.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，并且在第二个 console.log() 中被分配了空字符串。

下面的例子可能更直观：

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!

Javascript 多重分配重新评估或结果通过？

Javascript multiple asignment re-evaluation or result passing?

javascript

optimization

variable-assignment