javascript运行机制

简介: 很多人对javascript的加载运行机制懵懵懂懂,包括我也是。所以整理出来备忘: 一 先热热身,看看下面两段代码: //example 1 alert(a);a=1000;//example 2alert(b);var b=1000;//example 3func();var func=function(){}; 这三个会咋样呢?第一个会直接报错,代码终止执行当前代码块,跳入下一个代码块开始执行;第二个呢会弹出undefined,第三个会直接报错func不是一个函数。

很多人对javascript的加载运行机制懵懵懂懂,包括我也是。所以整理出来备忘:

一 先热热身,看看下面两段代码:

//example 1

alert(a);
a=1000;
//example 2
alert(b);
var b=1000;
//example 3
func();
var func=function(){};

这三个会咋样呢?第一个会直接报错,代码终止执行当前代码块,跳入下一个代码块开始执行;第二个呢会弹出undefined,第三个会直接报错func不是一个函数。为什么会有这样的差异呢?这就跟今天的主题有关系了,它们分别涉及到了javascript的两个运行阶段,预解析运行阶段

二 预热结束,我们先系统的来了解一下javascript的运行过程,如下:

  1 上到下依次读入一个代码块(一个script标签)

  2 对该代码块进行语法分析,检查到语法错误则报错并终止该代码块运行,直接跳到下一个代码块运行。

  3 对代码块进行预解析,所有的var变量初始化为undefined,所有的function 预定义。(该步骤不会报错)

  4 逐行运行代码,有错则报错,并终止该代码块运行,跳到下一个代码块

  5 完事,进入下一个代码块的执行

三 仔细想想, 大概就可以解释上面的问题了。下面我们一一来解释:

  第一个例子的错误出在第4步,因为代码没有语法错误,经过第2步预解析时虚拟机也没有发现a变量的定义(var),所以a压根没有定义,所以到第四步运行的时候就出现错误了,a变量未定义。

  第二个例子其实不是报错,只是经过预解析后的a变量被赋值为undefined,运行到alert(a)的时候,依然没有被赋值,所以就只有弹出undefined了。

  第三个有点意思,因为在预解析的时候,func被解释成了一个var变量,所以他的初始值是undefined,运行到func()的时候 func依然是undefined,还没有被定义成函数,所以程序就出现错误提示,func is not a function。

举了这么几个例子大家应该对JavaScript的运行机制有所了解了吧。收笔。

 

目录
相关文章
|
11月前
|
存储 JavaScript 前端开发
深入理解JavaScript中的事件循环(Event Loop):机制与实现
【10月更文挑战第12天】深入理解JavaScript中的事件循环(Event Loop):机制与实现
386 3
|
12月前
|
JavaScript 安全 前端开发
乾坤js隔离机制
乾坤js隔离机制
|
10月前
|
Web App开发 JSON JavaScript
Node.js 中的中间件机制与 Express 应用
Node.js 中的中间件机制与 Express 应用
|
10月前
|
JavaScript 安全 中间件
深入浅出Node.js中间件机制
【10月更文挑战第36天】在探索Node.js的奥秘之旅中,中间件的概念如同魔法一般,它让复杂的请求处理变得优雅而高效。本文将带你领略这一机制的魅力,从概念到实践,一步步揭示如何利用中间件简化和增强你的应用。
|
10月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
1328 1
|
10月前
|
消息中间件 JavaScript 中间件
深入浅出Node.js中间件机制
【10月更文挑战第24天】在Node.js的世界里,中间件如同厨房中的调料,为后端服务增添风味。本文将带你走进Node.js的中间件机制,从基础概念到实际应用,一探究竟。通过生动的比喻和直观的代码示例,我们将一起解锁中间件的奥秘,让你轻松成为后端料理高手。
125 1
|
11月前
|
移动开发 JavaScript 前端开发
【JavaScript】JS执行机制--同步与异步
【JavaScript】JS执行机制--同步与异步
176 1
|
11月前
|
JSON JavaScript 中间件
深入浅出Node.js中间件机制
本文将带你探索Node.js中一个核心概念——中间件机制。我们将通过浅显的语言和生动的比喻,揭示中间件如何作为请求和响应之间的“交通枢纽”,在应用程序中起到至关重要的作用。从基础原理到实际应用,你将了解到中间件不仅简化了代码结构,还提高了开发效率,是Node.js开发不可或缺的一部分。
128 1
|
12月前
|
前端开发 JavaScript Java
JavaScript的运行原理
JavaScript 的运行原理包括代码输入、解析、编译、执行、内存管理和与浏览器交互几个步骤。当打开网页时,浏览器加载 HTML、CSS 和 JavaScript 文件,并通过 JavaScript 引擎将其解析为抽象语法树(AST)。接着,引擎将 AST 编译成字节码或机器码,并在执行阶段利用事件循环机制处理异步操作,确保单线程的 JavaScript 能够高效运行。同时,JavaScript 引擎还负责内存管理和垃圾回收,以减少内存泄漏。通过与 DOM 的交互,JavaScript 实现了动态网页效果,提供了灵活且高效的开发体验。
|
11月前
|
JavaScript 前端开发 开发者
原型链深入解析:JavaScript中的核心机制
【10月更文挑战第13天】原型链深入解析:JavaScript中的核心机制
224 0