JS: 函数提升和变量提升

Posted ycherry

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS: 函数提升和变量提升相关的知识,希望对你有一定的参考价值。

1.什么是函数声明和函数表达式

(1)函数声明(function declaration),通过function 关键字,functionName函数名,arg参数(可选)定义的函数。

funcrion calculateAge(year) {.....} 

(2)函数表达式: 将函数声明赋值给一个变量,这个表达式叫做函数表达式

var funExpress = function() {};//匿名函数表达式,函数是匿名函数

var funExpress2 = function funName() {} //具名函数表达式,函数有函数名的表式

2. 什么是提升

通常js引擎会在正式执行之前进行一次预编译,在这个过程中,会将函数声明以及变量声明提升至作用于的顶端,并且赋值undefined,这个过程叫过提升

(1)变量提升

 console.log(age); // undefined
 var age = 23; 
 function foo() {
   console.log(age); // undefined
   var age = 65;
   console.log(age); // 65
 }
 foo();
 console.log(age); // 23

出现上面的结果是因为:age变量的声明会在预编译的时候提升至作用域的顶端,并且赋值undefined;上面代码预编译之后的结果相当于下面的代码,所以会出现两个undefined

var age;
console.log(age);// undefined
age = 23; 
function foo() {
  var age;
  console.log(age); // undefined
  var age = 65;
  console.log(age); // 65
}
foo();
console.log(age); // 23

后面两个一个输出65一个输出23是因为, 如果存在两个同名变量,我们会现在当前作用域中寻找此变量,若有就用这个若没有,就往外层作用域中寻找。 foo中有age变量就输出65, 全局作用域中也有age变量,所以输出23。

类似的例子还有:

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

(2)函数提升

1)函数声明

下面这种函数很常见:

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

如果在同一个作用域中存在多个同名的函数声明,后面的会覆盖前面的函数声明:

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

    foo(); // output: 2

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

hoistFunction();

预编译之后:

//预编译之后
function hoistFunction() {
    function foo() {
        console.log(2);
    }

    foo(); // output: 2

}

hoistFunction();

2)函数表达式

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

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

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

    foo(); // 1

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

    foo(); // 1
}

hoistFunction();

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

因为在js中函数是一等公民,函数声明的优先级最高,会被提升至当前作用域的最顶端,然后才是函数表达式和变量按顺序执行,所以第一次调用实际上执行了下面定义的函数声明,而第二次调用时,由于前面的函数表达式与之前的函数声明同名,故将其覆盖,以后的调用也是同样的结果, 上面的过程预编译之后的逻辑如下:

// 预编译之后
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,所以打印出来是5,而外层的变量不会被内层覆盖,所以最外层还是打印出来3, 上面的逻辑是:

// 预编译之后

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

函数声明的优先级最高,会被提升至当前作用域的最顶端,然后才是函数表达式和变量按顺序执行!!!!

 

本文完。

 

参考资料:

https://www.cnblogs.com/liuhe688/p/5891273.html

以上是关于JS: 函数提升和变量提升的主要内容,如果未能解决你的问题,请参考以下文章

js中的变量提升和函数提升

函数和变量中的预解析

js变量提升与函数提升

JS-作用域

js中的变量提升与函数提升

每周JS之变量提升和函数提升