如果想要学好JavaScript那么我们首先必须要知道浏览器JavaScript引擎是如何解释执行JavaScript代码的,作为一名菜鸟,从自己学习JavaScript的过程来说,真心觉得不了解这些在以后的学习JavaScript过程中会徒增许多困惑,多走许多弯路.好了废话不多说了,我们就一起来看看到底怎么一个过程吧.

浏览器在执行JavaScript代码之前会进行类似写C和C++一样的预编译操作,在预编译的阶段,首先创建一个当前执行环境下的活动对象,并且将那些用 var 声明的变量设置为当前活动对象的属性,但是这些变量的初始化的赋值都是undefined;而对于那些function 定义的函数也添加为当前活动对象的属性,而他们的值赋予的是函数的定义,特别提醒下对于下面的代码不要误解,匿名函数是不会被解析的,funTemp的初始化依旧在执行阶段;

 var funTemp=function() { //匿名函数
alert("Hello World!");
}

针对预编译阶段我们为了便于理解验证,那么首先举例来看一看:

 <script type="text/javascript">
alert(tempFirst); //返回值undefined
var tempFirst="麦兜";
alert(tempFirst); //返回值 麦兜 alert(Hello); //返回值 函数Hello定义语句
alert(Hello()); //返回值 Hello JavaScript
function Hello(){
alert("Hello JavaScript");
} alert(Hi()); //返回值 undefined
var Hi=function (){
alert("Hi JavaScript");
} </script>

预编译阶段结束后我们来看看执行阶段是如何进行的,首先遇到变量需要解析时候,会首先从当前的执行环境中的活动对象进行查找,如果没有找到但是该活动对象拥有prototype属性中进行查找,没有找到的话按照作用域链继续查找.遇到var a=...这样的语句时候则会给相应的变量a进行赋值,下面我们举个有意思例子来加深下对这个概念的理解。

   <script type="text/javascript">

   var name="Sudo";

   function nameScope()
{
alert(name); // 返回值 undefined
var name="Admin";
alert(name); // 返回值 Admin
}
nameScope();
alert(name); // 返回值 Sudo
</script>

在执行nameScope()函数时候,第一个alert(name)会先从该函数的作用域里面寻找name属性,因为在预编译的时候确实赋予了当前作用域里面有name属性,并且赋值为undefined,找到了以后当然不会去寻找外围的全局name了,所以先弹出undefined,然后函数里面对其赋值admin初始化,继而弹出Admin,同样在函数执行完成后,类似与其他语言里面的析构函数一样,所有占用的内存全部释放了,而其变量也仅仅在当前函数内执行有效,最外面alert(name),则访问的即是全局变量sudo为弹出结果,留给有意思的代码,猜猜结果

  <script type="text/javascript">

  var name="Sudo";

  function nameScope()
{
alert(name); // 返回值 Sudo
name="Admin";
alert(name); // 返回值 Admin
}
nameScope();
alert(name); // 返回值 Admin
</script>

好了,其实这些是自己一边学习一边总结的,以后或多或少肯定会有错误,希望大家提点下哦,

JavaScript自我学习之解析与执行的更多相关文章

  1. 第112天:javascript中函数预解析和执行阶段

    关于javascript中的函数:  1.预解析:把所有的函数定义提前,所有的变量声明提前,变量的赋值不提前  2.执行 :从上到下执行,但有例外(setTimeout,setInterval,aja ...

  2. javascript的加载、解析、执行对浏览器渲染的影响

    javascript的加载方式,总得来说是在页面上使用script来声明,以及动态的加载这些方式,而动态的加载,在很多js库中都能够很好的去处 理,从而不至于阻塞其他资源的加载,并与其并行加载下来.这 ...

  3. 简述javascript的解析与执行

    我们知道浏览器中javascript程序的执行是基于变量与函数的.那么浏览器是如何保存数据,又是如何执行的呢?今天我们一起来探究一下! 0.写在前 最新的 ECMAScript 标准定义了 8 种数据 ...

  4. JavaScript紧凑学习

    JavaScript紧凑学习 windows本地,调用命令行: win键+R 键入cmd , (cmd是Command 命令行 简称) 目录是C盘下的 C:\Users\Administrator&g ...

  5. JavaScript 基础学习(二)js 和 html 的结合方式

    第一种 使用一个标签 <script type="text/javascript"> js代码; </script> 第二种 使用 script 标签,引入 ...

  6. JS的解析与执行过程

    JS的解析与执行过程 全局中的解析和执行过程 预处理:创建一个词法环境(LexicalEnvironment,在后面简写为LE),扫描JS中的用声明的方式声明的函数,用var定义的变量并将它们加到预处 ...

  7. javascript设计模式学习之九——命令模式

    一.命令模式使用场景及定义 命令模式常见的使用场景是:有时候需要向某些对象发送请求,但是并不知道请求的接受者是谁,也不知道请求的具体操作是什么.此时希望用一种松耦合的方式来设计程序,使得请求的发送者和 ...

  8. 高性能JavaScript模板引擎原理解析

    随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC ...

  9. 大量Javascript/JQuery学习教程电子书合集

    [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人   不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pd ...

随机推荐

  1. C#中Property和Attribute的区别

    C#中Property和Attribute的区别 Attribute 字段Property 属性(get;set;) 属性的正常写: private string name; public strin ...

  2. Android-----------打开手机上的应用

    ##判断手机上是否存在应用,存在则打开 package com.funs.openApp.utils; import java.util.List;          import android.c ...

  3. linux oracle 设置随系统自动启动数据库实例和监听

    在root账户下修改/etc/oratab 文件: # vi /etc/oratab 找到orcl=/db/app/oracle/product/11.1.0/db_1 :N这一行 改为: orcl= ...

  4. JS生成不重复随机数

    说明 我们可以用Math.random()的方法轻松的生成 一个随机的数字,但是这个数字可能是重复的.有时候,我们需要一个不重复的随机数,可以用很多的方法来实现这个要求,以下方法是效率最高的. 解释 ...

  5. PCL编译历程

    boost 编译安装包下载地址: http://boost.teeks99.com/ boost安装:http://blog.sina.com.cn/s/blog_7c48b0f10102v0zj.h ...

  6. GTD:是一种态度

    时间管理发展的四个阶段: 第一代理论着重利用便条与备忘录,在忙碌中调配时间与精力: 第二代理论强调行事历与日程表,反映出时间管理已注意到规划未来的重要: 第三代理论正是目前流行的优先级观念.也就是依据 ...

  7. 如何让你的 footer 总是在浏览器底部无论什么分辨率无论什么浏览器?

    一个可以用的CSS驱动的可粘在底部的Footer 我们曾经都或多或少的试过用CSS来把Footer固定在底部的经理,但是他们总是不能正常的粘在底部,不是吗?可喜的是,痛苦的研究如何让footer粘在底 ...

  8. DESTOON伪静态的设置/news/1.html格式

    在本地测试了,DT默认伪静态格式是这样http://127.0.0.2/news/show/1.htmlhttp://127.0.0.2/news/show1-1.html但是这种不利于seo优化所以 ...

  9. 愉快的开始 - Windows程序设计(SDK)000

    愉快的开始 让编程改变世界 Change the world by program  参考教材 购买链接:Windows程序设计(第5版)(珍藏版)(附CD-ROM光盘1张)  学习环境 视频演示:W ...

  10. 算法导论--python--插入排序

    #!/usr/local/python35/bin/python3.5 #### insert sort if __name__=="__main__": var_list=[3, ...