WEB前端学习一 JS预解释

javascript 的预解析：（个人理解）就是js代码在执行之前会在相应的执行环境中预先把一些东西解析到内存。如果理解错误，请多多指正

一. 那究竟预先解析哪些东西那？？答：预先解析 function 和 var

二. 还有就是预解析的顺序是怎们样的？

[plain] view plaincopy

1首先是找到<script></script>标签按照<script>块依次解析（最后会有说明）

[plain] view plaincopy

2 解析执行环境（这个有点难理解，在下面有具体解释）

[plain] view plaincopy

3 对标识符（ var function）进行解析

接下来结合我的测试代码一一解释：

[javascript] view plaincopy

<script>
test(); // This is test
function test()
{
alert('This is test');
}
</script>

以上案例，在function test()之前就调用了test()函数照样可以弹出 This is test

可见在js执行之前就预先把function test解析到了内存，所以调用test() 照常弹出结果；

接下来看看变量的预解析:

[javascript] view plaincopy

<script>
alert(test);//undefined
var test="this is test";
alert(test);//this is test
</script>

在var test=“test”，之前就调用alert弹出test，而没有报test未定义的错误，而是弹出了undefined，可见在js执行之前就预先把var test；解析到内存，所以不会报错，为什么会弹出undefined是因为，只是把var test的定义预先解析到内存，并没有给变量赋值；

[javascript] view plaincopy

var test="this is test";

当我们执行完这句话的时候，就完成了赋值，所以再次调用alert就弹出this is test

接下来继续看：变量和函数重名的时候会是什么情况？

[javascript] view plaincopy

<script>
alert(test); //function(){ return " this is function"}
var test="this is test";
function test(){
return "this is function";
}
alert(test); // this is test
alert(test()); // this is function
</script>

这段代码证明了，当函数名和变量名一样的时候，alert(test);调用的是函数function test() 的指针，而不是调用的变量var test; 所以function的预解析优先级高于var（个人觉得）

接下来说说“ 解析执行环境 ”是什么意思？？看下面的例子

[javascript] view plaincopy

<script>
function test(){
var msg ='This is test';
}
alert(msg); // 报错msg未定义
</script>

可能有人会有疑问了，按照上面说的js不是会预解析function 和 var msg吗，我在function 里面定义了var msg ，那为什么调用回报错那？？？

答案就和我们上面提到的 “解析执行环境” 有关系，在js执行之前是会预解析function 和var 没错，但是在本例中他们“解析执行环境”不同.

Function test是在一个全局的环境中，而msg是function test中定义的一个局部变量，msg的“解析执行环境”是在function test这个函数里面(这里可以理解为function test里的局部环境)，所以当我们在全局这个环境中alert(msg),的时候，并没有定义msg这个变量或者函数，所以就报错了；

为了进一步理解，把上面的例子加以修改

[javascript] view plaincopy

<script>
alert(msg); // undefined
function test()
{
alert(msg2);//undefined
var msg2 ='This is test';
}
var msg = "123";
test();
</script>

这个例子，js在执行之前预解析，解析全局的环境，解析到function test 和 var msg ；所以alert(msg);会弹出undefined；

然后当程序执行到test(); 的时候会进入function test里面去，也就是进入function test 的局部环境去预解析，这时候解析到 var msg2，所以也弹出了undefined；

为了理解的更清楚，可以用IE的F12打个断点看一下

程序开始预解析的时候，实在Global这个全局的执行环境中，解析到了function test 和msg

当我们执行test()的时候，就会进入function test里面这个局部执行环境去解析了

上图可以看到黄色的箭头有原来的Global 执行环境，变成了test则个局部执行环境了，然后再function test这个局部执行环境中预解析，此时就解析到了 var msg2 这个变量

到这应该可以理解“解析执行环境”这句话了吧，如果还不明白自己动手搞了例子，打个断点debug一下下面这段代码，应该就清楚了！

[javascript] view plaincopy

<script>
var a = "我是全局的a";
var b = " 我是全部的b";
function fun1(){
var a = "我是局部的a";
alert(a);
function fun2(){
alert(a);
alert(b);
}
func2();
}
fun1();
</script>

最后说明一下“1首先是找到<script></script>标签按照<script>块依次解析” 这句话是什么意思那？

我们的代码中可能会有多个<script>...</script>标签，每一个<script>...</script>标签我们认为是一个<script>块；js的预解析式按照<script>块来进行的；也就是说js预解析不会跨<script>块去进行预解析，什么意思那？看下面代码

[javascript] view plaincopy

<script>
alert(msg);
//test();
</script>
<script>
var msg ="test";
/* function test(){
alert("this is function");
}*/
</script>

这里有两个script块，他们是按照顺序进行预解析的，我们在第二个script块中定义的var msg，而在第一个script块中alert(msg)

显然在第一个script快中并没有预解析到一个叫msg的变量或者函数，而js又不会跨到第二个script块去解析，所以就报错msg未定义

函数function test 也一样

如果把两个script块调换一下位置，结果就不一样了

[javascript] view plaincopy

<script>
var msg ="test";
function test(){
alert("this is function");
}
</script>
<script>
alert(msg); // test
test(); // this is function
</script>

script块顺序进行预解析，当第一个script块预解析完，会解析到var msg 和function test，

当再第二个script块中调用alert(msg);和test();时上面的js程序已经执行完毕了，自然会弹出 test 和this is function

WEB前端学习一 JS预解释相关推荐

Web 前端学习之js概述
Web 前端学习之js概述 1.JavaScript 介绍 Javascript 语言诞生主要是完成页面的数据验证.因此它运行在客户端,需要运行浏览器来解析执行JavaScript 代码. JS 是 ...
深圳Web前端学习：js中的模块化--【千锋】
深圳Web前端学习:js中的模块化–[千锋] 0.前言我们知道最常见的模块化方案有CommonJS.AMD.CMD.ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的, ...
WEB前端学习二 JS作用域和作用域链
先上三段说明作用域的代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 3 ...
WEB前端学习五 js什么是引用类型
js中的数据类型有以下几种: Number Boolean undefined Object Function String Null 基本类型:Number Boolea ...
WEB前端学习六 js什么是闭包
WEB前端学习四 js什么是原始类型
原始值与引用值在ECMAScript 中,变量可以存放两种类型的值,即原始值和引用值. 原始值(primitive value)是存放在栈(stack)中的简单数据字段,也就是说,它们的值直接存储在 ...
js怎么在一个div中嵌入另一网站_好程序员web前端学习路线分享HTML5常见面试题集锦一...
好程序员web前端学习路线分享HTML5常见面试题集锦,接下来将会持续为大家分享几篇HTML5常见面试题. 1.布局左边20% 中间自适应右边200px 不能用定位答案:圣杯布局/双飞翼布局或者 ...
web前端学习基础教程，简单的图片旋转木马自动轮播js代码
一款简单的图片旋转木马自动轮播js代码,图片叠加轮播切换效果,支持点击左右箭头按钮控制切换. 案例效果图案例源码: <!DOCTYPE html> <html lang=" ...
web前端学习中CSS，JS代码压缩
web前端要学习的知识有很多,前端基础要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念:HTML负责结构,网页想要表达的内容由html书写. CSS负责样式,网 ...

WEB前端学习一 JS预解释

WEB前端学习一 JS预解释相关推荐

最新文章

热门文章