JS-变量提升/函数提升

首先了解执行上下文（EC）
【你不知道的JavaScript】（三）执行上下文及其生命周期
JS中的执行上下文(Execution Context)和栈(stack)

• JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把函数内部所有申明的变量“提升”到函数体的头部。

变量类型

JS变量类型是松散型：并不是说JS变量就没有变量类型，而是其变量类型是在运行时才进行确定。

var str;
str = 2015;

我们定义了一个变量str，但是并未赋值，这时候JS并不知道str变量的类型，等到脚本运行到str = 2015，我们给str变量赋了一个值：2015。这时候JS才知道str类型是Number。

变量提升

• 变量提升指的是函数内部变量声明的提升。

var a = 10;
function test() {
    a = 100;
    console.log(a);
    console.log(this.a);
    var a;
    console.log(a);
}
test();//100  10  100

=>

var a = 10;//全局
function test() {
    var a;//变量提升
    a = 100;//局部
    console.log(a);//局部
    console.log(this.a);//this指向全局window
    console.log(a);//局部
}
test();//100  10  100

---

var a = 100;
function test() {
    console.log(a);
    var a = 10;
    console.log(a);
}
test();//undefined  10

=>

var a = 100;
function test() {
    var a;//变量提升
    console.log(a);
    a = 10;
    console.log(a);
}
test();//undefined  10

---

var a = 100;
function test() {
    console.log(a);
    a = 10;
    console.log(a);
}
test();
console.log(a);
//100  10  10

=>

var a = 100;
function test() {
    console.log(a);//全局
    a = 10;//全局
    console.log(a);//全局
}
test();
console.log(a);
//100  10  10

函数提升

console.log(f1); // function f1() {}   
console.log(f2); // undefined  
function f1() { }//函数声明
var f2 = function () { }//函数表达式

=>

function f1(){ }//整个函数会像变量声明一样，被提升到代码头部
var f2//变量申明提前
console.log(f1); // function f1() {}   
console.log(f2); // undefined(调用f2的时候，f2只是被声明了，还没有被赋值，等于undefined，所以会报错。)  
f2 = function () { }

(function (num) {
        var testStr = "test" + num;
        console.log(num);
    })(100);
console.log(testStr);// testStr is not defined

(function (num) {
        testStr = "test" + num;//不加var，全局变量
        console.log(num);
    })(100);
console.log(testStr);// test100

• 如果同时采用function命令和赋值语句声明同一个函数，最后总是采用赋值语句的定义(函数声明提升的级别是比函数表达式要高)。如下：

var f = function () {
  console.log('1');
}

function f() {
  console.log('2');
}

f() // 1

=>

function f() {
  console.log('2');
}
var f;
f = function () {
  console.log('1');
}
f() // 1

变量名函数名冲突解决（同名的变量声明比函数声明提升更高）

image image

function a(){  
    console.log(10);  
  }  
var a;
console.log(a);
输出：
//ƒ a(){  
//  console.log(10);  
//}

=>

var a;
function a(){  
    console.log(10);  
  }  
console.log(a);

我们可以得出：同名的变量声明比函数声明更优先。

function a(){  
    console.log(10);  
  }  
var a = 6;
console.log(a);
// 6

=>

var a;
function a(){  
    console.log(10);  
  }  
a = 6;
console.log(a);