javascript的解析顺序
一、javascript的解析顺序
我们大家所理解的代码的执行顺序都是从上到下的,但是实际上确不是这样的。我们看一下下面的代码。
1 alert(a);2 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(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()
javascript的解析顺序的更多相关文章
- JavaScript解析顺序和变量作用域
JavaScript基础之变量作用域. 一. 1.全局变量:全局变量的意思就是,在代码的不论什么地方都能够訪问到.注意:未定义 直接赋值的变量拥有全局属性. 2.局部变量:局部变量的意思就是,变量的作 ...
- js的解析顺序 作用域 严格模式
一.javascript的解析顺序 我们大家所理解的代码的执行顺序都是从上到下的,但是实际上确不是这样的.我们看一下下面的代码. 1 alert(a); 2 var a = 1; 如果执行顺序是从上到 ...
- javascript的执行顺序(转载)
之前从JavaScript引擎的解析机制来探索JavaScript的工作原理,下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序.如果说,JavaScript引擎的工作机制比较深奥 ...
- 请教前辈:关于JS的一个奇怪的错误,不知是解析顺序造成的,还是什么原因。。
各位前辈好,如题,不知道是HTML解析顺序造成的,还是JS预编译的结果(见注释). 烦请各位前辈进行指导. <!DOCTYPE html> <html> <head> ...
- javascript的解析过程
引言: javascript是一种解释型的脚本语言,它不同于java或者c#这种编译语言,不需要编译成游览器可识别的语言,而是由游览器动态解析和执行的.(本身就是游览器可以直接识别,javascrip ...
- 步步深入:MySQL架构总览->查询执行流程->SQL解析顺序
前言: 一直是想知道一条SQL语句是怎么被执行的,它执行的顺序是怎样的,然后查看总结各方资料,就有了下面这一篇博文了. 本文将从MySQL总体架构--->查询执行流程--->语句执行顺序来 ...
- Python的方法解析顺序(MRO)[转]
本文转载自: http://hanjianwei.com/2013/07/25/python-mro/ 对于支持继承的编程语言来说,其方法(属性)可能定义在当前类,也可能来自于基类,所以在方法调用时就 ...
- sqlalchemy mark-deleted 和 python 多继承下的方法解析顺序 MRO
sqlalchemy mark-deleted 和 python 多继承下的方法解析顺序 MRO 今天在弄一个 sqlalchemy 的数据库基类的时候,遇到了跟多继承相关的一个小问题,因此顺便看了一 ...
- SELECT的解析顺序及慢查询优化
标准的 SQL 的解析顺序为:(1)FROM 子句, 组装来自不同数据源的数据(2)WHERE 子句, 基于指定的条件对记录进行筛选(3)GROUP BY 子句, 将数据划分为多个分组(4)使用聚合函 ...
随机推荐
- 海思NB-IOT的SDK里面写KV键值对值掉电保存参数
1. 写函数,ICCID_CTRL_KEY 这个是键,有些是海思已经使用的,所以自己定义的时候要错开,函数的第二个参数是数据指针,第三个参数是数据长度 #define ICCID_CTRL_KEY ...
- EmitMapper自动映射工具
在实体与DTO之间,我们一般都需要进行映射.如果手动的来进行转换,实在是太麻烦.所以就产生了很多映射工具,比如AutoMapper,EmitMapper.而经过一些对比,EmitMa ...
- Ajax文件上传三式
文件上传(三式) 1.urls.py文件 url(r'^upload.html$', views.upload), 2.views.py文件 import os def upload(request) ...
- css控制字体线使用:text-decoration
css控制字体下划线使用text-decoration : text-decoration:none 无装饰,通常对html下划线标签去掉下划线样式 text-decoration:underline ...
- centos下JDK安装及环境变量配置
由于centos安装自带openjdk,需要将其卸载后安装自己的jdk 卸载centos自带jdk 1.查找java :rpm -qa | grep java 2.卸载时提示权限不够,进入root目录 ...
- spring cloud 入门系列七:基于Git存储的分布式配置中心--Spring Cloud Config
我们前面接触到的spring cloud组件都是基于Netflix的组件进行实现的,这次我们来看下spring cloud 团队自己创建的一个全新项目:Spring Cloud Config.它用来为 ...
- 《More Effective C++》读书笔记(零)Basic 基础条款
这是篇读书笔记,只记录自己的理解和总结,一般情况不对其举例子具体说明,因为那正是书本身做的事情,我的笔记作为梳理和复习之用,划重点.我推荐学C++的人都好好读一遍Effective C++ 系列,真是 ...
- 使用HackRF和外部时钟实现GPS欺骗实验
本文内容.开发板及配件仅限用于学校或科研院所开展科研实验! 淘宝店铺名称:开源SDR实验室 HackRF链接:https://item.taobao.com/item.htm?spm=a1z10.1- ...
- 十大经典排序算法总结 (Python)
作业部落:https://www.zybuluo.com/listenviolet/note/1399285 以上链接是自己在作业部落编辑的排序算法总结- Github: https://github ...
- Alpha发布用户使用报告【欢迎来怼】
目录 用户统计表 部分用户评论截图 用户统计图 总结 一.用户统计表 目前,博客园安卓版的用户已达到11位.为了采集到更加客观公正的用户评价,并没有将团队内部人员的评价统计进来.同时,为了更好地保护用 ...