JavaScript Concept Summary: Scope, closure, object and prototype chain __java

1 javascript variable scopes

1.1 function Scopes

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

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

Nested scope variable Search rule: When referencing a variable in a function, JS searches the current function scope and, if not found, searches its upper scope and continues to the global scope.

var  value = ' global ';
var f1 = function () {
  console.log (v1);   Global
};
F1 ();
var F2 = function () {
  var v1 = ' local ';
  Console.log (v1); Local
};
F2 ();

Lexical scope rule: a nested relationship of a function is determined when defined, not when invoked, that is, the lexical scope, that is, nested relationships are determined by lexical parsing, not runtime decisions.

var v1 = ' global ';
var f1 = function () {
  console.log (v1);  
}
F1 ();  Global
var F2 = function () {
  var v1 = ' local ';
  F1 ();
};
F2 ();  Global

For the interaction between the two rules, local variables defined anywhere within a function are already defined when they enter a function, but not initialized, that is, undefined until the variable is assigned to it, so if an uninitialized variable is accessed, we get a description of undefined.

var v1 = ' global ';
var f = function () {
  console.log (v1);   Undefined
  var v1 =  ' local ';

1.2 Global scope

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

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

Variables defined at the outermost

Properties of global objects

Any place to obscure the defined variables.

2 Closures

2.1 Definition of decoration

Function F1 () {
  //context define
  function F2 () {
   //func define 
 };
  return f2;
};
F2 (); Get the context in F1

In a non functional programming language such as C + +, we can also define the function pointer and return, but the context information defined for the inner function after the outer function finishes execution is destroyed, while in the closure, the returned function is saved, and the context information for the return function is included. (supported by the lexical scope) and after the closure is returned, the context information is created separately, allowing multiple instances of a single closure 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 already can explain the problem, to two the latter, to the function inside the local variable outside is not visible, but can provide the access function to access and modify the corresponding local variables, so as to achieve OO encapsulation intent.

3 Objects

In a type-based language, an object is instantiated by a class, and JS is a prototype based system, and the object is generated by a prototype copy.

3.1 creation and access of objects

The object in JavaScript is actually an associative array of attributes consisting of names and values. You can create an object by the new object () or {}. For creating a Simple object, you can use the object initializer to create the object, which is to create the object by {} literal value, and the object's property name can be a string of "plus" without quotes. This is no different for JS, when accessing the properties of an object, you can use a period or an associative array [' name '], which is the advantage of having a variable as the index of an associative array when we don't know the object's property name.

3.2 Constructors

We can also use custom constructors to generate objects so that we can instantiate more objects. 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, the environment where the function is called. The effect is to refer inside the function to the object itself that invoked it. The presence of this will have an impact on the static scope, adding dynamic content.

As can be seen from the example, we can invoke the context by different variables referencing the function.

Delivery and binding context

JavaScript functions can be dynamically bound to specific contexts by call and apply.

If you want a permanent binding context, you can use the BIND function, and note that multiple bind on the same function has no effect.

var person = {
  name: ' Noname ',
   getname:function () {console.log (this.name);}
;

var bill = {name: ' Bill '};
Person.getname (); Noname
bill.getname = person.getname;
Bill.getname ();         Bill
name = ' JavaScript ';
func = Person.getname;
Func ();         Javascript

3.4 Prototypes

When creating an object, we should define the general member within the constructor, but its prototype defines the member function.

Below we will introduce the prototype chain mainly

JS has two special objects: Object and function, which are constructors that generate objects.

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

JS can be divided into three types of objects: User Creation object, constructor object, prototype object.

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

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

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

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

References: "Node.js Development Guide"