Shulou(Shulou.com)05/31 Report--

This article mainly explains the "JavaScript closure and scope chain how to define", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "JavaScript closure and scope chain how to define" it!

Closure definition

A closure is a function that has access to variables in the scope of another function. A common way to create a closure is to create another function B inside function A, then function B is a closure that accesses all variables in the scope of function A.

The closure of JavaScript and the domain chain are inseparable, so this paper can be compared with the domain chain of JavaScript, and we can certainly have a deeper understanding of the closure and domain chain of JavaScript.

Now we still use createComparisonFunction as an example to analyze the closure.

/ / step1: define createComparisonFunctionfunction createComparisonFunction (propertyName) {return function (object1, object2) {var value1 = object1 [propertyName]; var value2 = object2 [propertyName]; if (value1

Value2) {return 1;} else {return 0;}};} / / step2: call createComparisonFunctionvar compareName = createComparisonFunction ("name"); var compareAge = createComparisonFunction ("age"); / / step3: call comparevar object1 = {name: "Nicholas", age: 25}; var object2 = {name: "Greg", age: 27}; var result1 = compareName (object1, object2); / / 1var result2 = compareAge (object1, object2) / /-1//step4: dereference closure for recycle memorycompareName = null;compareAge = null

In this example, the anonymous function function (object1, object2) is a closure that accesses all the variables in the createComparisonFunction scope and naturally contains the propertyName attribute. Because the propertyName parameter is different, the comparison properties are different, so the function execution results are different.

Closures and variables

From the scope chain of JavaScript, we know that JavaScript determines the scope of the function execution environment through the scope chain. This mechanism leads to a noticeable side effect, that is, the closure can only get the last value of any variable in the function. Closures access all variables in the active object of an external function by referring to the active object of the external function, so the values of these variables may change during the execution of the external function, but after the execution of the external function, the active object of the external function will not change, so when the closure is executed All variables in the active object of the external function accessed by the closure through the scope chain can only be the last saved values in the active object of the external function after the external function has been executed. We use an example to illustrate this side effect.

Function createFunctions () {var result = new Array (); for (var I = 0; I < 10; iTunes +) {result [I] = function () {return I;} return result;} var functions = createFunctions (); for (var I = 0; I < functions.length; I +) {console.log (function [I] ());}

The result of the output is

10 10 10

On the face of it, it seems that each function should return its own index value, but in fact, each function returns 10. Because the active object of the createFunctions function is stored in the scope chain of each function, they all refer to the variable I in the active object of the createFunctions function. After the createFunctions function returns, the value of the variable I is 10, and each function references the same variable object that holds the variable I, so the value of I inside each function is 10.

Let's take calling functions [3] () as an example to illustrate:

The value of the variable I retained in the active object of createFunctions referenced by the scope chain of the Function object of the Closure function is 10. So whether it's functions [3] () or functions [5] (), the active object of the createFunctions referenced by the scope chain of its runtime context is the same active object, and the value of the variable I retained in the active object is 10.

How to avoid this situation? We can make the closure behave as expected by creating another anonymous function.

Function createFunctions () {var result = new Array (); for (var I = 0; I < 10; iTunes +) {result [I] = function (num) {return function () {return num;}} (I);} return result;} var functions = createFunctions (); for (var I = 0; I < functions.length; iTunes +) {console.log (function [I] ());}

The result of the output is

0 1 2 3 4 5 6 7 8 9

The difference between this code snippet and the previous code is that an anonymous function function (num) is called immediately, so that the closure function () refers to the active object of function (num) and accesses the variable num in the active object instead of the variable I in the createFunctions active object, while the num that immediately calls function (num) is the index value 0men1 2. nine.

Let's still take the call to functions [3] () as an example to illustrate:

When the createFunctions function is executed, function (0) and function (1) are called in turn. Function (9), generate function (0), function (1)... Function (9) these 10 active objects of function (num), while result [0], result [1]... Result [9] the scope chains of these 10 anonymous function objects refer to the active objects of these 10 function (num) respectively, and the value of the variable num also corresponds to 0,1... nine.

So whether it's functions [3] () or functions [5] (), the scope chain of its runtime context refers to the active objects of the function (3) or function (5) function (num) functions executed when the createFunctions function is executed. These active objects are different active objects with reserved Num values of 3 and 5, respectively.

Thank you for your reading, the above is the content of "how to define JavaScript closure and scope chain". After the study of this article, I believe you have a deeper understanding of how to define JavaScript closure and scope chain. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.