Javascript closure_javascript skills

Introduction
Closure
The so-called "closure" refers to an expression (usually a function) that has many variables and an environment bound to these variables, so these variables are also part of the expression part.
Closures are one of the most powerful features of ECMAScript (JavaScript), but the prerequisite for using closures well is to understand closures. Closures are relatively easy to create, and people may even create closures inadvertently. However, these unintentionally created closures are potentially harmful, especially in common browser environments. If you want to use closures to their advantage and avoid their disadvantages, you must understand how they work. The implementation of the closure working mechanism depends largely on the role of scope in the parsing process of identifiers (or object attributes).

The simplest way to describe closures is that ECMAScript allows the use of inner functions - that is, the function definition and function expression are located within the function body of another function. Furthermore, these inner functions have access to all local variables, parameters, and other inner functions declared in the outer function in which they exist. A closure is formed when one of these inner functions is called outside the outer function that contains them. That is, the inner function will be executed after the outer function returns. When this inner function is executed, it still must access the local variables, parameters and other inner functions of its outer function. The values ​​of these local variables, parameters, and function declarations (initially) are the values ​​when the outer function returns, but are also affected by the inner function.

Unfortunately, to properly understand closures is to understand the mechanics behind closures, as well as many of the associated technical details. Although the first half of this article does not cover some of the algorithms specified by the ECMA 262 specification, there is still much that cannot be avoided or simplified. For those who are familiar with object attribute name resolution, you can skip the relevant content, but unless you are also very familiar with closures, it is best not to skip the following sections.

Object attribute name resolution
ECMAScript recognizes two types of objects: native objects and host objects. The host object contains a subclass of the native object called a built-in object (ECMA 262 3rd Ed Section 4.3). Native objects belong to the language, while host objects are provided by the environment, such as document objects, DOM and similar objects.

Native objects have loosely and dynamically named properties (dynamism is limited for some implementations of built-in object subclasses - but that's not too much of a problem). The named properties of objects are used to save values. The value can be a reference to another object (Objects) (in this sense, functions are also objects), or it can be some basic data types, such as: String, Number, Boolean , Null or Undefined. The more special one is the Undefined type, because you can assign an Undefined type value to an object's properties without deleting the corresponding properties of the object. Moreover, this property just holds the undefined value.

The following is a brief introduction on how to set and read the attribute values ​​​​of objects, and reflect the corresponding internal details to the greatest extent.

Assignment of values ​​
A named property of an object can be created, or reassigned, by assigning a value to the named property. That is, for:

var objectRef = new Object(); //Create a normal javascript object.
A property named "testNumber" can be created through the following statement:

objectRef.testNumber = 5;
/* - or - */
objectRef["testNumber"] = 5 ;
Before the assignment, there is no "testNumber" attribute in the object, but after the assignment, an attribute is created. Any subsequent assignment statements do not need to create this property again, but only reset its value:

objectRef.testNumber = 8;
/* - or - */
objectRef[" testNumber"] = 8;
We will introduce later that Javascript objects have prototype properties, and these prototypes themselves are also objects, so they can also have named properties. However, the role of prototype object named properties is not reflected in the assignment phase. Likewise, when assigning a value to its named property, the named property is created if the object does not have that property, otherwise the property's value is reset.

For more details, please view the following article:
http://demo.jb51.net/js/javascript_bibao/index.htm