![ab1a943458cf7809abd9db36899cbbbc.png](https://i-blog.csdnimg.cn/blog_migrate/56eb7bc5ac7f03692ed262f573b86719.jpeg)
变量声明是所有的编程语言中最基础部分之一。然而,JavaScript 有一个怪异点,称之为变量提升(hositing),这个能够让一个看上去无关紧要的声明变成一个小bug。
一、变量提升
在当前上下文遇到一个变量,如果不是私有的,则向上级上下文中查找一直找到全局上下文为止, 如果全局上下文中也没有:
- 如果是获取变量的值,则直接报错
![2bc68f556222c9562787937ed7a77dbb.png](https://i-blog.csdnimg.cn/blog_migrate/12e4cd4043acd9de2177cebd497de9db.png)
2. 如果是设置变量的值,则相当于给window(GO)设置一个属性
![9ed34d94f3218cd4d84e53624c3df940.png](https://i-blog.csdnimg.cn/blog_migrate/905ac1abccc67d67bec1526e7208e327.png)
二、window全局对象和全局变量的关系
1、两者关系
两者之间存在映射关系(创建一个全局变量,也相当于给window设置一个属性)
2、两者优先级
在全局上下文代码执行的时候,遇到一个变量,首先看是否为全局变量(如果是操作全局变量,【var/function声明的会给window也设置一份】),不是全局变量则继续看是否为GO的属性(如果是相当于省略window),如果也不是则按照没有声明这个变量的错误处理
3、window.a为什么是undefined?
直接输出window.a是对象的成员访问,哪怕没有属性a,属性值是undefined,也不会报错
![8da5e2ee8678d7e9f2526fb4117d8ace.png](https://i-blog.csdnimg.cn/blog_migrate/928dc2315cf20b1c5bd8fe0ba917147e.png)
三、变量提升练习题
建议重新读一遍变量提升的概念,再做这三道题。
第一题
console.log(a);
var a=12;
function fn(){
console.log(a);
var a=13;
}
fn();
console.log(a);
第二题
console.log(a);
var a=12;
function fn(){
console.log(a);
a=13;
}
fn();
console.log(a);
第三题
console.log(a);
a=12;
function fn(){
console.log(a);
a=13;
}
fn();
console.log(a);
第四题
var foo='hello';
(function(foo){
console.log(foo);
var foo=foo||'world';
console.log(foo);
})(foo);
console.log(foo);
解析:
1、自执行函数执行:创建一个函数,并且立即把这个函数执行
2、把全局的foo的值'hello'传递给私有上下文中的形参
3、函数执行先形参赋值,再变量提升
4、foo已经存在,==不重复声明==
四、块级作用域中的变量提升
1、块级作用域
代码在执行的时候遇到大括号{}(排除函数、对象的),在看到{}中有let、const、function才会把其当做块级作用域。
if(true) {
var a = 1
}
// 不是块级作用域
if(true) {
let a = 1
}
// 是块级作用域
if(true) {
function a(){}
}
// 是块级作用域
2、函数在块级作用域中的变量提升
console.log(foo)
{
console.log(foo)
function foo() {}
foo = 1;
console.log(foo)
}
console.log(foo);
// undefined function 1 function
解析:
1、{}里面有function所以是块级作用域
2、函数在块级作用域中没有,所以会变量提升(所以第二个打印function)
3、==重点== 函数出现在块级作用域中,变量提升阶段,只声明不定义(所以第一个undefined)
4、==重点== 在代码执行的时候浏览器会把function foo()之前的操作,不仅认为是私有的,还会给全局映射一份,之后对foo的操作就认为是私有的了(所以后两个分别1、function)
五、块级作用域变量提升练习题
建议把上面的四句话多读几遍再做
第一题
console.log(foo);
{
console.log(foo);
function foo() {} // 此时之前对FOO的操作不会映射,等待最后一次再处理
foo = 1;
function foo() {}
console.log(foo);
}
console.log(foo);
第二题
console.log(foo);
{
function foo() {}
foo = 1;
function foo() {}
foo = 2;
}
console.log(foo);
练习题答案欢迎留言!
公众号地址,欢迎关注!
http://weixin.qq.com/r/GDizq3DEmS3mrTTI920K (二维码自动识别)