2019年6月23日

变量提升-函数提升(转)

作者 admin

变量提升

下面的代码中，我们在函数中声明了一个变量，不过这个变量声明是在if语句块中：

function hoistVariable() {
    if (!foo) {
        var foo = 5;
    }

    console.log(foo); // 5
}

hoistVariable();

运行代码，我们会发现foo的值是5，

那么至于说打印结果，经过一次预编译之后，上面的代码逻辑如下：

// 预编译之后
function hoistVariable() {
    var foo;

    if (!foo) {
        foo = 5;
    }

    console.log(foo); // 5
}

hoistVariable();

引擎将变量声明提升到了函数顶部，初始值为undefined，自然，if语句块就会被执行，foo变量赋值为5，下面的打印也就是预期的结果了。

类似的，还有下面一个例子：

var foo = 3;

function hoistVariable() {
    var foo = foo || 5;

    console.log(foo); // 5
}

hoistVariable();

foo || 5这个表达式的结果是5而不是3，虽然外层作用域有个foo变量，但函数内是不会去引用的，因为预编译之后的代码逻辑是这样的：

var foo = 3;

// 预编译之后
function hoistVariable() {
    var foo;

    foo = foo || 5;

    console.log(foo); // 5
}

hoistVariable();

如果当前作用域中声明了多个同名变量，那么根据我们的推断，它们的同一个标识符会被提升至作用域顶部，其他部分按顺序执行，比如下面的代码：

function hoistVariable() {
    var foo = 3;
    
    {
        var foo = 5;
    }

    console.log(foo); // 5
}

hoistVariable();

由于JavaScript没有块作用域，只有全局作用域和函数作用域，所以预编译之后的代码逻辑为：

// 预编译之后
function hoistVariable() {
    var foo;

    foo = 3;
    
    {
        foo = 5;
    }

    console.log(foo); // 5
}

hoistVariable();

函数提升

function hoistFunction() {
    foo(); // output: I am hoisted

    function foo() {
        console.log('I am hoisted');
    }
}

hoistFunction();

为什么函数可以在声明之前就可以调用，并且跟变量声明不同的是，它还能得到正确的结果，其实引擎是把函数声明整个地提升到了当前作用域的顶部，预编译之后的代码逻辑如下：

// 预编译之后
function hoistFunction() {
    function foo() {
        console.log('I am hoisted');
    }

    foo(); // output: I am hoisted
}

hoistFunction();

在开始之前会进行函数预解释，先确认在全局作用域下有一个叫做hoistfunction的函数，然后解析定义有个foo的函数，等到函数编译的时候，会把函数声明提升到顶部，这也就是为什么打印出来是这个样子。

相似的，如果在同一个作用域中存在多个同名函数声明，后面出现的将会覆盖前面的函数声明

function hoistFunction() {
    function foo() {
        console.log(1);
    }

    foo(); // output: 2

    function foo() {
        console.log(2);
    }
}

hoistFunction();

除了使用上面的函数声明，更多时候，我们会使用函数表达式，下面是函数声明和函数表达式的对比：

// 函数声明
function foo() {
    console.log('function declaration');
}

// 匿名函数表达式
var foo = function() {
    console.log('anonymous function expression');
};

// 具名函数表达式
var foo = function bar() {
    console.log('named function expression');
};

可以看到，匿名函数表达式，其实是将一个不带名字的函数声明赋值给了一个变量，而具名函数表达式，则是带名字的函数赋值给一个变量，需要注意到是，这个函数名只能在此函数内部使用。我们也看到了，其实函数表达式可以通过变量访问，所以也存在变量提升同样的效果。

那么当函数声明遇到函数表达式时，会有什么样的结果呢，先看下面这段代码：

function hoistFunction() {
    foo(); // 2

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

    foo(); // 1

    function foo() {
        console.log(2);
    }

    foo(); // 1
}

hoistFunction();

运行后我们会发现，输出的结果依次是2 1 1，为什么会有这样的结果呢？

因为JavaScript中的函数是一等公民，函数声明的优先级最高，会被提升至当前作用域最顶端，所以第一次调用时实际执行了下面定义的函数声明，然后第二次调用时，由于前面的函数表达式与之前的函数声明同名，故将其覆盖，以后的调用也将会打印同样的结果。上面的过程经过预编译之后，代码逻辑如下：

// 预编译之后
function hoistFunction() {
    var foo;

    foo = function foo() {
        console.log(2);
    }

    foo(); // 2

    foo = function() {
        console.log(1);
    };

    foo(); // 1

    foo(); // 1
}

hoistFunction();

我们也不难理解下面的函数和变量重名时，会如何执行：

var foo = 3;

function hoistFunction() {
    console.log(foo); // function foo() {}

    foo = 5;
    
    console.log(foo); // 5

    function foo() {}
}

hoistFunction();
console.log(foo);     // 3

我们可以看到，函数声明被提升至作用域最顶端，然后被赋值为5，而外层的变量并没有被覆盖，经过预编译之后，上面代码的逻辑是这样的：

// 预编译之后

var foo = 3;

function hoistFunction() {
   var foo;

   foo = function foo() {};

   console.log(foo); // function foo() {}
   
   foo = 5;

   console.log(foo); // 5
}

hoistFunction();
console.log(foo);    // 3

所以，函数的优先权是最高的，它永远被提升至作用域最顶部，然后才是函数表达式和变量按顺序执行，这一点要牢记。

变量提升-函数提升(转)

变量提升

函数提升

发表评论 取消回复

发表评论取消回复