我们知道有个全局的 window对象,js的一切皆window上的属性和方法。window上有个window.document属性,记录了整个html的dom树,document是顶层。

  

  body 和 head 都是 doc上的一个属性。

  上图中,head里面的打印结果是null,因为document是按照和我们阅读文字一样的方式按顺序加载的,并且,当加载到一个script标签时,会执行其中的代码,而此时body部分还没有加载,所以为null。

  所以,如果js代码在doc加载之前要选择或操作dom时就要写在 onload的事件回调中,如果不是操作dom,比如做个运算,获取请求接口数据,就不用关心onload没有。js放最后也是个办法,但一般我们应用都比较复杂,既有逻辑运算,也有操作dom,我们可能希望在更早的时候就执行逻辑运算的部分。所以还是想放到head去。

  js 是单线程同步执行的,一旦遇到报错就会退出,中断执行。

  故上面的代码会报错,停在第10行。

  那如果用函数把第10行包起来呢?

  当然,done还是不会打印,即便是一个函数,在调用这个函数时,会按顺序执行函数中的代码,遇到错误一样退出。这些都叫同步执行,所谓同步,就是指,按从上至下的顺序执行,一旦遇到错误就会退出程序,后面的代码将不会运行。

  当执行到 test()时,会执行函数里的代码,遇到错误就退出了,所以done不会执行打印出来。

  js 在运行时,会先全局扫描 var  和 function 声明的对象。

  上面的代码结果会是什么呢?(in  前面是字符串,后面是对象结构。用来判断一个对象上是否有前面的键值(属性))

  结果是undefined。解释一下,因为js 先全局扫面了 var,事先var了一个a,这样window上就有一个a为undefined了,

  if (!("a" in window))
  那么这个条件判断的时候,window上就是有一个a的,而且为undefined,既然有a了,那也就不会执行if里的语句了。所以a不会被赋值。上面的代码拆开来看,真正的执行顺序如下:

  var 会事先扫描,将声明的部分 var a; 提取到最前面执行,a = 1; 而赋值的部分依然在原来的位置执行。

  下面换一个方式。

效果如下:

最后,感谢大神CX的讲解。

 
 

js执行顺序的更多相关文章

  1. JS执行顺序-函数声明提升、匿名函数、函数表达式

    大方向上: JS 是按照 代码块 进行 编译.执行 的. 学习至: 1.变量声明提升 2.新唐的博客 3.js中匿名函数的创建与调用方法分析 4.前端圣经 - <高程三> 5.深入理解变量 ...

  2. RequireJS 加载 js 执行顺序

    初次接触RequireJS 对文档理解不很透彻,自己通过测试测到的执行顺序: 文档结构: |-amaze | -js | -amazeui.js | -jquery.min.js | -main.js ...

  3. js执行顺序——学习笔记

    我们知道有个全局的 window对象,js的一切皆window上的属性和方法.window上有个window.document属性,记录了整个html的dom树,document是顶层. body 和 ...

  4. js执行顺序<转>

    JavaScript执行引擎并非一行一行地分析和执行程序,而是一段一段地分析执行的.而且在分析执行同一段代码中,定义式的函数语句会被提取出来优先执行.函数定义执行完后,才会按顺序执行其他代码. 先看看 ...

  5. JS执行顺序问题

    JavaScript执行引擎并非一行一行地分析和执行程序,而是一段一段地分析执行的.而且在分析执行同一段代码中,定义式的函数语句会被提取出来优先执行.函数定义执行完后,才会按顺序执行其他代码. 先看看 ...

  6. js执行顺序总结

    参考博文:http://www.2cto.com/kf/201401/273825.html http://www.jb51.net/article/44123.htm http://zhidao.b ...

  7. js 执行顺序

    同步任务 异步任务 同步任务:立即执行 异步任务:进入到异步队列当中(Event Queue)eg:Ajax,SetTimeout,then,SetInterval Event loop 事件循环 T ...

  8. 小程序js执行顺序

    底部tab 有 login/index    my/index   home/index 操作1>进 login/index 页面,  index.js加载以下方法 onLoad页面加载onSh ...

  9. 关于js执行顺序

    http://www.cnblogs.com/sanshi/archive/2011/02/28/1967367.html http://mtnt2008.iteye.com/blog/701981 ...

随机推荐

  1. 项目中用到的window.showModalDialog(来自网络)

    window.showModalDialog相关: showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.showMo ...

  2. [Asp.Net]状态管理(ViewState、Cookie)

    简介 HTTP协议是无状态的.从客户端到服务器的连接可以在每个请求之后关闭.但是一般需要把一些客户端信息从一个页面传送给另一个页面. 无状态的根本原因是:浏览器和服务器使用Socket通信,服务器将请 ...

  3. Tools下的mdscongiguer 文件中 43行 oracle 配置 发现需要连接库 -lclntsh libclntsh.so 库是个什么东西呢?

    Tools下的mdscongiguer     文件中 43行  oracle 配置      发现需要连接库 -lclntsh      libclntsh.so 库是个什么东西呢? 分想一个知乎网 ...

  4. POP3,全名为“Post Office Protocol - Version 3”,即“邮局协议版本3”

    POP3 锁定 本词条由“科普中国”百科科学词条编写与应用工作项目 审核 . POP3,全名为“Post Office Protocol - Version 3”,即“邮局协议版本3”.是TCP/IP ...

  5. JSP 内置对象(request response session application out pageContext)

    request对象  javax.servlet.http.HttpServletRequest接口的实例 request.setCharacterEncoding("utf-8" ...

  6. dedecms如何自定义专题模板

    很多人看到别人的网站也是用dedecms建的,但是他们的专题做得很漂亮,也在想如何自定义dedecms专题模板呢? 其实很简单,只要在dedecms默认专题模板上做一些修改就好了 <!DOCTY ...

  7. cocos基础教程(1)Mac环境下搭建

    下面主要介绍cocos2d-x环境的设置以及android的环境搭建 1.下载cocos2d-x 3.0正式版      http://www.cocos2d-x.org/download 2.下载a ...

  8. Android 源码编译错误

    参考文章:http://blog.csdn.net/brightming/article/details/49763515/ Building with Jack: out/target/common ...

  9. [Effective JavaScript 笔记] 第4条:原始类型优于封闭对象

    js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //&q ...

  10. chrome控制台支持多行js模式

    shift + 回车 是换行 转自: http://zhidao.baidu.com/link?url=MYjGRwvVQYJwnr38VTHPJdzRNtF1COyqpeuAtBYbxFYJcu6p ...