In-depth understanding of javascript closures

Closure

• JavaScript advanced programming defines closures: 闭包 refers to functions that have access to variables in another function scope.
• A common way to create closures is to create another function inside one function.

However, it is 闭包 always 作用域链 associated with. When a function is called, one 执行环境 and the corresponding are created 作用域链 .

Several concepts:

• Execution Environment : Defines whether a variable or function has access to other data and determines its behavior. There are only two types of them: global and local (functions).

After all code in an execution environment is executed, the environment is destroyed, and the variables and function definitions stored therein are destroyed.

The execution environment includes: 1. Global execution Environment; 2. function execution Environment (local environment); 3. Eval execution Environment (not considered)

• Variable object : Each execution environment has one associated with it, and 变量对象 all variables and functions defined in the environment are stored in this object.

• Scope chain : Contemporary code when executed in an environment, creates a scope chain for the variable object. Its purpose is to ensure an orderly access to all variables and functions that the execution environment has access to. is essentially a pointer to a variable object list, which only references but does not actually contain variable objects.

• Active Object : The variable object for the function run time. This object contains all the local variables, named arguments, parameter collections, and this for the function. The active object initially contains only one variable, the arguments object (the object does not exist in the global environment). This is initialized by the arguments property of the function, and the value of the arguments property is the arguments object.

Reference: JavaScript Advanced Program Third Edition learning Note "Execution environment, scope"

The front end of the scope chain, which is always the variable object that is the environment in which the code is currently executing. If the environment is a function, its active object is used as a variable object. The next variable object in the scope chain comes from the containing (external) environment, and the next variable object comes from the next containment environment. In this way, it continues to the global execution environment; The variable object of the global execution environment is always the last object in the scope chain.

When the function is finished, the local active object is destroyed, and only the memory 全局作用域 (the variable object of the global execution environment) is saved. However, 闭包 the situation is different. A function defined inside another function adds the active object containing the function (that is, the outer function) to its scope chain.

Because the closure carries the scope of the function that contains it, it consumes more memory than the other functions. Excessive use of closures can lead to excessive memory consumption, and it is recommended that you consider using closures only when absolutely necessary.

• Definition of closures in MDN: Closures are a special kind of object. Closure = function + the environment in which the function was created.
• An environment consists of any local variables that are in scope when the closure is created. Closures allow you to associate a function with some of the data (environment) it operates on.
• Similar to object-oriented programming: objects allow us to associate certain data (properties of an object) with one or more methods. Therefore, in general, a closure can be used wherever there is only one method of an object.

use of closures: data hiding and encapsulation can be achieved. -Similar to the Get or set method in Java.

1 functionMyObject (name, message) {2      This. Name =name.tostring ();3      This. Message =message.tostring ();4 5      This. GetName =function() {6         return  This. Name;7     }8 9      This. GetMessage =function() {Ten         return  This. Message; One     } A}

However, the above method affects performance because the method is defined into the object's constructor, and each time the constructor is called, the method is re-assigned once.

The prototype implementation method should be used instead:

1 functionMyObject (name, message) {2    This. Name =name.tostring ();3    This. Message =message.tostring ();4 }5Myobject.prototype = {6GetName:function() {7     return  This. Name;8   },9GetMessage:function() {Ten     return  This. Message; One   } A};

Or:

1 functionMyObject (name, message) {2    This. Name =name.tostring ();3    This. Message =message.tostring ();4 }5MyObject.prototype.getName =function() {6   return  This. Name;7 };8MyObject.prototype.getMessage =function() {9   return  This. Message;Ten};

Reference Links:

MDN (closed package)

JavaScript Secret Garden

JavaScript execution Environment and scope

In-depth understanding of javascript closures