javascript - 新手求助问题，为什么这个变量是同一个，而不被覆盖呢

Question

function positionMessage(){
    var elme = document.getElementById("message");
    elme.style.position = "absolute";
    elme.style.left = "50px";
    elme.style.top = "100px";
    moveMessage("message",125,25,20);
    var elme = document.getElementById("message2");
    elme.style.position = "absolute";
    elme.style.left = "50px";
    elme.style.top = "50px";
    moveMessage("message2",125,125,20);

}

这个elme变量第一次定义咧document.getElementById("message");
第二次被定义document.getElementById("message2");
为什么这两个效果能同时出现，而不是第二次定义的变量覆盖了第一次的呢？

Answer 1

用var声明有个变量提升的问题。
实际上确实是覆盖的。
上面的代码等同于下面:

function positionMessage(){
    var elme;
    elme = document.getElementById("message");
    elme.style.position = "absolute";
    elme.style.left = "50px";
    elme.style.top = "100px";
    moveMessage("message",125,25,20);
    elme = document.getElementById("message2");
    elme.style.position = "absolute";
    elme.style.left = "50px";
    elme.style.top = "50px";
    moveMessage("message2",125,125,20);

}

Answer 2

样式代码在覆盖之前已经被执行，所以两种效果都存在。

Answer 3

你大概是没有弄懂声明前置, var elme = document.getElementById("message")这行代码是拆分为var elme;elme=document.getElementById("message")这两行代码的，声明前置是指我们能够获取声明的指针名字，但是无法获取它的赋值，对于浏览器来说都只是重复了相同的动作——var elme而已，也就是它知道了elme这个指针被声明了（你可以理解为占位符），但不清楚这个指针指向哪里。
获取指针后，JS代码是逐条依次执行的，先是被赋给message，（elme=document.getElementById("message")）,执行了代码后，又赋给了（elme=document.getElementById("message2")）,然后再执行代码。
so当然两个效果都会出现了，你可以测试下如果声明函数和变量为一个指针名会出现什么情况，那大概就是你期望出现的覆盖报错。

Answer 4

javascrip 是单线程语言，所以会一次执行代码，因为第一次执行后第二次再被赋值所以两个效果都会出现。