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 index()方法使用代码
Jun 02 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
Mar 14 Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
20行JS代码实现网页刮刮乐效果
Jun 23 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
如何对react hooks进行单元测试的方法
Aug 14 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
PHP4在Windows2000下的安装
2006/10/09 PHP
关于时间计算的结总
2006/12/06 PHP
使用PHP数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
基于Jquery的简单图片切换效果
2011/01/06 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
简单解析JavaScript中的__proto__属性
2016/05/10 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
python绘图库Matplotlib的安装
2014/07/03 Python
跟老齐学Python之总结参数的传递
2014/10/10 Python
Python中的pprint折腾记
2015/01/21 Python
20个常用Python运维库和模块
2018/02/12 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
职业生涯规划设计步骤
2014/01/12 职场文书
租房协议书怎么写
2014/04/10 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
检讨书范文2000字
2015/01/28 职场文书
南京导游词
2015/02/03 职场文书
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫