JS-变量提升/函数提升

299 阅读2分钟
  • 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

变量名函数名冲突解决

1.

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);