先看下面两段js程序,先是定义式函数写法:

  1. <script type="text/javascript">
  2. function myfunc(){
  3. alert("第一次调用");
  4. };
  5. myfunc(); //得出的是 第二次调用
  6. function myfunc() {
  7. alert("第二次调用");
  8. };
  9. myfunc(); //得出的是 第二次调用
  10. </script>

接下来是变量式函数写法:

  1. <script type="text/javascript">
  2. var myfunc = function (){
  3. alert("第一次调用");
  4. };
  5. myfunc(); //得出的是 第一次调用
  6. myfunc = function () {
  7. alert("第二次调用");
  8. };
  9. myfunc(); //得出的是 第二次调用
  10. </script>

在定义式函数写法的代码中执行两个方法后的结果是一样的,就等于定义式函数中第一个函数没起到任何作用,得到的都是第二个函数的结果,从结果来看,JavaScript执行顺序不是按顺序一条一条来执行。


在变量式函数写法的代码中执行两个方法后的结果是不同的,从这来看,JavaScript执行顺序是按顺序一条一条来执行的,


从这两个不同函数的表示方法来看,在同一段程序的分析执行中,定义式函数有优先权,定义式函数执行完后,其他语句(包括变量式函数)才顺序执行,那么下面的例子也就不难得出结果了:

  1. <script type="text/javascript">
  2. function myfunc(){
  3. alert("第一次调用");
  4. };
  5. myfunc(); //输出 第二次调用
  6. var myfunc = function (){
  7. alert("第三次调用");
  8. }
  9. myfunc();//输出 第三次调用 上次的结果已经被这次的变量式函数结果覆盖
  10. function myfunc() {
  11. alert("第二次调用");
  12. };
  13. myfunc();//输出 第三次调用  function myfunc()已经不再执行
  14. myfunc = function () {
  15. alert("第四次调用");
  16. }
  17. myfunc();//输出 第四次调用
  18. </script>

结果就不像我们上次分析的那样了,这里的改变就是把两个相同的方法放在两个JavaScript片段里,这时两个方法都得出各自的结果,这里也就说明JavaScript是按一段一段来分析执行的,如下面代码:

  1. <script type="text/javascript">
  2. myfunc();//输出 第一次调用
  3. var myfunc = function (){
  4. alert("第二次调用");
  5. }
  6. myfunc();//输出 第二次调用
  7. function myfunc() {
  8. alert("第一次调用");
  9. };
  10. </script>
  11. <script type="text/javascript">
  12. myfunc();//输出 第三次调用
  13. var myfunc = function (){
  14. alert("第四次调用");
  15. }
  16. myfunc();//输出 第四次调用
  17. function myfunc() {
  18. alert("第三次调用");
  19. };
  20. myfunc();//输出 第四次调用
  21. </script>

贴内牛人总结:


1、<script>中的代码是阻塞式同步下载执行的,当浏览器遇到一个<script>标签会先下载这个标签的代码然后执行。在完成这件事之前不会加载其他任何标签和资源。


2、变量和函数的声明发生在代码解析期,但是,变量赋值发生在运行期,因此反复声明同名函数和变量,最后一次声明的函数被保存下来,直到运行到变量赋值的代码才发生变化。

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

  1. javascript的执行顺序(转载)

    之前从JavaScript引擎的解析机制来探索JavaScript的工作原理,下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序.如果说,JavaScript引擎的工作机制比较深奥 ...

  2. javaScript代码执行顺序

    javaScript是一种描述型脚本语言,由浏览器进行动态的解析和执行. 页面加载过程中,浏览器会对页面上载入的每个js代码块进行扫描. JavaScript是一段一段的分析执行的,在分析执行同一段代 ...

  3. JavaScript 代码执行顺序

    一.先预处理后执行 在一个JavaScript文件或一个JavaScript代码块的内部,浏览器会先对代码进行预处理(编译),然后再执行. 预处理会跳过执行语句,只处理声明语句,同样也是按从上到下按顺 ...

  4. JavaScript执行顺序分析

    之前从JavaScript引擎的解析机制来探索JavaScript的工作原理,下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序.如果说,JavaScript引擎的工作机制比较深奥 ...

  5. Javascript动态加载Html元素到页面Dom文档结构时执行顺序的不同

    我们有时会通过ajax动态获取一段Html代码,并且将这段代码通过javascript放到页面的Dom结构中去. 而很多时候通过ajax动态获取的Html代码中也包含javascript代码,有一点需 ...

  6. javascript运行机制之执行顺序详解(转)

    转自http://www.admin10000.com/document/3385.html JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言, ...

  7. javascript 执行顺序详解

    JavaScript是一种描述 型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行.如果你不能理解javaScript 语言的运行机制,或者简 ...

  8. javascript的预编译和执行顺序

    原文:javascript的预编译和执行顺序 最近在复习javascript的事件处理时发现了一个问题,然后也是我来写javascript的预编译和执行顺序的问题 代码: 代码一<html> ...

  9. JavaScript 运行机制之执行顺序详解

    JavaScript是一种描述型脚本语言,它不同于 Java 或 C# 等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行.如果你不能理解 JavaScript 语言的运行机制 ...

随机推荐

  1. Windows phone 之Xml操作

    最近在做天气预报应用,这个应用中需要用到Xml来存储关注的城市列表,保存一下代码,方便以后使用,也给博友们一个参考: 其中:添加关注城市的操作代码是: 其实就是, (1)先把数据从CareCityCo ...

  2. Windowsphone 之xml序列化和反序列化的应用(WebService解析返回的数据DataSet )

    关于Xml的序列化和反序列化: 可以看这篇文章,http://www.cnblogs.com/Windows-phone/p/3243575.html WebService解析返回的数据DataSet ...

  3. 如何用.NET创建Windows服务

    我们将研究如何创建一个作为Windows服务的应用程序.内容包含什么是Windows服务,如何创建.安装和调试它们.会用到System.ServiceProcess.ServiceBase命名空间的类 ...

  4. [转] 小tip: 使用CSS将图片转换成黑白(灰色、置灰) ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2547 //zxx: ...

  5. linux安装python使用的MySQLdb

    安装mysqldb模块需已安装mysql 使用pip安装MySQLdb pip install mysql-python mac os安装mysqldb sudo pip install mysql- ...

  6. Mac系统安装Lua(转)

    下载最新版的lua请点击,然后解压 运行“终端”进入到该文件夹下 ,主要是cd [文件夹名] 在“终端”输入 make macosx (回车) 在“终端”输入 make test (回车) 然后再输入 ...

  7. 关于applicationx/www-form-urlencoded和multipart/form-data的描述

    在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型. 下边是说明: application/x-www-form-urlen ...

  8. objective-C: nonatomic retain copy assgin 等属性详解

    http://my.oschina.net/u/728866/blog/90798 property,可以提供的功能有:提供成员变量的访问方法的声明.控制成员变量的访问权限.控制多线程时成员变量的访问 ...

  9. [BZOJ 3585] mex 【莫队+分块】

    题目链接:BZOJ - 3585 题目分析 区间mex,即区间中没有出现的最小自然数. 那么我们使用一种莫队+分块的做法,使用莫队维护当前区间的每个数字的出现次数. 然后求mex用分块,将权值分块(显 ...

  10. NEURAL NETWORKS, PART 3: THE NETWORK

    NEURAL NETWORKS, PART 3: THE NETWORK We have learned about individual neurons in the previous sectio ...