扫码关注官方订阅号
为什么global.width 会的到undefined,网页的加载顺序不是自上而下的吗?
闭关修行中......
<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的绑定,绑定的函数为actionC.执行本地alert组件,width在global对象中是不存在的D.等到DOMContentLoaded事件发生时,action回调函数才会被调用
JS事件异步调用且单线程执行,必须等到当前的同步代码执行完毕后,事件的回调才有可能被回调;同理一个事件回调函数被执行,其它JS代码是没机会执行
alert执行的时候DOMContentLoaded不是还没发生么
支持kikong答案。
在JS里面undefined意味着变量和值都没有的情况下发生的,null是单纯值方面不存在的意思。所以看到undefined就知道是global那里出问题了。
问题在于绑定函数马上发生了,但发生的是action函数只是被马上绑定了,而绑定的函数并没有被马上执行。js不是单纯的自上而下的,js在编译时也有重编译,延迟编译等情况,比传统的编译语言进行预编译过程还要复杂许多。每次一看到js的函数,就意味着特殊的执行顺序规则,就像其他语言的if..else..
不是同一个global
有可能是 document.documentElement.clientWidth 不兼容你的浏览器,所以得到的值是 undefined。可以尝试一下 consolg.log(document.documentElement.clientWidth); 看看打印出来的结果验证一下。
或者试一下 document.body.clientWidth
看看下面的应该就懂了
<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>
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
A.声明并初始化一个global变量
B.定义了一个立即执行函数,函数被马上执行,为document添加了对DOMContentLoaded的绑定,绑定的函数为action
C.执行本地alert组件,width在global对象中是不存在的
D.等到DOMContentLoaded事件发生时,action回调函数才会被调用
JS事件异步调用且单线程执行,必须等到当前的同步代码执行完毕后,事件的回调才有可能被回调;同理一个事件回调函数被执行,其它JS代码是没机会执行
alert执行的时候DOMContentLoaded不是还没发生么
支持kikong答案。
在JS里面undefined意味着变量和值都没有的情况下发生的,null是单纯值方面不存在的意思。所以看到undefined就知道是global那里出问题了。
问题在于绑定函数马上发生了,但发生的是action函数只是被马上绑定了,而绑定的函数并没有被马上执行。js不是单纯的自上而下的,js在编译时也有重编译,延迟编译等情况,比传统的编译语言进行预编译过程还要复杂许多。每次一看到js的函数,就意味着特殊的执行顺序规则,就像其他语言的if..else..
不是同一个global
有可能是 document.documentElement.clientWidth 不兼容你的浏览器,所以得到的值是 undefined。
可以尝试一下 consolg.log(document.documentElement.clientWidth); 看看打印出来的结果验证一下。
或者试一下 document.body.clientWidth
看看下面的应该就懂了