js - 作用域-变量作用域-作用域链-预解析
1. 作用域
// 全局作用域
// 局部作用域(函数作用域)
通常来说,一段程序代码中所用到的名字不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。
1.1 js 作用域?
- 就是代码名字(变量)作用的范围
1.2 作用域的目的?
- 是为了提高程序的可靠性,更重要的是减少命名冲突
1.3 全局作用域
作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。
-
全局作用域在页面打开时创建,页面关闭时销毁。
-
在全局作用域中有一个全局对象 window(代表的是一个浏览器的窗口,由浏览器创建),可以直接使用。
// 所有创建的变量或函数都会作为 window 对象的属性或方法保存。
var a = 10
function fn() {
console.log('我是函数')
}
console.log(window.a) // 10
console.log(window.fn()) // 我是函数
1.4 局部作用域
作用于函数内的代码环境,就是局部作用域。 因为跟函数有关系,所以也称为函数作用域。
- 调用函数时创建函数作用域,函数执行完毕之后,函数作用域销毁;
1.5 js 没有块级作用域(在ES6之前)
- 块作用域由 {} 包括
if(true){
var num = 123;
console.log(123); //123
}
console.log(123); //123
2. 变量的作用域
// 全局变量
// 局部变量
2.1 全局变量
在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量)。
-
全局变量在代码的任何位置都可以使用;全局作用域中无法访问到局部作用域中的变量。
-
全局变量创建方式
- 在全局作用域下 var 声明的变量是 全局变量
- 如果在函数内部,没有使用 var 关键字声明 , 直接赋值的变量也属于 全局变量(不建议使用)
2.2 局部变量
在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量)
-
局部变量只能在该函数内部使用;局部作用域可以访问到全局作用域的变量
-
局部变量创建方式
- 在函数内部 var 声明的变量是 局部变量
- 函数的形参实际上就是 局部变量
2.3 全局变量和局部变量的区别
-
全局变量:在任何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存。
-
局部变量:只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束后,就会被销毁,因此更节省内存空间。
3. 作用域链
只要是代码,就有一个作用域,写在函数内部的就叫做局部作用域;
如果函数中还有函数,那么在这个作用域中又可以诞生一个作用域;
当在函数作用域中操作一个变量的时候,会先在自身作用域中查找,如果有就直接使用,如果没有就向上级作用域中寻找。如果全局作用域中也没有,那么就报错。
- 根据内部函数可以访问可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称为函数作用域链。
3.1 作用域链
- 内部函数访问外部函数的变量,采取的是链式查找的方法来决定取那个结构,这种结构称之为作用域链。
3.2 作用域链的原则
- 就近原则
4. 预解析
// 变量预解析
// 函数预解析
JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步:预解析和代码执行。
-
预解析:在当前作用域下, JS 代码执行之前,浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。
-
代码执行: 从上到下执行JS语句。
预解析会把变量和函数的声明在代码执行之前执行完成
4.1 变量预解析
- 变量提升(变量预解析): 变量的声明会被提升到当前作用域的最上面,变量的赋值不会提升。
console.log(num); // 结果是多少?
var num = 10; // ?
结果:undefined
注意:**变量提升只提升声明,不提升赋值**
4.2 函数预解析
- 函数提升: 函数的声明会被提升到当前作用域的最上面,但是不会调用函数。
fn();
function fn() {
console.log('打印');
}
结果:控制台打印字符串 --- ”打印“
注意:函数声明代表函数整体,所以函数提升后,函数名代表整个函数,但是函数并没有被调用!
4.3 函数表达式声明函数问题
- 函数表达式创建函数,会执行变量提升,此时接收函数的变量名无法正确的调用
fn();
var fn = function() {
console.log('想不到吧');
}
结果:报错提示 "fn is not a function"
解释:该段代码执行之前,会做变量声明提升,fn在提升之后的值是undefined;而fn调用是在fn被赋值为函数体之前,此时fn的值是undefined,所以无法正确调用