The variable promotion and function promotion in JS

Source: Internet
Author: User

Let's take a look at a simple code

var str= ' Hello World '; alert (str); // pop up Hello world

Look at the code again:

var v= ' Hello world ';(function() {    alert (v);}) ()// The same as we expected, or pop-up Hello world

Then the mat is over, keep coding.

var str= ' Hello world ';(function() {    alert (str);     var str= ' I love coding ... ';}) ()// to our surprise, pop undefined, honey juice embarrassed ha

Come and come ...

Continue the honey juice embarrassment,

var foo = 1; function Bar () {   if (!  Foo) {           var foo = ten;   }   Alert (foo);} Bar (); // Ten

Again:

var a = 1; function B () {   = ten;    return ;    function  //1
1. Variable Promotion

is to raise the variable to refer to the top of the function. It is also important to note that a variable promotion is simply a declaration of a raised variable and does not raise the assignment. Like what:

(function() {    var a= ' one ';     var b= ' both ';     var c= ' three ';}) ()

In fact, it's like this:

(function() {    var  a,b,c;    A= ' one ';    b= ' both ';    c= ' three ';}) ()

So now we're analyzing the embarrassing results.

var str= ' Hello world ';(function() {    alert (str);     var str= ' I love coding ... ';}) ()

In fact, according to the above variables to enhance the original and the scope of JS (block-level scope) analysis, that the above code really becomes the following:

var str= ' Hello world ';(function() {    var  str;    alert (str);    str= ' I love You ';}) ()

That's why it's a hint that undefined

Here, we should be inspired: when we write JS code, we need to put the variable at the top of the function-level scope, such as the example I gave above: Var a,b,c; To prevent accidental occurrences.

2. Function Promotion

function promotion is to refer the whole function to the front. When we write JS code, we have two kinds of writing, one is the function expression, the other is the function declaration way. It is important to note that only the function declaration form can be promoted. Example Description:

// function declaration promoted "success" function myTest () {    foo ();     function foo () {        alert ("I am from foo");}    } MyTest (); // I'm from Foo . // function expression promoted "failed" function myTest () {   foo ();    var foo =function() {        alert ("I am from foo");}    } MyTest (); // uncaught Typeerror:foo is not a function
3. Scope Chain3.1 variables must be declared after use, functions can be used first, after the declaration

The reason is that the function has a pre-loaded procedure (the function declaration goes into memory before the other execution code). The essence or function of the declaration in front, used in the rear.

Console.log (subject); // undefined var subject= "JavaScript"; // the var command has a "variable boost" phenomenon, // that is, the variable can be used before the declaration, with a value of undefined // functions can be used first, then declared F1 (); // I am F1 function function F1 () {    console.log ("I am F1 function");}

Note: When a variable of the same name exists at the same time as a function with the same name, the execution order is parsed, the function declaration is executed first, and the other code is executed sequentially.

//when a variable with the same name exists at the same time as a function//analyze its execution order, the function declaration is executed first,//other code order execution. varf1= "Subject"; F1 ();functionF1 () {Console.log ("I am F1 function");}//uncaught typeerror:f1 is not a functionF1 ();//I am F1 functionvarf1= "Subject"; Console.log (F1);//subjectfunctionF1 () {Console.log ("I am F1 function");}
3.2 The internal environment can access variables of the external environment and vice versa.

Environment: Inside each function is an environment, the outermost is the global variable

Two types: function environment, Global environment

var week= "Sunday"; function F1 () {    var weather= "Sunshine";    Console.log (/// week: Sunday}f1 (); Console.log ("Climate:" +weather); // uncaught referenceerror:weather is not defined
The scope of the 3.3 variable is determined at the time of declaration, not the runtime.
//The scope of a variable is determined at the time of declaration, not at runtime//global variables that can be accessed at the same time for both F1 and F2varweek= "Sunday";functionF1 () {Console.log ("Week:" +week);}functionF2 () {//local variables, can only give F2 to the body level access    varweek= "Monday"; F1 ();//the F1 can only access Sunday information, no matter where it is accessed .}f2 ();//Week: Sunday//The scope of a variable is determined at the time of declaration, not at runtime//global variables that can be accessed at the same time for both F1 and F2varweek= "Sunday";functionF1 () {Console.log ("Week:" +week);} Week= "Monday"; F1 ();//Week: Monday
3.4 The execution environment can access variable types and priorities
// the execution environment can access variable types and priorities // Parameter < external variable   //Parameter Priority high var week= "Sunday"; // External Variables function F1 () {    function F2 (week) {//  parameter        console.log ("Week:" +week);    }    F2 ("Monday");} F1 (); // Week: Monday

If you think the article is good, please Bo Master drink a cup of tea Oh!!!

The variable promotion and function promotion in JS

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.