js执行顺序
我们知道有个全局的 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执行顺序的更多相关文章
- JS执行顺序-函数声明提升、匿名函数、函数表达式
大方向上: JS 是按照 代码块 进行 编译.执行 的. 学习至: 1.变量声明提升 2.新唐的博客 3.js中匿名函数的创建与调用方法分析 4.前端圣经 - <高程三> 5.深入理解变量 ...
- RequireJS 加载 js 执行顺序
初次接触RequireJS 对文档理解不很透彻,自己通过测试测到的执行顺序: 文档结构: |-amaze | -js | -amazeui.js | -jquery.min.js | -main.js ...
- js执行顺序——学习笔记
我们知道有个全局的 window对象,js的一切皆window上的属性和方法.window上有个window.document属性,记录了整个html的dom树,document是顶层. body 和 ...
- js执行顺序<转>
JavaScript执行引擎并非一行一行地分析和执行程序,而是一段一段地分析执行的.而且在分析执行同一段代码中,定义式的函数语句会被提取出来优先执行.函数定义执行完后,才会按顺序执行其他代码. 先看看 ...
- JS执行顺序问题
JavaScript执行引擎并非一行一行地分析和执行程序,而是一段一段地分析执行的.而且在分析执行同一段代码中,定义式的函数语句会被提取出来优先执行.函数定义执行完后,才会按顺序执行其他代码. 先看看 ...
- js执行顺序总结
参考博文:http://www.2cto.com/kf/201401/273825.html http://www.jb51.net/article/44123.htm http://zhidao.b ...
- js 执行顺序
同步任务 异步任务 同步任务:立即执行 异步任务:进入到异步队列当中(Event Queue)eg:Ajax,SetTimeout,then,SetInterval Event loop 事件循环 T ...
- 小程序js执行顺序
底部tab 有 login/index my/index home/index 操作1>进 login/index 页面, index.js加载以下方法 onLoad页面加载onSh ...
- 关于js执行顺序
http://www.cnblogs.com/sanshi/archive/2011/02/28/1967367.html http://mtnt2008.iteye.com/blog/701981 ...
随机推荐
- 新浪微博客户端(20)-集成MJRefresh
HomeViewController.m /** 集成下拉刷新控件 */ - (void)setupPullToRefreshView { __unsafe_unretained UITableVie ...
- thinkphp-1
thinkphp网站: http://thinkphp.cn, http://bbs.thinkphp.cn 在设置文件夹查看试图的时候, 只点" 应用到所有文件夹" 不要点&qu ...
- [Effective JavaScript 笔记]第4章:对象和原型--个人总结
前言 对象是js中的基本数据结构.对象在js语言编码中也随处可见,比如经常会用到的函数,也是一个Function构造函数,Function.prototype原型对象.每当声明一个函数时,都会继承Fu ...
- 第19章 使用PXE+Kickstart部署无人值守安装
章节概述: 本章节将教会您通过PXE+DHCP+TFTP+VSftpd+Kickstart服务程序搭建出无人值守安装系统,从而批量部署客户机系统. 这种系统能够实现自动化运维.避免了重复性劳动,帮助提 ...
- git clone报错
(文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) Could not chdir to home directory /home/wangzheng: ...
- 转:PCL+VS2010环境配置
1.下载 http://www.pointclouds.org/downloads/windows.html出下载PCL完全安装包1.6.0 all-in-one-installer,我的电脑是32位 ...
- 绕过 <?PHP exit('Access Denied'); ?> 限制
绕过 <?PHP exit('Access Denied'); ?> 限制 <?php $shellcode='PD9waHBpbmZvKCk7Pz4';// base64_ ...
- SSM框架Web程序的流程(Spring SpringMVC Mybatis)
SSM框架的Web程序主要用到了三个技术: Spring:用到了注解和自动装配,就是Spring的两个精髓IOC(反向控制)和 AOP(面向切面编程). SpringMVC:用到了MVC模型,将逻辑代 ...
- 【OpenStack】OpenStack系列14之Dashboard定制开发
django概述 参考资料:http://blog.javachen.com/2014/01/11/how-to-create-a-django-site.html http://djangobook ...
- JAVA接口继承、抽象类等
1.定义接口 package test.intefaces; public interface TestIntefaceA { void testA(); void testB(); void tes ...