js 加载顺序的问题？

Question

为什么global.width 会的到undefined，网页的加载顺序不是自上而下的吗？

<script>
var global = {};

(function(){
   var action = function() {
       global.width = document.documentElement.clientWidth;
   }
   document.addEventListener("DOMContentLoaded", action, flase);
})();
</script>

<script>
   alert(global.width);  //undefined ??
</script>

Answer 1

<script>
var global = {};//A

(function(){
   var action = function() {//D
       global.width = document.documentElement.clientWidth;
   }
   document.addEventListener("DOMContentLoaded", action, flase);
})();//B
</script>

<script>
   alert(global.width);  //undefined ?? c
</script>

A.声明并初始化一个global变量
B.定义了一个立即执行函数，函数被马上执行，为document添加了对DOMContentLoaded的绑定，绑定的函数为action
C.执行本地alert组件,width在global对象中是不存在的
D.等到DOMContentLoaded事件发生时，action回调函数才会被调用

JS事件异步调用且单线程执行，必须等到当前的同步代码执行完毕后，事件的回调才有可能被回调；同理一个事件回调函数被执行，其它JS代码是没机会执行

Answer 2

alert执行的时候DOMContentLoaded不是还没发生么

Answer 3

支持kikong答案。

在JS里面undefined意味着变量和值都没有的情况下发生的，null是单纯值方面不存在的意思。所以看到undefined就知道是global那里出问题了。

问题在于绑定函数马上发生了，但发生的是action函数只是被马上绑定了，而绑定的函数并没有被马上执行。js不是单纯的自上而下的，js在编译时也有重编译，延迟编译等情况，比传统的编译语言进行预编译过程还要复杂许多。每次一看到js的函数，就意味着特殊的执行顺序规则，就像其他语言的if..else..

Answer 4

不是同一个global

Answer 5

有可能是 document.documentElement.clientWidth 不兼容你的浏览器，所以得到的值是 undefined。
可以尝试一下 consolg.log(document.documentElement.clientWidth); 看看打印出来的结果验证一下。

或者试一下 document.body.clientWidth

Answer 6

看看下面的应该就懂了

<script>
    var global = {};

    (function(){
       var action = function() {
           global.width = document.documentElement.clientWidth;
       }
       document.addEventListener("DOMContentLoaded", action, false);
    })();
</script>
<script>
    window.onload = function() {
        alert(global.width);  // your window's width
    }
</script>