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 相关文章推荐
Prototype 学习 工具函数学习($方法)
Jul 12 Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
Vue.js 中的 $watch使用方法
May 25 Javascript
解决vue处理axios post请求传参的问题
Mar 05 Javascript
详解react-redux插件入门
Apr 19 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
webpack HappyPack实战详解
Oct 08 Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
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上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
PHP实现微信退款功能
2018/10/02 PHP
javascript call方法使用说明
2010/01/11 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
python logging添加filter教程
2019/12/24 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
德国苹果商店:MacTrade
2020/05/18 全球购物
应届毕业生自我评价分享
2013/12/15 职场文书
市场营销策划方案
2014/06/11 职场文书
励志演讲稿600字
2014/08/21 职场文书
党员民主评议个人总结
2014/10/20 职场文书
2014年财政工作总结
2014/12/10 职场文书
离婚协议书范文2015
2015/01/26 职场文书
单位实习介绍信
2015/05/05 职场文书
vue使用echarts实现折线图
2022/03/21 Vue.js
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python