Shulou(Shulou.com)06/03 Report--

This article mainly introduces the use of Javascript scope and closures, the article is very detailed, has a certain reference value, interested friends must read it!

1. Scope

To put it simply, scope refers to the area in the program that defines variables, which determines the currently executing code's access to variables.

In ES5, there are generally only two types of scopes:

Global scope: as the outermost scope of the program, the global scope always exists.

Function scope: the function scope is created only when the function is defined and is included in the parent function scope or global scope

After talking about the concept, let's look at the following code:

Var a = 100function test () {var b = a * 2 var a = 200 var c = a console.log (b) console.log (c)} test () / / what will be printed here?

Parsing:

First of all, this code forms the global scope and function scope.

The global scope has a variable an assigned to 100

In the scope of test function, we define the local variable bmenaPermec.

There is also variable lifting here, and the variable lifting var b; var a; var c is carried out first in the function scope.

Then assign a value to b. At this time, a has not been assigned, so the value of an is undefined, and then axi2, so b is NaN.

Then assign a value to 200 and c to a scale 2 equals 100.

So eventually NaN,100 will be printed out.

In ES6, a new block-level scope has been added

To put it simply, the area in curly braces {...} is block-level scope, but Javascript does not support block-level scope natively. We need to create block-level scope with the help of let and const proposed by ES6.

/ / ES5if (true) {var name = 'Nanjiu'} console.log (name) / / Nanjiu / / ES6if (true) {let age = 18} console.log (age) / / error 2, domain chain

When the executable code accesses the variable internally, it will first look for the variable under the current scope, return it immediately, and if not, it will look for it in the parent scope. All the way to the global scope. We call this scope nesting mechanism the scope chain.

3. Lexical scope

Lexical scope is a working model of scope. Lexical scope is a type of scope used in JavaScript, and lexical scope can also be called static scope.

The so-called lexical scope is determined by where you write the variable and scope when you write the code, that is, the lexical scope is static scope, which is determined when you write the code. The scope of a function depends on the location it declares and has nothing to do with the location of the actual call

MDN's definition of closures:

A function is bundled with references to its surroundings (lexical environment) (or functions are surrounded by references), and such a combination is called closure.

That is, the closure allows you to access the scope of the outer function in an inner function. In JavaScript, whenever a function is created, the closure is created at the same time as the function is created.

We can draw the following conclusion:

Closure = function + outer scope

Let's first look at a piece of code:

Var name = 'front-end Nanjiu' function say () {console.log (name)} say ()

Parsing: the say function can access the outer scope variable a, so doesn't that form a closure?

There is a sentence in the authoritative Guide to Javascript: strictly speaking, so JavaScript functions are closures.

But this is only a theoretical closure, which is different from what we usually use. The above example is just a simple closure.

ECMAScript's definition of closures:

In theory: all functions are closures. Because they are already stored in the upper context when they are created.

In practice, closures should meet two conditions: 1. The outer scope variable is referenced in the code; 2. Even if the context in which it was created has been destroyed, it still exists

Let's take another look at the code in the authoritative Guide to JavaScript:

Let scope = 'global scope'function checkscope () {let scope =' local scope'function f () {return scope} return f} let s = checkscope () s () / what is returned here?

Many students may think it is global scope, but is it really so? let's take a look at its implementation process:

First execute the global code, create the global execution context, define the global variable scope and assign a value

Declare the checkscope function, create the execution context of the function, create the local variable scope and assign a value

Declare the f function and create the execution context of the function

Executes the checkscope function, which returns an f function assigned to the variable s

Executing the s function is equivalent to executing the f function. The scope returned here is local scope. As for why local scope, we talked about lexicology above.

Basic rules of function: JavaScript functions are executed using the scope that defines them. In the scope where the f function is defined, the value of the variable scope is local scope

5. The application of closure

The vast majority of closures are used in scenarios where internal variables are maintained.

6. Defects of closures

Because the existence of closures may cause variables to reside in memory, improper use will cause memory leaks.

Memory leaks can cause applications to stutter or crash

7. High-frequency closure interview question var arr = [] for (var item0

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.