浅谈js的解析顺序 作用域 严格模式
一、javascript的解析顺序
我们大家所理解的代码的执行顺序都是从上到下的,但是实际上确不是这样的。我们看一下下面的代码。
alert(a); vara=1;
如果执行顺序是从上到下的,在上面弹出一个a,浏览器会认为从上到下执行的,那么当它alert(a)的时候,他就会发现没有这个东西,那么他就会报错,但是实际上他弹出来的结果是undefined。返回值是undefined说明a没有被定义也就是没有赋值。下面我来讲解一下javascript的解析顺序。
1.ES5中有声明意义的关键字
var会存在变量提升
function也有声明变量的的作用。
2.解析顺序
1.找声明var、function声明:只是声明变量,而不包括赋值。
2.执行
注意:以上两步都遵循从上至下,执行的时候遇到等号,先看等号的右边。
注意:当function声明的变量和var声明的变量重名时,function的变量权重会比var声明的要高。
下面多来几个例子解析一下就清楚许多了,但是看例子之前要知道一下什么叫作用域。
二、作用域
作用域就是:起作用的范围分为下面两种
1.全局作用域
2.函数作用域
他们两个的区别看下面的例子仔细分析。
三、看几个例子解析一下执行顺序的步骤
1.第一个例子:
varx=5; a(); functiona(){ alert(x); varx=10; } alert(x);
解析过程
1,.寻找声明(看全局作用域)
varx; functiona(){}
2.执行
x=5;
a()------------->执行到这个函数的过程中在重新进行以上两步
1,寻找声明varx;(函数作用域)
2.执行
alert(x);这个x在函数作用域中存在,并且还没有执行到赋值的那一步,那么弹出的东西就是undefined;
x=10;
alert(x)这里弹窗是全局变量5;
所以浏览器弹窗的内容是undefined5
2.第二个例子
a() functiona(){ alert(x); varx=10; } alert(x);
解析过程按照上面的例子一样分析
1.寻找声明
functiona(){}
2.执行
a()------------------------->函数
1.寻找声明
varx;
2.执行
alert(x)弹出未定义
x=10;
alert(x);这里的x会从全局中寻找x,但是发现并没有x,所以浏览器会报错xisnotdefinedx没有被定义
所以浏览器的弹出的内容是undefined报错
我相信看了这两个例子的人都对这个解析过程都有了清除的了解,如果还是不太了解,建议重新看一次。
下面介绍几个需要注意的地方,直接上例子
3.第三个例子
前面讲到了当function声明的变量和var声明的变量重名时,function的变量权重会比var声明的要高。来一个例子证明一下
alert(a) functiona(){ alert("函数") } vara=1; alert(a)
解析过程
1.寻找声明
functiona(){}
vara;
2.执行
alert(a)前面说到了function的声明比var声明的权重高,所有执行这个的时候他会弹出这个函数块(函数体)
a=1;
alert(a);这里弹出的就是1了
所以最后的结果就是函数块1;
4.第四个例子
子作用域可以向父级作用域找变量,直到全局作用域为止,反之不行。如果子作用域有同样的变量,那么他就会使用自己的,不会去找爸爸要。
vara=5; functionfn(){ alert(a) } fn()
解析过程
1.寻找声明
vara;
functionfn(){}
2.执行
a=5;
fn()-------------------------------------->函数
1.找声明
2.执行
alert(a);他这里没有a所以去找爸爸要。a=5;所以弹窗是5
所以最后结果为弹窗5
下面看一下爸爸会不会去找儿子要东西
functionfn(){ varb=5; returnb; } fn(); alert(b);
1.寻找声明
functionfn(){}
2.执行
fn()---------------------------------------->函数
1.寻找声明
1.varb;
2.执行
returnb;
alert(b);//我们看一下返回值是多少bisnotdefined他说b没有被定义,说明父作用域不可以向自作用域去寻找变量。
5.第五个例子
当一个变量无中生有时,不管从哪个作用域出来的,统统归到window下,下面看两个例子
fn(); alert(a); vara=0; alert(a); functionfn(){ vara=1; }
这一个例子应该可以自己分析了最后的结果是undefined0
我们再来看一下下面这个你会很吃惊
fn() alert(a) vara=0; alert(a); functionfn(){ a=1; }
明明都一样,我吃惊什么返回值不是还是undefined和0吗
但是你有没有发现倒数第二行上面的声明了下面的没有声明,来解析一波
1.寻找变量
vara;
functionfn(){}
2.fn()---------------------------->函数
a=1;这个时候就说到了那一点,无中生有的变量,统统归到window下面
所以下面的执行过程
alert(a)这里的弹窗就是1了
a=0;
alert(a)弹出0
所以最后的结果是10
四、严格模式
严格模式下的代码执行时,非常严格
变量不允许无中生有
意义:规范代码开发的流畅,逻辑
"usestrict" a=1; alert(a);
当我们写后面两句代码的时候不会报错和出现问题,但是当我们加上第一句代码的时候,我们在这样写的时候就会报错了。所以我们还是按照规范的标准来,提高自己的能力
五、可能好多人做了上面的例子感觉不太过瘾,下面我再给出几个例子,可以自己去分析分析,我会在最后面给出答案。
1.第一个例子//10报错
vara=10; alert(a); a() functiona(){ alert(20); }
2.第二个例子undefined10
vara=0; functionfn(){ alert(a); vara=1; alert(a); } fn(); alert(a);
3.第三个例子当同样的声明同样的名字重复时,后面写的会覆盖前面写的//2113
a() vara=function(){ alert(1) } a(); functiona(){ alert(2); } a(); vara=function(){ alert(3); } a()
如果你看到我的文章可以收获一些知识,那么我会非常高兴的。
以上这篇浅谈js的解析顺序作用域严格模式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。