I heard about scopes in those years

  • Global scope
  • Function scope
  • Block scope
  • Lexical scope
  • Dynamic scope
  • Global scope
  • The scope chain

scope

Scope (English: scope) is a set of rules to find variables according to their names. It can be commonly understood as a closed space, which is closed and has no impact on the outside. The outer space cannot access the inner space, but the inner space can access the outer space wrapped in it.

It’s basically a language that if you’re declaring variables globally, it’s fine if it’s small but it’s not fine if it’s big. Therefore, various schemes are used to determine the scope of the function.

Static and dynamic scopes

Lexical scope and static scope

Static scoping means that an identifier can be determined at compile time through lexical analysis of the source code. The nested relationships of scopes (scope chains) are established at the time the source code is written.

Lexical analysis is an indispensable part of compilation.

// Static scope: var a = 10; function fn() { var b = 1; console.log(a + b); } fn(); / / 11Copy the code

Dynamic scope

Dynamic scopes are determined at run time, lexical scopes focus on where functions are declared, while dynamic scopes focus on where functions are called from, and their chain of scope is based on the call stack at run time.

In JS, this is the context

Function say() {debugger console.log(' mY home :' + this.name)} var China = {name: 'China ', say, Beijing :{name: 'Beijing ', say}} setInterval(() => math.random () > 0.5? China.say () : china.beijing.say(), 1000)Copy the code

Because this refers to the environment in which the function is running, it can only be determined at execution time.

extension

In fact, the problem of dynamic versus static exists in every language,

Such as:

  • C++ dynamic and static binding – virtual functions
  • Java dynamic compilation and dynamic loading

Function scope and block-level scope

Now let’s talk about function scope and block scope in detail.

For functional languages like JS, functions are first-class citizens, and there are even people who think of using functions to solve all problems.

So let’s first talk about the basic function scope of static scope.

Function scope: All variables declared in a function are always visible in the function body and can be used and reused throughout the function scope.

var a = 'a'
function f1() {
    var b = 'b'
    function f2() {
        var c = 'c'
        function f3() {
          if(true) {
            var d = 'd'
          }
          console.log(a, b, c, d)
          debugger
        }
        f3()
    }
    f2()
}
f1()
Copy the code

The scope chain

As defined by the third edition of the ECMA-262 standard, this internal property contains the collection of objects within the scope of which the function is created. This collection is called the scope chain of the function

Block-level scope

Block scope is a tool used to extend the previous principle of minimum authorization by extending code from hiding information in functions to hiding information in blocks.

To keep up with other major languages, block-level scope is introduced in ES6 with let, const implementation of block-level scope.

Var c = 'c' function f2() {var c = 'c' function f3() {if(true) {let d = 'd' // var let d ='d  } console.log(a, b, c, d) } f3() } f2() } f1()Copy the code

The above simply changed variable D to use the let declaration

But the results have changed

This happens because d is scoped inside the function when var is used.

With the let declaration, the scope is only within the if code block.

The interview guide

  • This question is actually a basic question, no one did not answer. The key to the answer lies in the systematization of the description. For example, it is strange for you to insist that lexical scope and dynamic scope make up the scope system of JS. A description that is not in one dimension will make people feel that the description is not systematic and comprehensive.

365 days of clocking

🔥 creation is not easy, we help uncle B stack of a key three

  • How to use closures to complete library encapsulation 📺 Billbill video 📚 Gold Digging Manuscript 🐱 Github
  • [Talk about closures and real-time functions] 📺 Billbill video 📚 Nugget manuscript 🐱 Github
  • 📺 Billbill video 📚 Digger manuscript 🐱 Github
  • The relationship between closures and curated, partial application functions 📺 Billbill video 📚 Denver Manuscript 🐱 Github
  • How to make lazy functions with closures? 📺 Billbill video 📚 Nuggets Script 🐱 Github
  • What is a closure and how to create one? 📺 Billbill video 📚 Nuggets Manuscript 🐱 Github
  • [new a constructor if the function returnsreturn {} 、 return null ， return 1 ， return trueWhat happens? ]📺 Billbill video📚 Gold digging manuscript🐱 making
  • What happens to a new function? 📺 Billbill video 📚 Nuggets Script 🐱 Github
  • What are the ways to determine data types? 📺 Billbill video 📚 Nuggets Script 🐱 Github
  • [How much storage space does Number() have? What if the background sends a Number that exceeds the maximum limit?] 📺 Billbill video 📚 Nuggets Script 🐱 Github
  • [0.1 + 0.2 === 0.3? Why? How to solve?] 📺 Billbill video 📚 Nuggets Script 🐱 Github
  • How are JS integers represented? 📺 Billbill video 📚 Nuggets Transcript [🐱 Github](

\