js解析顺序了解一下??
我们在学习一种新事物的时候,总是知其然,而不知其所然。有些人会探究到底,有一些人会得过且过。
好了,开场白结束,直接进入正题。
js不像C语言那样只要编译一次之后成.exe文件之后就不用在编译可以直接使用了,js是一种解释型语言,就像你出国旅游,有一个人为你翻译别人的
话一样,别人说一句,你的翻译就翻译一句。js同理 是边解析边执行。
js的解析分为两个阶段 1.预解析阶段 2.执行阶段
1.预解析阶段
其实js执行代码的时候都i是在执行一个作用域,而js一共就只有两个作用域,全局作用域和函数作用域
在我们打开程序的一瞬间,全局作用域里面的代码就执行了,这个时候是和函数作用域鸡毛关系都没有
那么与解析阶段都干啥了?
这个阶段主要做的事 就是变量收集 也可以说声明提前,用代码表达更好的解释
test();//帅哥天下9
var a=4;
var b=function(){
console.log("帅气喆");
}
function test(){ console.log("帅哥天下9");
}
为什么test方法能执行呢,先执行后定义,还有这种操作??
其实这就得归公于与解析阶段了
他会把变量声明提前这个变量包括普通变量和函数变量
var a=function(){
//code 这个是函数表达式 并不是函数声明!!!
}
所以上面的代码应该是这样子滴
var a;
var b;
function test(){
console.log("帅哥天下9");
}
test();
a=4;
b=function(){ console.log("帅气喆");
};
所以这就解释了为什么可以先调用后定义了吧;
再举个例子
function test1(){
console.log(a); //undefined
var a=4;
}
test1();
输出结果是 undefined 而没有报错 这就说明 在使用前已经声明了 但是在调用之前没有赋值而已喽
其实是这样的
function test1(){
var a;
console.log(a);
a=4;
}
test1();
现在理解了吗?
执行阶段
执行阶段这一块,就是说 变量赋值啦 函数执行啦都在这个阶段,从上而下很好理解
就是顺序就是 :

用一段代码来解释吧
var a="boy";
var b="girl";
function test(){
var c="手牵手"
console.log(c);
}
test();
console.log("结束了"); /*
全局预解析阶段
变量收集
var a;
var b;
function test(){
var c="手牵手"
console.log(c);
} a="boy";
b="girl";
test();从这到函数预解析阶段
var c;
函数执行阶段
c="手牵手"
console.log(c);
再回到全局执行阶段
执行console.log("结束了");
结束!!
*/
看到这里的朋友都能差不多懂了吧!
js解析顺序了解一下??的更多相关文章
- 请教前辈:关于JS的一个奇怪的错误,不知是解析顺序造成的,还是什么原因。。
各位前辈好,如题,不知道是HTML解析顺序造成的,还是JS预编译的结果(见注释). 烦请各位前辈进行指导. <!DOCTYPE html> <html> <head> ...
- js的解析顺序 作用域 严格模式
一.javascript的解析顺序 我们大家所理解的代码的执行顺序都是从上到下的,但是实际上确不是这样的.我们看一下下面的代码. 1 alert(a); 2 var a = 1; 如果执行顺序是从上到 ...
- js 解析XML 在Edge浏览器下面 无法准确读到节点属性值
js 解析XML 在Edge浏览器下面 无法准确读到节点属性值 Dom.documentElement.childNodes[j].attributes[2] 这个是大众写法 在win10的edge ...
- JS解析+预解析相关总结
[js预解析机制]先来说说js的解析机制吧,浏览器在解析js代码时是从上到下解析的.解析顺序如:(1)预解析 找var和function (2)逐行代码解析 表达式 函数调用 ...
- 步步深入:MySQL架构总览->查询执行流程->SQL解析顺序
前言: 一直是想知道一条SQL语句是怎么被执行的,它执行的顺序是怎样的,然后查看总结各方资料,就有了下面这一篇博文了. 本文将从MySQL总体架构--->查询执行流程--->语句执行顺序来 ...
- csv表格处理(下)--纯JS解析导入csv
多日前的上篇介绍了csv表格,以及JS结合后端PHP解析表格填充表单的方法.其中csv转换成二维数组的时候逻辑比较复杂多坑,幸好PHP有丰富的库函数来处理,而现在用JS解析的话就没有那么幸运了,一切都 ...
- Python的方法解析顺序(MRO)[转]
本文转载自: http://hanjianwei.com/2013/07/25/python-mro/ 对于支持继承的编程语言来说,其方法(属性)可能定义在当前类,也可能来自于基类,所以在方法调用时就 ...
- sqlalchemy mark-deleted 和 python 多继承下的方法解析顺序 MRO
sqlalchemy mark-deleted 和 python 多继承下的方法解析顺序 MRO 今天在弄一个 sqlalchemy 的数据库基类的时候,遇到了跟多继承相关的一个小问题,因此顺便看了一 ...
- CSS控制XML与通过js解析xml然后通过html显示xml中的数据
使用CSS控制XML的显示 book.css bookname{ display:block;color:Red} author{ display:block;font-style:italic} p ...
随机推荐
- java基础63 JavaScript中的Number、Math、String、Date对象(网页知识)
本文知识点(目录): 1.Number对象 2.Math对象 3.String对象 4.Date对象 (日历例子) 1.Number对象 1.1.Number对象的创建方式 方式1: ...
- ThinkPHP递归删除栏目
ThinkPHP递归删除栏目 https://www.cnblogs.com/zlnevsto/p/7051875.html Thinkphp3.2 无限级分类删除,单个删除,批量删除 https:/ ...
- python_selenium自动化测试框架
设计思路 本文整理归纳以往的工作中用到的东西,现汇总成基础测试框架提供分享. 框架采用python3 + selenium3 + PO + yaml + ddt + unittest等技术编写成基础测 ...
- 对于ElasticSearch与Hadoop是如何互相调用的?
1.在HDFS中,数据是以文件形式保存的,比如JSON: https://blog.csdn.net/napoay/article/details/68945483 2.python读写HDFS,一般 ...
- 一步一步学习IdentityServer3 (15) 授权模式那些事
总结一句话,其实很简单 在什么Clients 拿的认证权限Scope 就去 去开什么Scope限制的服务接口门 在写Clients的时候,会有Scope,看下面的代码 new Client { Cli ...
- 易普优高级计划排程Light版助力中小企业实现精益化计划
易普优高级计划排程Light版助力中小企业实现精益化计划 一.业务与排产需求 根据统计,目前中小企业已经占到我国工业企业总数的95%以上,对中国GDP贡献超过60%,税收超过了50%,提供了70%的进 ...
- docker 安装错误Transaction Check Error
安装docker提示:Transaction Check Error: file /usr/bin/docker from install of docker-io-1.7.1-2.el6.x86_6 ...
- 基于Laravel开发博客应用系列 —— 十分钟搭建博客系统
1.创建文章数据表及其模型(0:00~2:30) 我们已经在上一节中为博客项目完成了大部分准备工作,现在首先要做的就是为这个项目创建一个新的文章表 posts及该表对应的模型类 Post,使用如下Ar ...
- Flutter的原理及美团的实践
导读 Flutter是Google开发的一套全新的跨平台.开源UI框架,支持iOS.Android系统开发,并且是未来新操作系统Fuchsia的默认开发套件.自从2017年5月发布第一个版本以来,目前 ...
- JDK源码分析(三)——HashMap 上(基于JDK7)
目录 HashMap概述 内部字段及构造方法 存储元素 扩容 取出元素 删除元素 判断 总结 HashMap概述 前面我们分析了基于数组实现的ArrayList和基于双向链表实现的LinkedLi ...