预解析:就是在解析代码之前
 

1. 预解析做什么事?

  • 把变量的声明提前了----提前到当前所在的作用域的最上面
  • 函数的声明也会被提前---提前到当前所在的作用域的最上面
 
举例:
    function f1() {
console.log(num);
var num = 10;
}
f1(); //此时运行结果是undefined

此时运行结果是undefined,因为预解析,变量声明被提前了,实际按下面的方式解析的:

    function f1() {
var num
console.log(num);
num = 10;
}
f1(); //此时运行结果是undefined

举例2:

    //函数调用的时候,把会函数的声明提升到作用域的上面
f1();//调用
var num = 20;//这个变量的声明会提升到变量使用之前
function f1() {
console.log(num);
//var num=10;
}

2. 预解析分段和局部作用域的问题

  • 预解析中,变量的提升,只会在当前的作用域中提升,提前到当前的作用域的最上面
  • 函数中的变量只会提前到函数的作用域中的最前面,不会出去
    function f1() {

      console.log(num);//undefined
var num = 10;
}
f1();
console.log(num);//报错
  • 预解析会分段(多对的script标签中函数重名,预解析的时候不会冲突)
  <script>

    function f1() {
console.log("哈哈");
} </script>
<script>
f1();
function f1() {
console.log("嘎嘎");
}
</script>

3. 快速识别预解析的结果

练习1:

    var a = 25;
function abc() {
alert(a);//undefined
var a = 10;
}
abc();
console.log(a);//

练习2:

    console.log(a);
function a() {
console.log('aaaaa');
}
var a = 1;
console.log(a);//

预解析下的代码解读:

(变量声明在最上面,下面是函数声明)

    var a;
function a() {
console.log('aaaaa');
}
console.log(a); //此时输出的是函数a的代码
a = 1;
console.log(a);//

代码结果:

练习3:

    var a = 18;
f1();
function f1() {
var b = 9;
console.log(a);//undefined
console.log(b);//
var a = '123';
}

预解析下的代码解读:

   var a;
a = 18;
function f1() {
var b;
var a;
b = 9;
console.log(a);//undefined
console.log(b);//
a = '123';
}
f1();

代码结果:

练习4:

    f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
var a = b = c = 9;
console.log(a);
console.log(b);
console.log(c);
}

预解析下的代码解读:

recap:

隐式全局变量: 声明的变量没有var,  就叫隐式全局变量

局部变量: 在函数内部定义的变量,是局部变量, 外面不能使用

   function f1() {
var a;//局部变量
a=9;
//隐式全局变量
b=9;
c=9;
console.log(a);//
console.log(b);//
console.log(c);//
}
f1();
console.log(c);//
console.log(b);//
console.log(a);//报错

代码结果:

练习4:

    f1();//-----报错
var f1 = function () {
console.log(a);
var a = 10;
};

预解析下的代码解读:

    var f1;
f1();//-----报错,不能调用,因为下的f1是赋值的表达式
f1 = function () {
console.log(a); //f1报错,这里就没有结果啦
var a = 10;
};

JS基础语法---预解析的更多相关文章

  1. js作用域其二:预解析

    文章目錄 解析机制 JavaScript是一门解释型的语言 , 想要运行js代码需要两个阶段 编译阶段: 编译阶段就是我们常说的JavaScript预解析(预处理)阶段,在这个阶段JavaScript ...

  2. JavaScript进阶 - 第2章 你要懂的规则(JS基础语法)

    第2章 你要懂的规则(JS基础语法) 2-1什么是变量 什么是变量? 从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品 ...

  3. 【JS基础语法】---学习roadmap---6 parts

    JS基础语法---roadmap Part 1 - 2: Part 3 - 4:   Part 5 - 6

  4. JS基础语法(二)

    目录 JavaScript基础语法(二) 八. 函数 1. 函数的概念 2. 函数的使用 声明函数 调用函数 3. 函数的封装 4. 函数的参数 函数的参数匹配问题 5. 函数返回值 6. argum ...

  5. 9.12/ css3拓展、js基础语法、程序基本知识、数据类型、运算符表达方式、语句知识点

    css3拓展: <display:none>  将某个元素隐藏       <visibility:hidden>  也是将某个元素隐藏 <display:block&g ...

  6. JS作用域概念-预解析规则

    // 作用域: // 域:空间.范围.区域…… // 作用:读.写 script 全局变量.全局函数 自上而下 函数 由里到外 {} 浏览器: “JS解析器” 1)“找一些东西” :var funct ...

  7. Vue.js基础语法(一)

    vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 前言: 前端解析数 ...

  8. JS中的预解析

    js预解析对于很多学习web前端开发的新手们很困扰,总是很难搞懂到底是个什么东西,今天零度就为大家简单的分析一下,争取让大家都明白! 首先,看一下下面的代码: alert(a); var a = 1; ...

  9. JavaScript01 js基础语法,数据类型

    JavaScript的概述: 1.组成 三部分组成 ecmaScript 基础语法 (es5) dom document object model 文档对象模型 (操作html文档内容) bom bo ...

随机推荐

  1. 阿里云ECS部署Redis主备哨兵集群遇到的问题

    一.部署 详细部署步骤:https://blog.csdn.net/lihongtai/article/details/82826809 Redis5.0版本需要注意的参数配置:https://www ...

  2. linux 用户,组

    权限: 所谓的权限是,由用户启动的进程,或者由操作系统启动的进程,可以访问哪些文件,不可以访问哪些文件. 进程太多了,不可能为每个进程定义权限对吧,所以进程的权限来自于启动进程的用户. 用户有哪些权限 ...

  3. java之枚举和注解

    JDK1.5新增的enum关键字用于定义枚举类. 枚举类和普通类的区别: 使用enum定义的枚举类默认继承了java.lang.Enum类: 枚举类的构造器只能使用private修饰符: 枚举类的所有 ...

  4. 洛谷P5364 [SNOI2017]礼物 题解

    传送门 /* 热情好客的小猴子请森林中的朋友们吃饭,他的朋友被编号为 1∼N,每个到来的朋友都会带给他一些礼物:大香蕉.其中,第一个朋友会带给他 11 个大香蕉,之后,每一个朋友到来以后,都会带给他之 ...

  5. 测试人员必备之 mysql 常用命令学习指南

    1.数据库连接 1.通过命令行连接数据库 [root@localhost ~]# mysql -u root -p Enter password: 输入以上命令,回车后输入密码,回车,出现 mysql ...

  6. Lucene&Solr框架之第三篇

    1.SolrCore的配置 a)schma.xml文件 b)配置中文分析器 2.配置业务域和批量索引导入 a)配置业务域 b)批量索引导入 c)Solrj复杂查询(用Query页面复杂查询.用程序实现 ...

  7. leaflet实现风场图(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  8. Android框架式编程之ViewModel

    一.ViewModel介绍 ViewModel类是被设计用来以可感知生命周期的方式存储和管理 UI 相关数据.ViewModel中数据会一直存活即使 Activity Configuration发生变 ...

  9. 【Objective-C】探索Category底层的实质

    无论一个类设计的多么完美,在未来的需求演进中,都有可能会碰到一些无法预测的情况.那怎么扩展已有的类呢?一般而言,继承和组合是不错的选择.但是在Objective-C 2.0中,又提供了category ...

  10. RAC环境下修改字符集

    跟单实例多少有点区别ORACLE 11g RAC 两节点第一步 查看字符集PRIMARY-SYS@mydb2>select userenv('language') from dual; USER ...