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