JavaScript Concept Summary: Scopes, closures, objects and prototype chains

1 JavaScript variable scope

1.1 Function scope

There is no block scope: The scope is not surrounded by {}, and its scope is determined by the function, so the curly brackets in the statement such as If/for are not separate scopes.

As mentioned above, the local variables defined in the function by JS are only visible inside the function, which is called the scope of the function.

Nested scope variable Search rules: When a variable is referenced in a function, JS searches the current function scope and, if it is not found, searches its upper-level scope until it is scoped to the global scope.

[JavaScript] view Plaincopyprint?

1. var value = ' Global ';
2. var f1 = function () {
3. Console.log (v1); Global
4. };
5. F1 ();
6. var F2 = function () {
7. var v1 = ' local ';
8. Console.log (v1); Local
9. };
10. F2 ();

Lexical scope rules: the nested relationship of a function is determined when it is defined, not when it is called, that is, the lexical scope, that is, the nested relationship is determined by the lexical analysis, and the runtime is determined.

[JavaScript] view Plaincopyprint?

1. var v1 = ' global ';
2. var f1 = function () {
3. Console.log (v1);
4. }
5. F1 (); Global
6. var F2 = function () {
7. var v1 = ' local ';
8. F1 ();
9. };
10. F2 (); Global

With respect to the interaction of these two rules, the local variables defined anywhere within the function are defined when entering the function, but uninitialized, that is, undefined, until the variable is assigned the value is initialized, so if we access the uninitialized variable, we get undefined's description.

[JavaScript] view Plaincopyprint?

1. var v1 = ' global ';
2. var f = function () {
3. Console.log (v1); Undefined
4. var v1 = ' local ';
5. };

1.2 Global scope

Global scope variables are properties of global objects that can be accessed directly in any function, without the need for global objects, but with global objects that provide search efficiency.

Variables that meet the following conditions belong to the global scope:

Variables defined at the outermost layer

Properties of global objects

Hide the defined variables anywhere.

2 closures

2.1 Definition of Decoration

[JavaScript] view Plaincopyprint?

1. Function F1 () {
2. Context define
3. function F2 () {
4. Func define
5. };
6. return F2;
7. };
8. F2 (); Get the context in F1

In a non-functional programming language such as C + + +, we can also define a function pointer and return it, but the outer function defines the context information for the inner function at the end of execution, and in the closure, the returned function is saved, and the context information of the returned function is included. (supported by the lexical scope) and after the closure is returned, the context information is created separately, allowing multiple, separate closures to be generated.

2.2 Use of closures

Closures have two uses, one is to facilitate the implementation of nested callback functions, and the second is to hide the details of the object.

For the former, Nodejs's programming style has been able to explain the problem, the two latter, for the internal variables inside the function is not visible outside, but can provide access to the function to access and modify the corresponding local variables, so as to achieve the intent of OO encapsulation.

3 objects

In a type-based language, an object is instantiated by a class, and JS is a prototype-based system in which objects are generated by prototype replication.

3.1 Creation and access of objects

The object in JavaScript is actually an associative array of attributes, consisting of names and values. The object can be created by the new object () or {}. For creating a Simple object, you can use the object initializer to create an object, which is the {} literal value to create the objects, the object's property name can be a string of plus ', or it can be unquoted. This is no different to JS, when accessing the properties of an object, you can use a period or an associative array [' name '], the advantage of which is that when we do not know the object property name, the variable can be used as the index of the associative array.

3.2 Constructors

We can also use custom constructors to generate objects so that more objects can be instantiated. Constructors are also functions, we need to use uppercase function names. You can define member variables, member functions, and so on in a function.

3.3 Context Objects

In JS, the context object is the this pointer, which is the environment where the function is called. Its purpose is to refer to the object itself within the function to invoke it. The presence of this will have an impact on the static scope described earlier, adding dynamic content.

As can be seen from the example, we can refer to the function by different variables and invoke the context in different ways.

Transitive and binding contexts

JavaScript functions can be dynamically bound to a specific context through call and apply.

If you want to permanently bind the context, you can use the BIND function, it is important to note that multiple bind on the same function is ineffective.

[JavaScript] view Plaincopyprint?

1. var person = function () {
2. Name: ' Noname ',
3. Getname:function () {console.log (this.name);}
4. };
6. var bill = {name: ' Bill '};
7. Person.getname (); Noname
8. Bill.getname = Person.getname;
9. Bill.getname (); Bill
10. name = ' JavaScript ';
11. func = Person.getname;
12. Func (); Javascript

3.4 Prototypes

When creating an object, we should define a generic member within the constructor, but rather its prototype definition member function.

Below we will mainly introduce the prototype chain

JS has two special objects: Object and function, both of which are constructors for generating objects.

Object.prototype is the ancestor of all objects, Function.prototype is the prototype of all functions, including constructors.

JS objects can be divided into three categories: User-created objects, constructor objects, prototype objects.

All objects have a __proto__ property that points to the prototype of this object.

The constructor object has a prototype, pointing to its prototype object, and when the object is created by this constructor, the __proto__ property of the newly created object will point to the prototype property of the constructor.

The prototype object has a constructor property that points to its corresponding constructor.

function Foo () {}
var obj = new Object ();
var foo = new Foo ();

JavaScript Concept Summary: Scopes, closures, objects and prototype chains