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的运行机制有所了解了吧。收笔。

 

目录
相关文章
|
1月前
|
设计模式 JavaScript 前端开发
深入理解 JavaScript 中的绑定机制(下)
深入理解 JavaScript 中的绑定机制(下)
|
1月前
|
JavaScript 前端开发
深入理解 JavaScript 中的绑定机制(上)
深入理解 JavaScript 中的绑定机制(上)
|
3月前
|
JavaScript 前端开发 数据库连接
js的异常程序处理机制
js的异常程序处理机制
18 0
|
3月前
|
存储 前端开发 JavaScript
深入理解前端JavaScript执行机制
深入理解前端JavaScript执行机制
43 0
|
30天前
|
开发框架 JavaScript 前端开发
描述JavaScript事件循环机制,并举例说明在游戏循环更新中的应用。
JavaScript的事件循环机制是单线程处理异步操作的关键,由调用栈、事件队列和Web APIs构成。调用栈执行函数,遇到异步操作时交给Web APIs,完成后回调函数进入事件队列。当调用栈空时,事件循环取队列中的任务执行。在游戏开发中,事件循环驱动游戏循环更新,包括输入处理、逻辑更新和渲染。示例代码展示了如何模拟游戏循环,实际开发中常用框架提供更高级别的抽象。
14 1
|
1月前
|
JavaScript 前端开发 算法
深入探讨前端框架Vue.js中的虚拟DOM机制
本文将深入探讨前端框架Vue.js中的虚拟DOM机制,分析其原理、优势以及在实际开发中的应用场景,帮助读者更好地理解Vue.js框架的核心特性。
|
1月前
|
消息中间件 前端开发 JavaScript
深入理解JavaScript中的事件循环机制
JavaScript作为一种前端开发必备的编程语言,在处理异步操作时常常涉及到事件循环机制。本文将深入探讨JavaScript中事件循环的工作原理,帮助读者更好地理解和运用这一关键概念。
|
1月前
|
自然语言处理 JavaScript 前端开发
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(下)
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(下)
|
1月前
|
JavaScript 前端开发
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(上)
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(上)
|
2月前
|
消息中间件 存储 前端开发
理解JavaScript事件循环机制
理解JavaScript事件循环机制
18 0