The global scope and this point to

[Global scope]

Objects that can be accessed anywhere in the code have global scope (that is, variables defined in the global scope can be used anywhere.) The global scope is created when the page is opened and destroyed when the page is closed.

[Case 1: All undefined direct assignment variables are automatically declared as having global scope]

Note: If a variable is declared without the keyword. For example: num=10, this variable is a global variable no matter where it is written. But this is very non-standard, don't write it like this, otherwise there may be bug s in the code in the future.

        function Fun1() {
            a  = 'undefined'
            var b = 'internal'
        }
        Fun1();
        console.log(a); //Undefined variable with direct assignment
        console.log(b); //b is not defined

[Case 2: The outermost function and the variables defined outside the outermost function have global scope]

         var A ='outermost variable'; //outermost variable

        function outFun(){ //outermost function
            var B ='inner variable of outermost function'

            function innnerFun(){ //inner function
                var c ='inner variable of inner function'
            }
        }
        console.log(A);//outermost variable
        // console.log(B); //B is not defined 
        outFun()
        innerfun() //innerfun is not defined
        //console.log(C); //c is not defined

[Case 3: All properties of window objects have global variables]

There is a global object window in the global scope, which represents the browser's window, created by the browser. In general, the built-in properties of the .window object have global scope. For example, window.name, window.location

[scope chain]

By default, the code is in the global scope (level 0 chain), and when a function is declared, a local scope (level 1) is opened. And a function can be declared inside the function, which will form a new scope (level 2), and the structure formed by analogy is called a scope chain

[Variable Access Rules: Proximity Principle]

When you access a variable in a scope, you first check whether the current scope has a declaration. Access if available. If not, look up the upper-level scope to see if there is a declaration. If there is, visit, if not, continue to go up. Until the top level 0 of the scope, if it has not been found, the program will report an error.

[Anonymous function]

A function without a function name. named function

        function fn(){
            console.log('666');
        }
        fn()

        let fn1 = function(){
            console.log('111');
        }

        (function (){
            let num = 10
            console.log('111');
        })()

[this points to]

this is a keyword used inside a scope (block scope, function scope, global scope). The this keyword is an internal object automatically generated when the function runs. It can only be used inside the function. It always points to the object that calls it. (Rarely used globally, mostly used inside functions.)

Depending on the runtime, the object pointed to by this is different. In most cases, the way the function is called determines the value of this. Use this in the browser environment/global environment: this points to the window object.

        console.log( this ); //Window
        console.log( this === window ); //true

Use this in a function:

No matter how the function is defined, no matter where the function is defined, it only looks at the call of the function (except arrow functions). Ordinary function (direct call/global call): this points to window// function name()

        function fn() {
            console.log(this); //Window
        }
            fn()

Timer function: this points to window

Use the fn function as a timer handler

        setTimeout(function(){},0)
        setInterval(function(){},0)
        setTimeout(fn,0)

Self-executing function: this points to window

(function(){})()

Object call function: this points to the xxx object

        var obj = {
            // Assign the address stored by fn to the f member of obj
            // From now on obj.f and fn of global variables point to the same function space 
            f:fn,
            name:'I'm obj object'
        }
        obj.f() //Object call, this points to obj.

        setTimeout(obj.f,0)// Use the obj.f function as a timer handler

Event handler: this points to the event source (whose event is bound to)

        // xxx.onclick = function(){}
        // xxx.addEventListener('',function(){})

Tags: Javascript Front-end

Posted by khushbush on Thu, 13 Oct 2022 00:31:18 +0300