浅谈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 相关文章推荐
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
cookie的secure属性详解
Apr 08 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
javascript实现前端成语点击验证优化
Jun 24 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 Javascript
react中props 的使用及进行限制的方法
Apr 28 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
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
php获取错误信息的方法
2015/07/17 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
新手入门常用代码集锦
2007/01/11 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
Python 3.8 新功能全解
2019/07/25 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
中国梦的演讲稿
2014/01/08 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
外贸专业求职信
2014/03/09 职场文书
施工员岗位职责
2014/03/16 职场文书
小学生综合素质评语
2014/04/23 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
python操作xlsx格式文件并读取
2021/06/02 Python
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS