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 相关文章推荐
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 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&amp;&amp;mysql)五
2006/10/09 PHP
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
PHP实现简单登录界面
2019/10/23 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
python函数返回多个值的示例方法
2013/12/04 Python
Python数组条件过滤filter函数使用示例
2014/07/22 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
如何开启linux的ssh服务
2013/06/03 面试题
毕业生就业推荐信范文
2013/12/01 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
领导干部失职检讨书
2015/05/05 职场文书
离婚上诉状范文
2015/05/23 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python