02.变量提升

John Doe 2021-04-20 15:56:00
Categories: Tags:

一、概念

作用域:默认情况下的代码都处于全局作用域,可以通过创建函数来创建新的作用域,ES6中存在块级作用域。

条件:带varfunction关键字的变量,在当前作用域,代码执行前,进行预处理,带var的,只声明不定义,带function的声明且定义。

二、例子

1.平平无奇的变量提升

alert(a);
var a = 10;
alert(a);

alert(f);
function f(){}
alert(f);

2.条件判断下的变量提升

1.无论条件是否成立,都会进行变量提升。

2.ES5环境下(仅支持ES5的旧版浏览器中),声明且定义。

3.对于即支持ES5又支持ES6的新版浏览器,此时的预处理只声明不定义。

2-1: 条件不成立(即支持ES6又支持ES5的浏览器)

alert(a);
alert(f1);
alert("a" in window);
alert("f1" in window);
if( false ){
    var a = 10;
    function f1(){}
}

2-2: 条件不成立(仅支持ES5浏览器环境下执行结果)

alert(a);
alert(f1);
alert("a" in window);
alert("f1" in window);
if( false ){
    var a = 10;
    function f1(){}
}

2-3: 条件成立(即支持ES6又支持ES5的浏览器)

alert(b);            
alert(f2);          
alert("b" in window);    
alert("f2" in window);    
if( true ){
    //为支持ES6中的块级作用域,函数在提升时,声明且定义。
    alert(b);
    alert(f2);
    var b = 20;
    function f2(){}
}

3.只对等式左边的变量进行提升

alert("f1" in window); 
alert("f2" in window);
var f1 = function f2(){
    alert('hhh');
};
f1();
f2();

4.变量提升中的重名机制

重名机制:当名字重复时,不会重新声明,只会重新定义。

4-1: 平平无奇的重名机制

alert(f);            //function 
var f = 12;
alert(f);            //12
function f(){}

4-2: 一脸懵逼的重名机制

f();
function f(){alert('1')}
f();
function f(){alert('2')}
f();
var f = 10;
f();
function f(){alert('3')}
f();

4-3: 变量与形参重名的处理

function f(a){
    alert(a);
    var a = 10;
    alert(a);
}
f(100);

五、答案

1

undefined
10
function
function

2-1

undefined
undefined
true
true

2-2

undefined
function
true
true

2-3

undefined
undefined
true
true
undefined
function

3

true
false
hhh
Error

4-1

function
12

4-2

3
3
3
TypeError

4-3

100
10