JavaScript运行过程中的“预编译阶段”和“执行阶段”


Posted in Javascript onDecember 16, 2015

 javascript相对于其它语言来说是一种弱类型的语言,在其它如java语言中,程序的执行需要有编译的阶段,而在javascript中也有类似的“预编译阶段”(javascript的预编译是以代码块为范围<script></script>,即每遇到一个代码块都会进行  预编译>执行),了解javascript引擎的执行机理,将有助于在写js代码过程中的思路总结

首先科普下javascript中的两种声明方式,var和function,前者声明的是变量,后者声明的是方法

在预编译中,javascript对这两种声明做出了两种处理方案

<script>
var a = "1";

//声明变量a
 function b(){

//声明方法b
  
alert();

}

var c = function(){ //声明变量c


alert();

}
</script>

以上代码块中,a、c为变量赋值,b为函数声明,当执行以上的代码时,首先会进入预编译阶段,对与变量赋值a、c会在内存中开辟一块内存空间并指向变量名,且赋值为undefined

对于函数声明,则同样会进行开辟内存空间,但赋值的对象会将声明的函数赋值给函数名

预编译阶段:(PS:不管代码中声明变量和声明函数的顺序如何,在预编译阶段会先声明变量,再声明函数)

<script>

var a = undefined;


var c = undefined;

 

var b = function(){



alert();


} </script>

 执行阶段:

<script>

a = "1";


c = function(){



alert();


}
</script>

整体执行步骤:

<script>

var a = undefined;


var c = undefined;





var b = function(){



alert();


}


a = "1";


c = function(){



alert();


}
</script>

题目:

<script>

var a = "1";


function b(){



alert(a);



var a = "2";


}


b();
</script>

ps:javascript的预编译

     一、先预定义变量,再预定义函数

二、变量的预编译只作声明,不作初始化,初始化在执行时

 

三、function语句定义的函数,不仅声明了函数名,而且函数体也进行了处理

四、匿名函数不会预编译

function f(){      // 声明函数f  
return 1; } alert(f());       // 返回1 
var f = function(){    // 定义匿名函数f  
return 2; } alert(f());       // 返回2

先预定义了变量f,然后同名函数f()覆盖了变量f,所以第一次输出1;变量的预编译

var f = function(){    // 定义匿名函数f  
return 1; } 
alert(f());       // 返回1 
function f(){      // 声明函数f  
return 2; } 
alert(f());      // 返回1

先预定义了变量f,然后同名函数f()覆盖了变量f.

Javascript 相关文章推荐
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
vue使用节流函数的踩坑实例指南
May 20 Vue.js
Sublime Text 3常用插件及安装方法
Dec 16 #Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 #Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 #Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 #Javascript
javascript数组克隆简单实现方法
Dec 16 #Javascript
Perl Substr()函数及函数的应用
Dec 16 #Javascript
javascript针对不确定函数的执行方法
Dec 16 #Javascript
You might like
Codeigniter的dom类用法实例
2015/06/26 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
js canvas实现星空连线背景特效
2019/11/01 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
python框架django基础指南
2016/09/08 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
Python实现最常见加密方式详解
2019/07/13 Python
python数组循环处理方法
2019/08/26 Python
python urllib爬虫模块使用解析
2019/09/05 Python
python实现淘宝购物系统
2019/10/25 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
初中同学聚会感言
2014/02/11 职场文书
《云雀的心愿》教学反思
2014/02/25 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
人事文员岗位职责
2015/02/04 职场文书
小学教师自我评价
2015/03/04 职场文书
反邪教观后感
2015/06/11 职场文书
河童之夏观后感
2015/06/11 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis