JS基础语法---预解析
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基础语法---预解析的更多相关文章
- js作用域其二:预解析
文章目錄 解析机制 JavaScript是一门解释型的语言 , 想要运行js代码需要两个阶段 编译阶段: 编译阶段就是我们常说的JavaScript预解析(预处理)阶段,在这个阶段JavaScript ...
- JavaScript进阶 - 第2章 你要懂的规则(JS基础语法)
第2章 你要懂的规则(JS基础语法) 2-1什么是变量 什么是变量? 从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品 ...
- 【JS基础语法】---学习roadmap---6 parts
JS基础语法---roadmap Part 1 - 2: Part 3 - 4: Part 5 - 6
- JS基础语法(二)
目录 JavaScript基础语法(二) 八. 函数 1. 函数的概念 2. 函数的使用 声明函数 调用函数 3. 函数的封装 4. 函数的参数 函数的参数匹配问题 5. 函数返回值 6. argum ...
- 9.12/ css3拓展、js基础语法、程序基本知识、数据类型、运算符表达方式、语句知识点
css3拓展: <display:none> 将某个元素隐藏 <visibility:hidden> 也是将某个元素隐藏 <display:block&g ...
- JS作用域概念-预解析规则
// 作用域: // 域:空间.范围.区域…… // 作用:读.写 script 全局变量.全局函数 自上而下 函数 由里到外 {} 浏览器: “JS解析器” 1)“找一些东西” :var funct ...
- Vue.js基础语法(一)
vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 前言: 前端解析数 ...
- JS中的预解析
js预解析对于很多学习web前端开发的新手们很困扰,总是很难搞懂到底是个什么东西,今天零度就为大家简单的分析一下,争取让大家都明白! 首先,看一下下面的代码: alert(a); var a = 1; ...
- JavaScript01 js基础语法,数据类型
JavaScript的概述: 1.组成 三部分组成 ecmaScript 基础语法 (es5) dom document object model 文档对象模型 (操作html文档内容) bom bo ...
随机推荐
- C# 中的栈和堆
程序运行时,它的数据必须存储在内存中.一个数据项需要多大的内存.存储在内存中的什么位置.以及如何存储都依赖于该数据项的类型. 运行中的程序使用两个内存区域来存储数据:栈和堆. 栈 栈是一个内存数组,是 ...
- JavaScrip 之 DOM
DOM 树 HTML 文档的骨干是标签. 根据文档对象模型(DOM),每个HTML标签都是一个对象,同样标签内的文本也是一个对象.因此这些对象都可通过 JavaScript 操作 如果文档中有空格(就 ...
- 记录AJAX充电点点滴滴
首先要明白什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更 ...
- NPM 问题汇总
1. Error: setuid user id does not exist Error: setuid user id does not exist at /usr/local/lib/node_ ...
- 系统优化——建立linux回收站机制
前言: linux系统下的rm是不可挽回的,命令设计本身没有问题,问题在于我们通常非常的自信,执行的时候喜欢rm -rf,这样的话就非常危险了,在执行的时候如果执行命令不对,甚至是执行的目录不对,那么 ...
- 【linux命令】软连接和硬链接的区别(ln命令)
Linux 文件系统把硬盘分为三个部分:超级块.inode 列表.数据区 inode 指示:该文件的数据存放在数据区的哪些块内.因为这个“映射”关系不能变更,因此,inode 相当于代表着文件本身.( ...
- Spring 关于ResponseBody注解的作用
//responseBody一般是作用在方法上的,加上该注解表示该方法的返回结果直接写到Http response Body中,常用在ajax异步请求中, //在RequestMapping中 ret ...
- Mysql字符串截取_获取指定字符串中的数据
前言:本人遇到一个需求,需要在MySql的字段中截取一段字符串中的特定字符,类似于正则表达式的截取,苦于没有合适的方法,百度之后终于找到一个合适的方法:substring_index('www.sql ...
- [转]BEC Vantage
https://www.examenglish.com/BEC/BEC_Vantage.html https://www.cambridgeenglish.org/exams-and-tests/bu ...
- PHP计算二维数组指定元素的和
array_sum(array_column($arr, 'num')); //计算二维数组指定元素的和 $arr = [ [ 'id'=>1, 'num'=>3, ], [ 'id'=& ...