scope

Series of the opening

Establish clear, precise, essential concepts and clear, precise, necessary connections between them as you enter the front end, so that you can stay calm in whatever interview you’re going to be doing. There is no catalog, but a web of knowledge formed through the association of concepts, as you can see below. When you encounter a relation concept, you can use the parentheses (strong/weak) to determine whether the relation is strongly related to the concept you are understanding (you need to understand before you can proceed) or weakly related (knowledge expansion) to improve your reading efficiency. I also update related concepts regularly.

The interview questions

  • What is scope in your own words
  • Lexical scope, static scope, dynamic scope, functional scope, block-level scope, etc

What’s this for?

A scope is a set of rules that dictate how to look up a variable, that is, determine what access the currently executing code has to a variable.

In simple terms, when we write code, we have separated the code into blocks (regions) in which many variables are defined, and scopes specify which blocks of code can access which variables.

The access permissions of these variables are determined by the time you write the code, and cannot be changed. They are static, so they are also called static scopes, or lexical scoping.

If a variable or other expression is not in the current scope, it is not available.

The scope chain

When you’re writing code, you’re not going to have a laundry list, you’re going to have nesting. The scope is now nested and hierarchical.

The child scope can access the parent scope, but not the other way around. That’s the rule of scope chains.

When we want to use declared variables in a program, the engine always looks first from the nearest field and then up until it finds the outermost global scope.

Imagine that a son can ask for things from his father or grandfather (external scope variable) and an elder can’t ask for sugar from a child (internal scope variable)

Now that we have a rough idea of what scope is, let’s look at it in more detail.

Lexical scope (static scope)

Lexical scope is the scope of the definition at the lexical stage

In other words, the lexical scope is determined by where you put the variable and block scope when you write code,

So the lexical parser keeps its scope constant when it processes code (most of the time, except for a few ways to trick the lexical).

Because JavaScript uses lexical scope, the scope of a function is determined at function definition time.

Shading effect

The scoped lookup stops when the first matching identifier is found.

You can define identifiers with the same name in multiple nested scopes, which is called the “shadowing effect” (the inner identifier “overshadows” the outer identifier).

Regardless of the shadowing effect, scoping searches always start at the innermost scope of the runtime and work up and out until the first matching identifier is found.

// Scope chain schematic
var value = 'global'           // Global scope variable

function bar() {
  var innerValue = 'inner'
  var value = 'Masked global variable of the same name'
  console.log(value);          // a variable with the same name that covers the whole world
  console.log(innerValue);     // inner
}

bar();
console.log(value);            // golbal [start with the nearest scope, it looks like a global scope]
console.log(innerValue);       // ReferenceError: innerValue is not defined
Copy the code

So what if this

// Scope chain schematic
var value = 'global'           // Global scope variable

function bar() {
  console.log(value);          // golbal [wherever this function is called, see its scope when it is defined]
}

function foo() {
  var value = 'Variables inside Foo'
  bar();                       // Although bar is called inside foo, the lexical scope depends on the scope of bar at definition time
}

foo();
Copy the code

The key is the scope of the definition (function declaration)

Cheating on lexical

  • eval
  • with

The side effect of these two mechanisms is that the engine cannot optimize scoped look-ups at compile time, because the engine can only discreetly consider such optimizations to be ineffective. Using any of these mechanisms will cause your code to run slowly. Don’t use them. Check it out at MDN.

Dynamic scope

Just so you don’t get confused, let’s make a conclusion.

JavaScript does not have dynamic scope. It has lexical scope and is straightforward. But this mechanism is somewhat like dynamic scope.

The main difference: lexical scope is determined at code or definition time, while dynamic scope is determined at run time. (this is!

Lexical scopes focus on where functions are declared, while dynamic scopes focus on where functions are called from.

So when we analyze this pointing, we analyze the function call stack, as detailed in the association concept this.

Languages such as Bash/Perl use dynamic scopes.

Function scope

As the name implies, a function scope means that all variables belonging to the function can be used and reused throughout the scope of the function (in fact, nested scopes can also be used).

Block-level scope

Simply put, block-level scopes are scopes contained in syntax {}.

  • try/catch
  • let / const

The let keyword (a cousin of the var keyword) was introduced in ES6 to declare variables in arbitrary blocks of code.

if (..) { let a = 2; } would declare a {.. } block, and add variables to the block.

In short, there is no such thing as variable promotion in let.

The area from the top of the block to the initialization statement of the variable is called TDZ (temporary dead zone).

To be clear, you can’t use it if you don’t declare it, and you’ll get an error if you use it.

if (true) {
  // '*************** temporary dead zone ***************'
   console.log(a);
   console.log(b);
  // '*************** temporary dead zone ***************'
   var a = 2;
   let b = 3; } is first typed because of variable promotionundefinedAnd then because it was used in a temporary dead zoneletA variable defined threw an error.Copy the code

What is the implementation principle?

After we understand the concept, to explore its implementation under the (interview) are often asked about the source code, can someone feel futile, I think it is useful for developing the other associated concepts, will know 】 【 can also take a look at your hard coding ability, to assemble to see how your memory is good. (^ – ^)

In lexical context execution context -> lexical context [association sub-concept (strong)] internal and external association, in fact, is the scope chain principle, in fact, here we can understand the lexical context execution context is the scope of the general term. This is what determines the access to the variable for the currently executing code.

other

reference

  • You don’t know Javascript
  • Developer.mozilla.org/zh-CN/docs/…
  • Developer.mozilla.org/zh-CN/docs/…