JavaScript中函数的变量提升问题

函数的大体分三种，一种是函数的声明，一种是函数表达式（又称为函数的字面量）

　　1.函数的声明 => function myFn(){};

　　2.函数的表达式 => var myFn = function() {};

　　3.函数对象方式 => var myFn = new Function('n1','n2','return n1 + n2 '); // tip: 参数必须加引号

以上：3和其他的两项用法差别较大，不作比较；主要介绍1与2的区别：

　　先看二个简单的例子：

var myFn = function () {

    console.log('mm');

};

myFn(); //mm

var myFn = function () {

    console.log('nn');

};

myFn(); //nn

在看下这个：

function myFn() {

    console.log('mm');

};

myFn(); //nn

function myFn() {

    console.log('nn');

};

myFn(); //nn

　　为什么会出现以上两种情况呢？我们知道JavaScript的代码是一行一行执行的，但是在代码执行之前，浏览器会有一个预解析的过程，会把声明的变量，函数的表达式提升，然后再一行一行的执行代码；但是为什么两个打印的结果不一样呢？因为第一个是变量的提升，函数本身并没有提升，而第二个函数表达式会整个提升，所以myFn（）写在哪，结果都是一样的；

　　我们这个时候可能回想，如果他们在一起的时候，哪个先执行？

　　第一种情况：

var myFn = function () {

    console.log('nn');

}

myFn();  // nn

function myFn() {

    console.log('mm');

}

myFn(); // nn

　　第二种情况：

function myFn() {

    console.log('mm');

}

myFn(); // mm

var myFn = function () {

    console.log('nn');

}

myFn(); // nn

　　这里注意的一点是，变量的提升高于函数表达式；在第一种情况下，var = myFn 会提升最高的优先级，其次是函数的声明。

　　在第一种情况里，函数的声明会提升，然后会被函数表达式覆盖，所以会打印两次一样的；第二次该提升的会提升，代码会一步一的执行；

看一下，下面的一段的代码执行情况，检验一下：

myFn();

function myFn() {

    console.log('mm');

}

myFn();

var myFn = function () {

    console.log('nn');

}

这里可以很明显的看到结果 =>打印两次 // mm

下面我们在介绍一种，在函数内部的变量提升（先看一段代码）

function myFn(a) {

    var a = 2;

    console.log(b);

    console.log(a);

    var b = 0 ;

}

myFn(1);  // undefined 2

在函数的内部，如果函数有参数的话，就相当于在函数内部声明了这个变量，如上面例子：先声明 var a；调用的时候传来参数，则 a =1 ,若果在函数内部把a在赋值，那么a就等于新赋值的值；而b是不是参数，但在函数内部定义了，由于变量的提升，会打印underfind，这是变量定义，但是没有赋值，只有在函数赋值后，才能打印该值；

巴特西

JavaScript中函数的变量提升问题

最新文章

热门文章