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 相关文章推荐
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
js date 格式化
Feb 15 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
Vue.js watch监视属性知识点总结
Nov 11 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 Javascript
解决Vue项目中tff报错的问题
Oct 21 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 Javascript
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
php之Smarty模板使用方法示例详解
2014/07/08 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
PHP异常处理Exception类
2015/12/11 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
给Function做的OOP扩展
2009/05/07 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
python Django批量导入数据
2016/03/25 Python
Python 字符串大小写转换的简单实例
2017/01/21 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
python的mysqldb安装步骤详解
2017/08/14 Python
pandas的唯一值、值计数以及成员资格的示例
2018/07/25 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
Python3进制之间的转换代码实例
2019/08/24 Python
Python定义一个Actor任务
2020/07/29 Python
室内设计自我鉴定
2013/10/15 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
详解Python描述符的工作原理
2021/06/11 Python
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技
tomcat下部署jenkins的方法
2022/05/06 Servers
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android