了解javascript中函数执行顺序

我个人觉得一般人不会有这种写法,但艺不压身,呵呵。希望能帮到初学的朋友!大家一起进步!
首先列举出8个例子,然后例子的解答会在文章末尾贴出!

测试代码一:

<script language="JavaScript" type="text/javascript">
function myFn(){alert('Fn1');
};myFn();function myFn(){alert('Fn2');
};myFn();
</script> 


// 两次输出的结果都是Fn2,而不是我们认为的第一次输出Fn1,第二次输出Fn2

测试代码二:

<script type="text/javascript" type="text/javascript">
function myFn(){alert('Fn1');
};
myFn();
</script>
<script type="text/javascript"> function myFn(){alert('Fn2'); }; myFn(); </script>

这次第一次输出Fn1,第二次输出Fn2.继续测试,

测试代码三:

<script language="JavaScript" type="text/javascript">
var myFn = function(){alert('Fn1');};
myFn();
myFn = function(){alert('Fn2');};
myFn();
</script> 

这次输出的结果是Fn1,Fn2.

测试代码四:

<script language="JavaScript" type="text/javascript">
function myFn(){alert('Fn1');};
myFn();myFn = function (){alert('Fn2');};
myFn();
</script>

输出Fn1,Fn2.

测试代码五:

<script language="JavaScript" type="text/javascript">
var myFn = function(){alert('Fn1');};
myFn();
function myFn(){alert('Fn2');};
myFn();
</script>

输出Fn1, Fn1

测试代码六:

<script language="JavaScript" type="text/javascript">
myFn();
var myFn = function(){alert('Fn1');};
myFn();function myFn(){alert('Fn2');};
myFn();
</script>

输出结果是Fn2,Fn1,Fn1

测试代码七:

<script language="JavaScript" type="text/javascript">
myFn();
function myFn(){alert('Fn1');};
</script>

输出Fn1,而不是未定义的函数

测试代码八:

<script language="JavaScript" type="text/javascript">
myFn();
var myFn = function(){alert('Fn1');};
</script> 

则提示缺少对象,也就是函数没定义。

测试代码九:

<script language="JavaScript" type="text/javascript">
myFn();
</script><script type="text/javascript" type="text/javascript">
function myFn(){alert('Fn1');}
</script>

则提示缺少对象,也就是函数没定义。

注:这是我引用网络上的部分文章内容 我觉得挺好的,所以就在博客发出来,分享一下!
从上面的例子中,可以发现出一点,就是javascript好像也具有"预编译"(这是我的叫法)的特点,有点类似于传统编译型c或c++等。但是在 javascript中,这种预编译的特性并不是对所有的js代码进行的。大家可以试下把myFn的函数定义分别放到不同的script代码块中进行调用 的时候,会提示对象为定义。所以我个人觉得,js中的这种“预编译”特性值只是针对属于同一个代码块(指的 是<script></script>)内的代码有效。
所以,在javascript的执行过程中,js引擎扫描每一script块的代码,把里面的各种函数定义都抽出来进行“预编译”,注意,这里说的是函数定义而不是函数赋值,或者说是定义式的函数,如下的形式就是"定义式的函数":
function myFn(){
  //Something Code
};
编译完成后,就会根据script块中的语句从上到下,从左到右进行执行。然后咱们来分析一下各个测试的结果!

测试代码一:
首 先js引擎扫描该script块中的函数定义(注意这个时候还没开始执行代码),发现有定义式函数function myFn(){}有两处,由于名字是一样的,编译后就合成了一个myFn函数,后面的定义覆盖了前面的定义,所以在函数执行之前就只有一个编译的函数 myFn,并且其定义是后面的那个,因此真正到执行代码的时候,也就是第一次调用myFn(),输出的当然是Fn2,第二次执行myFn同样输出Fn2.

测试代码二:
由 于javascript的块编译特性,因此分成在不同的块中的代码是分开编译的,所以第一个script块编译后的myFn函数并没有被第二块的myFn 覆盖,因此第一个执行myFn输出的是Fn1,同样第二块输出的是Fn2.需要重点指出的是var myFn = function(){};不是定义式函数声明,而是赋值语句,把一个函数对象赋值给一个变量,赋值语句的执行时机晚于编译期,定义式函数是在执行语句之 前就已经完成了,而赋值语句要到执行的时候才进行。所以结果就如同大家看到的一般!

根据这样的分析,我想大家也应该能够看出后面例子的输出结果了!

转载于:https://www.cnblogs.com/yuyifeiyang/p/3540673.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/260860.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

外部资源获取

处理外部资源是很繁琐的事情&#xff0c;我们可能需要处理URL资源、File资源资源、ClassPath相关资源、服务器相关资源&#xff08;JBoss AS 5.x上的VFS资源&#xff09;等等很多资源。因此处理这些资源需要使用不同的接口&#xff0c;这就增加了我们系统的复杂性&#xff1b;而…

芯明天debug assertion failed_YJLV铝芯电力电缆的基本介绍

原标题&#xff1a;YJLV铝芯电力电缆的基本介绍YJLV铝芯电力电缆&#xff0c;型号全称&#xff1a;铝芯交联聚乙烯绝缘聚氯乙烯护套电力电缆。YJLV电缆的含义为&#xff1a;YJ----交联聚乙烯绝缘;L----线芯材质为铝材。V----聚氯乙烯护套。YJLV电缆工作温度为导体额定工作温度9…

1.1.1 从简单的数据类型开始

/// <summary>/// C# 1.0 中定义的产品类型/// </summary>public class Product1{string name;public string Name { get { return name; } }decimal price;public decimal Price { get { return price; } }public Product1(string name, decimal price){this.name…

第2章 Python 数字图像处理(DIP) --数字图像基础3 - 图像内插 - 最近邻内插 - 双线性插值 - 双三次内插 - 图像放大

目录图像内插放大图像图像内插 内插通常在图像放大、缩小、旋转和几何校正等任务中使用。内插并用它来调整图像的大小&#xff08;缩小和放大&#xff09;&#xff0c;缩小和放大基本上采用图像重取样方法 最近邻内插&#xff0c;这种方法将原图像中最近邻的灰度赋给了每个新…

然爸读书笔记(2014-2)----影响力

第一章&#xff1a;影响力的武器 动物可能会看到某种颜色的羽毛而变得具有攻击性&#xff0c;或者听到某种叫声久对自己的天敌呵护有加。动物的这种愚蠢机械反应在人类身上也有&#xff0c;在某个触发特征出现时&#xff0c;我们会不假思索的做出相应的反应&#xff0c;之所以会…

pb 如何导出csv_Firefox火狐浏览器将提供导出密码至本地的功能

6月2日&#xff0c;据外媒All About Lifehacks报道&#xff0c;Mozilla官方的bug报告页面显示&#xff0c;Firefox浏览器的导出或备份密码请求的问题在前两天被关闭&#xff0c;并被标记为已解决。据了解&#xff0c;该请求早在多年前就有人提出。如今被标记为已解决&#xff0…

跟着别人的感觉做网络推广之二

无意中闯入了站台网&#xff08;一家历史很悠久的分类信息网站&#xff0c;印象中比58 赶集 百姓创办时间还早。&#xff09; 进入后当然看医疗分类了&#xff1a; http://www.zhantai.com/ 站台网&#xff0c;不是大的省份网民不能位置定位时&#xff0c;默认进入的是北京分站…

iOS - OC 面向对象语法

1、类 1&#xff09;根类&#xff1a;因为类 NSObject 是层次结构的最顶层&#xff0c;因此称为根类。 可以将类称为子类&#xff08;subclass&#xff09;和父类&#xff08;superclass&#xff09;&#xff0c;也可以将类称为子类和超类。2&#xff09;分类&#xff0f;类别&…

第2章 Python 数字图像处理(DIP) --数字图像基础4 -- 像素间的一些基本关系 - 邻域 - 距离测试

目录像素间的一些基本关系像素的相邻像素距离测试import sys import numpy as np import cv2 import matplotlib import matplotlib.pyplot as plt import PIL from PIL import Imageprint(f"Python version: {sys.version}") print(f"Numpy version: {np.__ve…

网页关闭(解决window.close在火狐下不兼容问题)

熟悉前端的都知道&#xff0c;火狐默认状态非window.open的页面window.close是无效的 网上有很多人说&#xff0c;在火狐的地址栏输入:about:config然后找到dom.allow_scripts_to_close_windows;把false改为true 看着这些人的说法&#xff0c;不得不说我蛋疼了 我做的是网站&am…

iphone备忘录突然没了_苹果突然下架12 天猫:双11有惊喜!iPhone12 mini配色缩水

点击“蓝字”关注我们苹果旗舰店突然下架iPhone 12 天猫回应&#xff1a;请期待11.11的惊喜今天&#xff0c;有网友反馈&#xff0c;苹果天猫旗舰店的iPhone 12和iPhone 12 Pro被下架了。小编查看了下&#xff0c;天猫Apple Store旗舰店确实已经下降了目前在售的 iPhone 12 和 …

CGI小白一些漫想

CGI Common Gateway Interface 一种基于浏览器的输入、在Web服务器上运行的程序方法你创建客户端的 CGI脚本, 服务器端的程序用来处理用户输入, 结果返回给用户CGI脚本是什么&#xff1f;它是怎样工作的  CGI脚本是用下列两种方法使用的: 作为一个表单的ACTION 或 作为一个页中…

SSH开发中 使用超链接到action 其excute方法会被执行两次 actual row count: 0; expected: 1...

由于执行两次excute,所以在做删除操作的时候会出现 Batch update returned unexpected row count from update [0]; actual row count: 0; expected: 1 表示找不到要删除的在控制台出现的语句是 Hibernate: delete from user where id? Hibernate: delete from user where id?…

第3章 Python 数字图像处理(DIP) - 灰度变换与空间滤波1 - 灰度变换和空间滤波基础、Sigmoid激活函数

这里写目录标题本节的目标背景灰度变换和空间滤波基础本节的目标 了解空间域图像处理的意义&#xff0c;以及它与变换域图像处理的区别熟悉灰度变换所有的主要技术了解直方图的意义以及如何操作直方图来增强图像了解空间滤波的原理 import sys import numpy as np import cv2…

微软Edge扩展工具箱旨在将Chrome扩展带至Edge

微软Windows 10新工具Edge扩展工具箱旨在让开发人员可以轻松地将Chrome扩展转换为微软Edge扩展。\\微软Edge扩展工具箱的目标是在少修改或不修改的情况下将Chrome扩展移植到微软Edge。按照微软官方的描述&#xff0c;“该工具会创建必要的JSON清单项&#xff0c;架起一座从chro…

absolute 必须 relative_Workfine如何控制身份证号码必须为18位?

在信息化系统的设计中&#xff0c;由于业务的需要&#xff0c;我们往往需要设置许多控制项&#xff0c;以保证系统能够按照业务要求流转&#xff0c;必须出库数量不能超过库存&#xff0c;人员信息不能重复录入&#xff0c;考勤区间不能有交叉等。此篇以实例的方式告诉大家如果…

angularAMD快速入门

ngularAMD是作者 marcoslin 使用 RequireJS &#xff0b; AngularJS开发的前端mvvm框架,因此你可以使用它快速创建一款Web App.他特别适合快速开发SPA应用&#xff0c;适当的和更简单的方式。 我们整合AngularJS和RequireJS不应该是复杂的&#xff0c;它不是angularAMD。在行动…

ASP.NET MVC5 网站开发实践(二) Member区域 - 用户部分(2)用户登录、注销

上次实现了用户注册&#xff0c;这次来实现用户登录&#xff0c;用到IAuthenticationManager的SignOut、SignIn方法和基于声明的标识。最后修改用户注册代码实现注册成功后直接登录。 目录&#xff1a; ASP.NET MVC5 网站开发实践 - 概述 ASP.NET MVC5 网站开发实践(一) - 项目…

第3章 Python 数字图像处理(DIP) - 灰度变换与空间滤波2 - 图像反转、对数变换

目录一些基本的灰度变换函数图像反转对数变换一些基本的灰度变换函数 如下图显示了在图像处理中频繁使用的3类基本函数&#xff1a; 线性&#xff08;反转和恒等变换&#xff09;函数对数&#xff08;对数和反对数变换&#xff09;函数幂律&#xff08;nnn次幂和nnn次根变换&…

为Android应用程序添加社会化分享功能

正在做个android的小应用&#xff0c;有点想尝试一下社会化分享&#xff0c;比如分享到新浪微博啥的。看一下新浪&#xff0c;人人网的API&#xff0c;说实话功能很全很强大&#xff0c;但虽说有相对的SDK&#xff0c;但是总觉得不方便。因为正在使用友盟的统计SDK&#xff0c;…