A review plan for the interview

The introduction

Interview brother, interview, hurriedly review, do not say, review ！！！！

This series is a review of some of the topics you might encounter in an interview: execution context, scope chains, and closures.

ⅰ Execution Context

What is the execution context

Execution context is the abstract concept of the environment in which JavaScript code is evaluated and executed and, in my understanding, because the code executes from top to bottom, is called execution context (•̀ ω •́)✧, which is simply known as “the execution environment of the current code”.

There are three types of execution contexts:

• There is only one global execution context, the Window object in the browser, which is typically created by the browser in the client. Global variables and functions defined by var become properties and methods of the window object. The code in the global execution context is destroyed after it has finished executing (closing the web page, exiting the browser, etc.), including all variables and functions defined on it *
• Function execution context, * exists in every function call, even if the same function is called many times, each time a new execution context is created, and these execution contexts are managed and coordinated by the execution context stack *
• The Eval function execution context,Inside the eval function, not very often, so I’ll leave you with that.

Creating an execution context consists of three parts: lexical context, variable context, and this value

Execute the context stack

The execution context stack, short for execution stack, has the same properties as the push and POP methods of arrays in other languages, namely LIFO(LIFO) in data structures. When JavaScript first interprets your code, it first creates a global execution context and pushes it onto the stack, and then creates a function execution context and pushes it onto the stack for each function it encounters. Finally comes to the execution phase, the engine will first execute the function in the back stack, when the function is finished, the execution context from the stack, control flow to the next execution context in the current stack.

2. Scope chain

What is scope

First we’ll look at the concept of scope. A scope is a block of code that declares variables and functions and determines the accessibility of resources such as variables and functions declared in that block.

In JS, scopes are divided into global scopes, function scopes and block-level scopes

— Global scope

Resources defined in a global scope are accessible throughout the program in the following situations:

• Variables defined in the outermost code have global scope

  

• All variables that are not defined for direct use have global scope

  

• All properties of window objects have global scope

— Function scope

A function scope determines the accessibility of resources such as variables or functions declared inside a function. It does not accept access from outside the function

— Block-level scope

Variables declared with VAR, as shown in the code block below, have the scope of the global environment, which can be inconvenient in many cases.

To this end, the const and let keywords have been added in ES6, and variables declared with these keywords have block-level scope, as shown in the figure below

Variables declared by const and let do not have variable promotion, but have the “temporary dead zone” property. Variables must be declared first and then used, otherwise an error is reported.

So when the variable goes up, look at the picture:

What are temporary dead zones? Look at the picture:

Let differs from const in that:

• A variable declared by const must have an initial value, or an error is reported
• A variable declared by const cannot be modified or an error is reported
• Const variables declared for complex types can be changed, but the memory address of the variable cannot be changed. Look at the picture:

What exactly is a scope chain?

I’ve talked about a lot of stuff, but what exactly is a scope chain?

When the code in the context executes, it creates a chain of scopes for the variable object. This chain of scopes determines the order in which the code at each level of context accesses variables and functions. When a variable is searched, it is first searched from the variable object of the current context. If it is not found, it is searched from the variable object of the execution context of the parent (lexical level parent) until it finds the variable object of the global context, that is, the global object. Thus a linked list of variable objects in multiple execution contexts is called a scoped chain

Let’s look at an example, which is a lot easier than a bunch of explanations

In the figure above, there is a global variable sayHi, and there is a function sayHi in function B. The program starts by calling function B, and then function B calls function A. Function A prints sayHi, but there is no sayHi in function A’s scope. It then looks up the parent scope of function A and returns “Hello World”.

In this process, it is important to note that in the process of finding variables, the object to be looked up is not called in the scope of function A, but created in the scope of function A, namely the global scope of window. This happens because JavaScript is static scoped.

Ⅲ closure

What is a closure

A closure is a function that has access to variables in the scope of another function. A closure is a function defined within a function.

In this code, the function that fun returns is called a closure

— What closures do

• Extend the scope of the variable

  Closures extend the scope of a variable. In the above example, fun returns a closure that allows the external fn variable to access resources inside Fun. In the process, closures extend the life of a function. Normally, a function’s environment cycle starts when it is called and is destroyed after execution, but closures extend the function’s environment cycle so that we can access variables inside the function from outside the function.

  

  As shown in the figure, although closures can extend the scope of variables, because they extend the life of the function, variables in the function are always in memory, so you should not abuse closures or they may cause performance problems

• Encapsulating private variables

  According to the properties of closures, we can take advantage of the extension of the scope of variables by the closure, through the constructor, it has the ability to encapsulate private variables or functions

  

  In the example above, direct access to the sayHi or fun variables would not have succeeded, but with the help of closures, we have opened up some public methods that can be successfully modified and accessed outside the scope of the private resource. These public methods are called privileged methods

  However, there is a flaw in the old constructor bug, in which the new method is recreated for each instance. Implementing privileged methods using static private variables avoids this problem.

  

  The main difference between this pattern and the previous one is that private variables and private functions are shared by instances. Because privileged methods are defined on the stereotype, they are also shared by the instance. Creating static private variables like this allows for better code reuse using prototypes.

  In addition, there is a pattern that encapsulates private variables called the module pattern. The modular pattern is an extension of singletons (objects that have only one instance) to associate private variables and privileged methods through a chain of scopes. The code:

  

The module pattern uses anonymous functions, the body of which defines private variables and functions, and returns an object. This object contains privileged or public methods and is the public interface to a singleton. This pattern can be used if the singleton needs some kind of initialization and needs to access private variables.

conclusion

Above is I in the review process, the content of the summary and finishing, although I am not the first time to write notes, but it is the first time to share what I have written notes, there are lots of places, editor of the format is not unified, so may appear a little mess, I will in the next article continuously improve, that is why I must share notes, Usually when I take notes, I just write at will and read the past by myself in any format, but people always have to make progress. Sometimes I look back at my notes and talk a lot. I don’t get the point in many places. If I were to share my notes, my mind would tell me that what you’re writing can be read not only by yourself, but also by others, and that I need to make it look better to push myself to do better. Ok, that’s all for this article, and the next one will review JavaScript’s this, call, and apply, as well as bind.