JavaScript运行命令

JavaScript运行命令

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

前言

       动人js一段时间,我认为事情仅仅是一个很肤浅的理解。是非常欠缺的。所以開始使用博客来对这一部分的知识做个慢慢的记录和积累。

相信积少成多,慢慢的将这一部分的知识攻克!

       第一篇记录的不是相关的应用。而是非常底层的知识—JavaScript解析引擎。

想要了解这一部分的知识也是通过在项目中遇到的问题而联想到的。

问题的背景

       在一段脚本中,运行的顺序是先将js文件里的alert()运行了一遍,然后当我详细调用到那个函数的时候再运行这个函数。当时看到就产生了一个疑问:运行函数之前为什么运行了alert(),非常明显他没有运行我定义的函数,却运行了alert();

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js运行測试</title>
</head>
<script>
	var a ;
	a = 1;
	function f1(){ alert("第一个函数"); }
	alert("測试");
	function f2(){ alert("第二个函数"); }
	alert(a);
	function f3(){ alert("第三个函数"); }
</script>

<body>
	<div>
		<a herf="#" onclick="f1()">測试</a>
	</div>
</body>
</html>

运行结果是:測试   1


须要了解的前提

         须要了解两个概念,一个是JavaScript解析引擎。另外一个是JavaScript解析引擎和浏览器的关系

1.JavaScript解析引擎

  解释运行脚本的程序。

能够看成是一个解释器。

  这个引擎须要完毕两个功能:
     一是解释脚本程序,将js代码读懂。
     二是运行脚本程序,将脚本程序读懂之后就要运行这个程序。

   比方在一篇博客中看到的一个样例。当你写了 var a = 1 + 1; 这样一段代码,JavaScript引擎做的事情就是看懂(解析)你这段代码,而且将a的值变为2。
     看这个概念的时候还想起另外一个概念就是编译器,它仅仅是将源码编译成第二种代码(比方机器码。或者字节码)。就好象是一个翻译官,将中文翻译成英文。它不可以运行这段程序。

2.JavaScript解析引擎和浏览器的关系

        JavaScript解析引擎是浏览器的组成部分之中的一个。
        当了解了前提之后我们知道,我们写的js代码是须要通过浏览器中的JavaScript解析引擎解析运行的,详细的解析机制大家能够google一下,我对这部分了解不深,仅仅知道了解各大概。但是我认为这些知识对于我了解其它的知识已经足够了。
       解析机制分为两个大过程,一个编译过程,另外一个是运行过程。编译过程终于是在内存中构建一个语法树。运行过程就是依照语法树来运行代码。对于编译和运行内部详细的运行我就不清楚了。


js代码在页面中的运行顺序

      上面讲到的都是一些理论知识。以下就来看看我们在实际应用过程中会js代码在页面中的运行顺序。这些就是上面理论知识的一些非常形象的反应。

1. 引擎对js解析—预编译和运行顺序关系

       它会在预编译期对全部声明的变量和函数进行处理。所以,就会出现当JavaScript解释器运行以下脚本时不会报错:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js运行測试</title>
</head>
<script>
	alert(a);   //undefined
	var a ;
	a = 1;
	function f1(){ alert("第一个函数"); }
	alert("測试");  //測试
	function f2(){ alert("第二个函数"); }
	alert(a);  //1
	function f3(){ alert("第三个函数"); }
</script>

<body>
	<div>
		<a herf="#" onclick="f1()">測试</a>
	</div>
</body>
</html>

运行结果是: undefined   測试  1 

       预编译做的工作:将声明的变量和函数做处理。从而使其在运行期间对全部的代码都是可见的。

       可是,你也会看到。运行上面代码。提示的值是 undefined,而不是1。

这是由于,变量初始化过程发生在运行期,而不是预编译期。

在运行期,JavaScript解释器是按着代码先后顺序进行解 析的,假设在前面代码行中没有为变量赋值。则JavaScript解释器会使用默认值undefined。由于在第二行中为变量a赋值了。所以在第三行代 码中会提示变量a的值为1,而不是undefined。


2. 文件流载入时—js依照HTML文档流顺序运行

      js能够看成HTML文档的组成部分。

HTML文档是从上到下逐步解析的。不管是使用<script></script>块还是使用外部引用的js文件都是如此。

使用外部js文件引用,将上面的代码写到js文件里。运行结果不变

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js运行測试</title>
</head>
<script type="text/javascript" src="Untitled-2.js"></script>
<body>
	<div>
		<a herf="#" onclick="f1()">測试</a>
	</div>
</body>
</html>

js文件

var a ;
a = 1;
function f1(){ alert("第一个函数"); }
alert("測试");
function f2(){ alert("第二个函数"); }
alert(a);
function f3(){ alert("第三个函数"); }


运行结果:測试  1  

3. 文件流载入完毕之后—依照事件机制改变js运行顺序

类似于调用函数,在哪里调用到就在此处运行,假设没有调用到就不运行。从上面的代码中能够看到。为a标签加入了点击事件。所以当单击的时候会运行相应的函数

总结

所以能够解释为什么alert()运行了,而函数没有运行。js解析引擎要有一个预编译过程,对定义的变量和函数做处理。

同一时候js还要依据HTML文档流的顺序运行。

这就是运行我自定义的函数之前的过程,而我所以的运行自定义的函数事实上是事件机制调用js的一个体现。



版权声明:本文博客原创文章。博客,未经同意,不得转载。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/117369.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • ora01017 linux,ORA-01017: invalid username/password; logon denied 解决办法

    ora01017 linux,ORA-01017: invalid username/password; logon denied 解决办法ORA-01017:invalidusername/password;logondenied解决办法环境介绍:操作系统RHEL6.4X64、数据库:ORACLE11.2.0.4.0;在现有环境下手动创建数据库,在数据库的手动创建过程中没有大的问题,但在数据库创建完成后出现在本地可以登录数据库用户包括管理员账户,通过客户端远端无法登录报如下错误:通过测试,或者在数据库系统中更换用户账户口…

  • linux下卸载软件命令行,如何使用Linux中的命令行卸载软件 | MOS86「建议收藏」

    linux下卸载软件命令行,如何使用Linux中的命令行卸载软件 | MOS86「建议收藏」Linux提供了不同的安装软件的方法。您可以使用Ubuntu软件中心从标准Ubuntu软件仓库外部或通过编译源代码安装来自标准Ubuntu软件仓库的软件。但是,如果你需要卸载程序怎么办?如果您使用Ubuntu软件中心从Ubuntu软件仓库安装了软件,您可以使用Ubuntu软件中心来卸载该软件。但是,如果您使用命令行更加舒适,我们将向您显示一个简单的方法来查看系统上安装的内容并卸载程序。相关文章图片…

  • STM32F103C8T6单片机简介「建议收藏」

    STM32F103C8T6单片机简介「建议收藏」TheSTM32F103xxmedium-densityperformancelinefamilyincorporatesthehigh-performanceARMCortex-M332-bitRISCcoreoperatingata72MHzfrequency,high-speedembeddedmemories(Flashmemoryupto128KbytesandSRAMupto20Kbytes),andanextensive

  • 操作系统实验五 虚拟存储器管理

    实验五虚拟存储器管理一、实验目的1、理解虚拟存储器概念。2、掌握分页式存储管理地址转换和缺页中断。二、实验内容与基本要求1、模拟分页式存储管理中硬件的地址转换和产生缺页中断。2、用先进先出页面调度算法处理缺页中断。三、实验报告内容1、分页式存储管理和先进先出页面调度算法原理。a.分页式存储管理原理  在存储器管理中,连续分配方式会形成许多“碎片”,虽然可通过“紧凑”方法将

  • 计算机与打印机未连接,win7系统无法打印提示似乎未连接打印机的恢复步骤

    计算机与打印机未连接,win7系统无法打印提示似乎未连接打印机的恢复步骤win7系统使用久了,好多网友反馈说win7系统无法打印提示似乎未连接打印机的问题,非常不方便。有什么办法可以永久解决win7系统无法打印提示似乎未连接打印机的问题,面对win7系统无法打印提示似乎未连接打印机到底该如何解决?其实只需要首先我们需要检查一下打印机的驱动是否正常,右键点击桌面上的“此电脑”图标,在弹出菜单中选择“属性”菜单项,这时会打开windows10系统的系统窗口,点击左侧边栏的…

  • 使用JS获取上一页的url地址

    使用JS获取上一页的url地址

    2021年10月30日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号