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