理解 JavaScript 预解析

事实上或某种现象证明并不是这样的，通过《JavaScript权威指南》及网上相关资料了解到，JavaScript有“预解析”行为。理解这一特性是很重要的，不然在实际开发中你可能会遇到很多无从解析的问题，甚至导致程序bug的存在。为了解析这一现象，也作为自己的一次学习总结，本文逐步引导你来认识JavaScript“预解析”，如果我的见解有误，还望指正。
（1）如果JavaScript仅是运行时自上往下逐句解析的，下面的代码能正确运行是可以理解的，因为我们先定义函数，然后才调用它。


代码如下:

function showMsg()
{
alert('This is message');
}
showMsg(); // This is message

（2）我们也知道函数可以定义在调用代码之后，如下代码也是能正常工作的。看起来调用showMsg()的时候showMsg()还是没有定义的，但能正常工作，则表明JavaScript是“预解析”的。


代码如下:

showMsg(); // This is message
function showMsg()
{
alert('This is message');
}

（3）上面是函数的例子，下面再来一个普通变量的例子。以下例子运行将会弹出undefined，表明第一句的msg已经是定义了，只是没有初始化，它与var msg; alert(msg);是一样的。如果你把下面第二句注释掉，则会报“msg未定义”错误。这亦表明JavaScript是“预解析”的。


代码如下:

alert(msg); //undefined
var msg='This is message';

（4）再来看一个例子，加深对JavaScript“预解析”印象。以下代码你将看到两次弹出的对话框都是显示This is message 2，为什么会这样呢？其实下面一前一后定义了两个同名函数，后面的showMsg()覆盖了前面定义的（在JavaScript中，同名变量一样会存在覆盖问题），等于第一个showMsg()报废了。为什么第二次调用的showMsg()不是调用它上面定义的那个message 1函数呢？这再次证明JavaScript有“预解析”行为。


代码如下:

showMsg(); // This is message 2
function showMsg()
{
alert('This is message 1');
}
showMsg(); // This is message 2
function showMsg()
{
alert('This is message 2');
}

（5）JavaScript“预解析”是把变量或函数预解析到它们能调用的环境（变量运行时环境）中。如下代码看起来alert(msg)之前有看到msg的定义，但是程序运行还是报“msg未定义”错误，这是因为函数里定义的变量是函数的私有变量，外面不能直接调用，这表明JavaScript“预解析”并不是把所有定义的变量统一解析到一个全局对象中，比如window。


代码如下:

function showMsg()
{
var msg='This is message';
}
alert(msg); // msg未定义

（6）JavaScript“预解析”是分段进行的，准确说是分<script>块进行的。以下代码出现在同一个页面的两个脚本块中，同时定义了三个同名函数。程序运行结果表明第二个脚本块的showMsg()没有覆盖前面两个showMsg()，而第一个脚本块的第二个showMsg()则覆盖了第一个showMsg()。


代码如下:

<body>
<script type="text/javascript">
showMsg(); //This is message 2
function showMsg()
{
alert('This is message 1');
}
function showMsg()
{
alert('This is message 2');
}
</script>
<script type="text/javascript">
function showMsg()
{
alert('This is message 3');
}
</script>
</body>

作者：WebFlash
出处：http://webflash.cnblogs.com

赞 (0)

相关推荐

  • 跟我学习javascript的var预解析与函数声明提升

    1.var 变量预编译 JavaScript 的语法和 C .Java.C# 类似,统称为 C 类语法.有过 C 或 Java 编程经验的同学应该对"先声明.后使用"的规则很熟悉,如果使用未经声明的变量或函数,在编译阶段就会报错.然而,JavaScript 却能够在变量和函数被声明之前使用它们.下面我们就深入了解一下其中的玄机. 先来看一段代码: (function() { console.log(noSuchVariable);//ReferenceError: noSuchVari

  • 浅谈js script标签中的预解析

    首先介绍预解析,虽然预解析字面意思很好理解,但是却是出坑出的最多的地方,也是bug经常会有的地方,利用好预解析的特性可以解决很多问题,并且提高代码的质量及数量,浏览器在解析代码前会把变量的声明和函数(整个函数体)提前到当前作用域的最顶端. 细节问题:在多对的script标签中如果有相同的函数,那它们相互之间是不会受影响的,在第二对script标签中声明变量或者是创建函数,在第一对script标签中是无法访问到的,这就说明了,javaScript的预解析只会在各自的script标签中发生,同时,第

  • jquery eval解析JSON中的注意点介绍

    在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的each方法来遍历 用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明. 这里首先给出JSON字符

  • 解析JSON对象与字符串之间的相互转换

    在开发的过程中,如果对于少量参数的前后台传递,可以直接采用ajax的data函数,按json格式传递,后台Request即可,但有的时候,需要传递多个参数,这样后台 接受的时候Request多个很麻烦,此时要按照类的格式或者 集合的形式进行传递. 例如:前台按类的格式传递JSON对象: var jsonUserInfo = "{\"TUserName\":\"" + userName + "\",\"TInterest\&qu

  • JavaScript预解析及相关技巧分析

    本文实例讲述了JavaScript预解析及相关技巧.分享给大家供大家参考,具体如下: 变量 同样,以这两个小例子的错误对比提示开始. alert(y1); //代码段1 var y1 = 'dddd'; alert(y2); //代码段2 // alert(typeof y2); y2 = 'xxxxx'; 先思考一下,为什么一个会提示 undefined , 一个却抛出变量未定义的错..先看JavaScript的解析过程. javascript在执行过程之前,会做一件事件"预解析".

  • js 将json字符串转换为json对象的方法解析

    例如: JSON字符串: var str1 = '{ "name": "cxh", "sex": "man" }'; JSON对象: var str2 = { "name": "cxh", "sex": "man" }; 一.JSON字符串转换为JSON对象 要使用上面的str1,必须使用下面的方法先转化为JSON对象: //由JSON字符串转换为

  • jQuery怎么解析Json字符串(Json格式/Json对象)

    jQuery怎么解析Json字符串(Json格式/Json对象)

    json数据是我们常用的一种小型的数据实时交换的一个东西,他可以利用jquery或js进行解析,下面我来介绍jquery解析json字符串方法. 我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法. 上例中得到的JSON数据如下,是一个嵌套JSON: { "comments": [ { "content": "很不错嘛", "id": 1, "nickname&

  • jquery JSON的解析方式

    这里考虑都考虑的是服务器返回的是JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明. 这里首先给出JSON字符串集,字符串集如下: 复制代码 代码如下: var data=" { root: [ {name:'1',value:'0'}, {name:'6101',value:'西安市'}, {name:'6102',value:'铜川市'}, {name:'6103',value:'宝鸡市'}, {name:'6104',valu

  • 深入理解JavaScript中的预解析

    深入理解JavaScript中的预解析

    前言 JavaScript是解释型语言是毋庸置疑的,但它是不是仅在运行时自上往下一句一句地解析的呢? 事实上或某种现象证明并不是这样的,通过<JavaScript权威指南>及网上相关资料了解到,JavaScript有"预解析"行为.理解这一特性是很重要的,不然在实际开发中你可能会遇到很多无从解析的问题,甚至导致程序bug的存在.为了解析这一现象,也作为自己的一次学习总结,本文逐步引导你来认识JavaScript"预解析",如果我的见解有误,还望指正. 在

  • 理解 JavaScript 预解析

    事实上或某种现象证明并不是这样的,通过<JavaScript权威指南>及网上相关资料了解到,JavaScript有"预解析"行为.理解这一特性是很重要的,不然在实际开发中你可能会遇到很多无从解析的问题,甚至导致程序bug的存在.为了解析这一现象,也作为自己的一次学习总结,本文逐步引导你来认识JavaScript"预解析",如果我的见解有误,还望指正. (1)如果JavaScript仅是运行时自上往下逐句解析的,下面的代码能正确运行是可以理解的,因为我们先

  • 通过示例演示理解javascript预解析

    通过示例演示理解javascript预解析

    目录 提出问题 坑一 坑二 问题解答 案例练习 案例一 案例二 案例三 案例四(经典的面试题) 结语 面试官最爱考的javascript预解析,你搞明白了吗?javascript的es5语法和其他语言还是有些区别的,预解析正是面试爱考的重点,不妨来看看这篇博文… 提出问题 先看下面的两个最基本问题,结果你想到了吗? 坑一 <script> // 坑一 console.log(num); var num = 10; </script> 结果为什么会是undefined呢?先保留这个疑

  • JavaScript预解析,对象详解

    JavaScript预解析,对象详解

    目录 一.预解析 1.变量预解析和函数预解析 1.变量预解析 2.函数预解析 2.预解析案例 二.对象 1.创建对象的三种方式 1.利用字面量创建对象 2.利用new Object创建对象 3.利用构造函数创建对象 4.构造函数和对象 2.new关键字 3.遍历对象属性 总结 一.预解析 1.变量预解析和函数预解析 JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的.JavaScript 解析器在运行 JavaScript 代码的时候分为两步:预解析和代码执行. 预解

  • JavaScript 预解析的4种实现方法解析

    预解析:在当前作用域下,js运行之前,会把带有var和function关键字声明的变量先声明,并在内存中安排好.然后从上至下解析js语句.而且function的声明优先于var声明. 不多说,,直接上代码 正规写法: var num=10; fun(); function fun(){ console.log(num);//undefined var num=20; } 预解析里:先将变量和函数提前,如下: var num; function fun(){ var num; console.lo

  • JavaScript预解析之变量预解析和函数预解析

    首先了解预解析之前先看两个问题 1.大家思考下  这个结果会是多少呢? console.log(num); var num=10; 结果是 undefined 2.这个输出结果又会是多少呢? fun(); var fun=function(){ console.log(22); } 显然这个结果报错了. 那究竟为什么会这样执行呢? 1.我们js引擎运行js分为两步: 预解析   代码执行 预解析 js引擎会把js里面所有的var还有function提升到当前作用域的最前面 代码执行 按照代码书写

  • 理解JavaScript变量作用域更轻松

    JavaScript本身作为一门简单的语言,就其变量作用域问题一样令不少人头晕,这主要是因为JavaScript闭包的存在.本文不打算深入讲解JavaScript变量作用域问题(其实本人也没有能力能把这一话题讲的深入些),也不讲"闭包"话题,本文只讨论最实用的JavaScript作用域知识点. 一.JavaScript作用域分类 JavaScript就两种作用域:全局(window).函数级(function).函数级(function)不要理解为"块级(大括号{}级)&qu

  • 深入理解JavaScript系列(3) 全面解析Module模式

    简介 Module模式是JavaScript编程中一个非常通用的模式,一般情况下,大家都知道基本用法,本文尝试着给大家更多该模式的高级使用方式. 首先我们来看看Module模式的基本特征: 模块化,可重用 封装了变量和function,和全局的namaspace不接触,松耦合 只暴露可用public的方法,其它私有方法全部隐藏 关于Module模式,最早是由YUI的成员Eric Miraglia在4年前提出了这个概念,我们将从一个简单的例子来解释一下基本的用法(如果你已经非常熟悉了,请忽略这一节

随机推荐