Js variables and functions are upgraded, while js variable functions are upgraded.

Js variables and functions are upgraded, while js variable functions are upgraded.

Js variable and function improvement

First, we can briefly understand the concept of scope to facilitate understanding of the concepts of variable and function escalation.

function foo() {    var x = 1;    if (x) {        var x = 2;    }    console.log(x);}foo();// 2

Result 2: no block-level scope concept exists in js.
You can use the following method to create your own scope without interfering with external variables.

function foo() {    var x = 1;    if (x) {        (function() {            var x = 2;        }());    }    console.log(x);}foo();// 1

The result is 1. the scope in js is bounded by functions.

1. Variable upgrade:

Variable upgrade is related to js pre-compilation. The following examples help to explain

var a = 100;var b = 200;function foo(){    console.log(a);// undefined    a = 10;    console.log(a);// 10    var a = 1;    console.log(a);// 1    console.log(b);// 200}   foo();

During js pre-compilation, the variable allocation space declared by var will be found in the current scope and assigned as undefined. If not found, it will be found in the next scope.

The equivalent code of the above Code is as follows:

var a = 100;var b = 200;function foo(){    var a;    console.log(a);// undefined    a = 10;    console.log(a);// 10    a = 1;    console.log(a);// 1    console.log(b);// 200}   foo();

It is easy to understand. The first line of var declares a, but no value is assigned. Therefore, it is undefined. Print 10 and 1 below, which is a logical unit.

As for variable B, it cannot be found in the current scope. Therefore, it needs to be found in the outer scope. If variable B is found in window, the value of variable B is 200.

2. Function Improvement

First, we need to clarify two points:

<1> function upgrade is performed only when a function is declared.

<2> the function upgrade will promote the function body together, which is different from the variable upgrade.

The following shows that the function expression cannot be upgraded:

~function() {    alert(typeof next); // undefined    ~function next() {        alert(typeof next); // function    }()}()

Add one before the function ~ The purpose is to convert the function declaration into a function expression. In fact, you can also add other operators, such as + ,-,! In short, this function declaration is changed to a function expression.

From the print results, the first alert output is undefined, indicating that next has no function improvement at all.

Next we will verify:

a();// 123var a = function(){    console.log("321");}a();// 321function a(){    console.log("123");}

From the results, we can see that the printed result is placed in a (). The equivalent representation of the above Code is as follows:

var a = function a(){    console.log("123");}a();a = function(){    console.log("321");}a();

Which of the following has a higher priority when both the variable escalation and the function escalation occur? Let's make an experiment:

function fn(){console.log(a);var a = 2;function a(){}console.log(a);}fn();// function a(), 2

From the print order, it can be seen that the function is given a higher priority than the variable, because the function is upgraded to improve the overall function body, and then immediately assigned a value. The equivalent code is as follows:

function fn(){var a = function(){}console.log(a);a = 2;console.log(a);}fn();

Here are a few interesting examples:

B = 100; function B () {B = 2; console. log (B) ;} B (); // B is not a function // The result of function elevation // B = 100; var B = function () {B = 2; console. log (B);} B (); // 2 // The function expression does not have function elevation.

function change() {    alert(typeof fn); // function    alert(typeof foo); // undefined    function fn() {        alert('fn');    }    var foo = function(){    <span style="white-space:pre"></span>alert('foo');    }    var fn;}change();

// Fn upgraded, foo not upgraded

There are several questions as follows:

1.

var a = 1;  function b() {    console.log(a);    a = 10;      function a() {}  }  b();// ？console.log(a);// ？

2.

a = 10;(function a(){    a = 1;    console.log(a);// ？})();

3.

function a(i) {     console.log(i);// ？    var i = 1;     console.log(i);// ？}; a(10); 

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.