浅谈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 相关文章推荐
列表内容的选择
Jun 30 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
详解jquery和vue对比
Apr 16 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
基于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实现登陆验证码(类似条行码状)
2006/10/09 PHP
PHP 面向对象实现代码
2009/11/11 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
js 获取、清空input type="file"的值示例代码
2014/02/19 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
详解python 发送邮件实例代码
2016/12/22 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
python实现同一局域网下传输图片
2020/03/20 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
如何在pycharm中安装第三方包
2020/10/27 Python
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
优秀班集体获奖感言
2014/02/03 职场文书
好人好事事迹材料
2014/02/12 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
2015年小学开学寄语
2015/02/27 职场文书
教务处教学工作总结
2015/08/10 职场文书
生产实习心得体会范文
2016/01/22 职场文书
python之django路由和视图案例教程
2021/07/26 Python
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers