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

What is the closure of the JavaScript function? aiming at this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

Preface

We know that the order in which the scope chain looks for identifiers is to look up one level from the current scope. Therefore, through the scope chain, the external variables of the JavaScript function can be read inside the function, but conversely, the external variables of the function usually cannot be read. In practical applications, sometimes it is necessary to really access the local variables inside the function outside the function, and the most common method is to use closures.

So what is a closure? The so-called closure is an object that contains references to both function objects and scope objects. Closures are mainly used to obtain variables or values on the scope chain or prototype chain. The most common way to create closures is to declare internal functions (also known as nested functions) in a function and return internal functions. At this point, the internal function can be obtained by calling the function outside the function. Although according to the concept of closures, all JavaScript functions that access external variables are closures. But most of the time, the so-called closure actually refers to the internal function closure.

Closures can encapsulate private properties of some data to ensure secure access to these variables, which brings great benefits to applications. It is important to note that closures can also cause unexpected problems if they are not used properly. Here are a few examples to demonstrate the creation, use, and possible problems of closures and their solutions.

Example 1: create a closure.

Closures function outer (argument) {var bounded 0; return function inner () {bounded variables; console.log ("internal b:" + b);}} var func = outer (); / / 1 refers to the internal function console.log (func) returned by the function through external variables; / / 2 outputs the internal function definition code func (); / / 3 accesses the local variable b through the closure. Console.log ("external function b:" + b); / / 4 error, quote error reported.

The above code declares the internal function inner in the external function outer and returns the internal function. At the same time, outside the outer function, the variable func refers to the internal function returned by the outer function, so the internal function inner is a closure. The closure accesses the local variable b of the external function. The code at place 1 returns the internal function by calling the external function and assigns it to the external variable func, so the func variable references the internal function, so the code at place 2 will output the entire definition code for the inner function. The code in 3 places calls the internal function inner after adding a pair of parentheses to the external variable func, thus achieving the purpose of accessing the local variable b outside the function. A ReferenceError error is reported when the code at 4 is executed, because b is a local variable and cannot be accessed directly outside the function.

We know that when the function is finished, the runtime context will be destroyed and the associated active object will be destroyed, so after leaving the function, the local variables belonging to the active object will not be accessible. But why is it that after the outer function in the above example is executed, its local variables can still be accessed by internal functions? This problem can be explained by domain chain.

When the code in execution 1 calls the outer function, the JavaScript engine will create the scope chain of the outer function execution context, which contains the active object when the outer function is executed, and the JavaScript engine will also create a closure. Because the closure needs to access the local variable of the outer function, its action chain will also reference the active object of outer. In this way, when the outer function is executed, its scope object still exists because there is a reference to the closure and can be provided to the closure access.

Although the internal function in the above example has a name, it is not used in the call, so the name of the internal function can be changed by default, that is, the internal function can be changed to anonymous function, thus simplifying the code.

Example 2: classical closure problem

Classical closure problem _ window.onload=function () {var abtn = document.getElementsByTagName ("button"); for (var I = 0; I

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.