1. 变量提升概念
- 在当前上下文中(全局/私有/块级),JS代码自上而下执行之前,浏览器会提前处理一些事情(可以理解为词法解析的一个环节,词法解析一定发生在代码执行之前)
2. 词法解析:
- 词法解析会把当前上下文中所有带var/function关键字的进行提前声明或者定义
- 带var的只提前声明
- 带function的提前声明+定义
创建变量:var a = 10;
1. 声明declare:var a
2. 定义defined:a = 10
复制代码
3. var的变量提升
/*
代码执行之前,全局上下文中的变量提升
var a; 默认值是undefined
*/
console.log(a); // a变量提升,未定义,undefined
var a = 12; // 定义赋值 a = 12
a = 13; // 全局变量 a = 13
console.log(a); // 13
复制代码
4. function声明函数和函数表达式声明函数
/*
全局上下文中的变量提升
func = 函数,函数在这个阶段赋值就做了
*/
func();
function func() {
var a = 12;
console.log('OK')
}
复制代码
- 真实项目中期望用函数表达式方式创建函数,因为这样在变量提升阶段只会声明func,不会赋值,顺序性,不要再声明前执行
func() // func is not a function
var func = function() {
}
复制代码
- 函数表达式声明非匿名函数
var func = function AAA() {
// 把原本作为值的函数表达式匿名函数具名化,但是外部不能访问,也就是不会在当前上下文创建这个名字
// 函数执行,在形成的私有上下文中,可以访问
console.log('OK')
//AAA() // 递归死循环
console.log(AAA, typeof AAA) // "function"
}
AAA() // Uncaught ReferenceError: AAA is not defined
func()
复制代码
- 匿名函数具名化eg
setTimeout(function func() {
func()
}, 1000)
复制代码
5. 例子
/*
EC(G)全局变量提升
*/
console.log(window.a); // undefined
console.log(a); // a is not defined
a = 13;
console.log(a) // 13
console.log(window.a) // 13
// let 定义 不会同时在window创建, var和直接创建都会在windoow中
复制代码
/*
EC(G)全局变量提升,let和const 不变量提升
*/
console.log('OK') // OK
console.log(a); // a is not defined
let a = 12;
a = 13;
console.log(a);
复制代码
基于
var/function
在全局上下文
中声明的变量,全局变量,会映射到GO(全局对象),也就是window
上一份,作为属性
// 无论条件是否成立,都要进行变量提升
if(!("a" in window)) { // !true -> false
var a = 1;
}
console.log(a); // undefined
复制代码
/*
变量提升
扫描代码,fn=>1 不会重新声明,但是要重新赋值
fn=>2
var fn 上面做过了,忽略
fn=>4
fn=>5
window.fn 此时也是5
*/
fn(); // 5 变量提升完结果是5
function fn() {console.log(1)} // 不再处理,变量提升阶段已经做过
fn(); // 5
function fn() {console.log(2)}
fn(); // 5
var fn = function() {console.log(3)} // 变量提升阶段,没做个这个赋值,现在赋值
fn(); // 3
function fn() {console.log(4)} // 不再处理
fn(); // 3
function fn() {console.log(5)}
复制代码
var foo = 1;
function bar() {
if(!foo) {
var foo = 10;
}
console.log(foo)
}
bar(); // 10
console.log(foo) // 1
复制代码