浅谈js的解析顺序 作用域 严格模式


Posted in Javascript onOctober 23, 2017

一、javascript的解析顺序

我们大家所理解的代码的执行顺序都是从上到下的,但是实际上确不是这样的。我们看一下下面的代码。

alert(a);
var a = 1;

如果执行顺序是从上到下的,在上面弹出一个a,浏览器会认为从上到下执行的,那么当它alert(a)的时候,他就会发现没有这个东西,那么他就会报错,但是实际上他弹出来的结果是undefined。返回值是undefined说明a没有被定义也就是没有赋值。下面我来讲解一下javascript的解析顺序。

1.ES5中有声明意义的关键字

var 会存在变量提升

function也有声明变量的的作用。

2.解析顺序

1.找声明 var、function 声明:只是声明变量,而不包括赋值。

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(){}

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(){
  var a = 1;
 }

这一个例子应该可以自己分析了 最后的结果是 undefined 0

我们再来看一下下面这个你会很吃惊

fn()
 alert(a)
 var a = 0;
 alert(a);
 function fn(){
   a = 1;
 }

明明都一样,我吃惊什么 返回值不是还是 undefined 和 0 吗

但是你有没有发现倒数第二行 上面的声明了 下面的没有声明,来解析一波

1.寻找变量

var a;

function fn(){}

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()
function a(){
 alert(20);
}

2.第二个例子 undefined 1 0

var a = 0;
 function fn(){
  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()

如果你看到我的文章可以收获一些知识,那么我会非常高兴的。

以上这篇浅谈js的解析顺序 作用域 严格模式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 事件对象属性小结
Apr 27 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
JS模拟自动点击的简单实例
Aug 08 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
ES6的新特性概览
Mar 10 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
Vue.js的动态组件模板的实现
Nov 26 Javascript
jquery实现抽奖功能
Oct 22 jQuery
JS使用setInterval计时器实现挑战10秒
Nov 08 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 #Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 #Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 #Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 #Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 #Javascript
JS返回顶部实例代码
Aug 09 #Javascript
VUE2实现事件驱动弹窗示例
Oct 21 #Javascript
You might like
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
PHP中的日期处理方法集锦
2007/01/02 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
golang与PHP输出excel示例
2016/07/22 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
python实现排序算法解析
2018/09/08 Python
python事件驱动event实现详解
2018/11/21 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
python 实现批量图片识别并翻译
2020/11/02 Python
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
销售经理工作职责
2014/02/03 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
人事任命通知
2015/04/20 职场文书
盲山观后感
2015/06/11 职场文书