JavaScript Advanced Features - Scope Sample Code Details

Scope is divided into global scope and local scope in javascript, and local scope actually refers to function scope. JavaScript uses function as the minimum scope of scope.

Global Scope

Object that can be accessed anywhere in the code, such as the window object and the properties of the window object, It has global scope.
1. Variables defined in the outermost layer are all attributes of the window object by default;
2. Undefined variables are global by default and are also attributes of the window object by default; This is a common mistake error, but the new version of the browser has fixed this problem!
For example:

var firstName = "leo";
function changeName() {
    var secondName = "jut";
    fullName = "jutleo";
    function getName() {
        console.log(secondName);
    }
    getName();
}
console.log(firstName);
console.log(fullName);//报错
// console.log(secondName);//报错
changeName();
// getName();//报错

Local Scope/Function Scope(Local Scope/Function Scope)

When defining a variable in a function, this variable is only visible to the current function, javascript It will search the scope of the current function. If it is not found, it will continue to search upward until it is not found in the global scope and it will return undefined;

var version = "version_1";
var f1 = function() {
    console.log(version);//version_1
}
f1();

If it is not found in the f1 function, continue to search upward

var version = "version_1";
var f2 = function() {
    var version = "version_2";
    console.log(version);//version_2
}
f2();

Find directly in the f2 function

var socpe = "scope_01";
var f3 = function() {
    console.log(scope); //undefined
    var scope = "scope_02";
}
f3();

Why is this? It turns out that javascript searches for the scope variable in the f3 function and finds it. At this time, the outer scope is ignored, but when execution reaches console.log(scope), the scope has not been initialized, so it returns undefined

var f4 = function() {
    var scope = "scope_02";
    (function(){
        var scope = "scope_03";
        (function(){
            console.log(scope); //scope_03
        })();
    })();
}
f4();

Nesting must follow the same rules. First search inside the function. If not found, continue to the upper level!

var x_scope = "leo";
var f5 = function() {
    console.log(x_scope); //leo
}
var f6 = function() {
    var x_scope = "jut";
    f5();
}
f6();

Why is this? It turns out that when JavaScript functions are nested, the scope is determined by the nesting relationship, and the order of calls is ignored!

Having said so much, how to use this scope? We can see from the above examples that when JavaScript searches for variables, the chain that goes up in order is the scope chain. In actual applications, the deeper the position of the variable, the slower the reading and writing speed until it is found in the global scope.

Look at the example:

function setLabelBgColor(){
    document.getElementById("btn").onclick=function(){
        document.getElementById("label").style.backgroundColor="red";
    };
}

According to the search logic of the scope chain, the search for the document variable must traverse the entire scope chain until it is finally found in the global object. This function is referenced twice. The optimization is as follows:

function setLabelBgColor(){
    var doc = document;
    doc.getElementById("btn").onclick=function(){
        doc.getElementById("label").style.backgroundColor="red";
    };
}

This is just an example. Doing this will not significantly improve performance! However, in actual use, it is necessary to avoid the situation where global variables are accessed in large quantities.

(function(exports){
    //do some thing ...
})(window);

Think about it, why do all the libraries and frameworks you see start like this?

The above is the detailed content of JavaScript Advanced Features - Scope Sample Code Details. For more information, please follow other related articles on the PHP Chinese website!