JS anonymous functions and Closures (javascript Advanced programming 3rd Edition)

A anonymous Functions

Common Functions

function box () {// functions name is box

Return ' Lee ';

}

Anonymous Functions

function () {// anonymous functions, error

Return ' Lee ';

}

self-executing with an expression

(function box () {// encapsulated as an expression

Alert (' Lee ');

})(); () represents the execution function, and the argument

assigning anonymous functions to variables

var box = function () {// assign anonymous function to variable

Return ' Lee ';

};

Alert (box ()); similar to call methods and function calls

anonymous functions in a function

function Box () {

return function () {/// function anonymous functions, resulting in closures

Return ' Lee ';

}

}

Alert (box () ()); Calling anonymous functions

Two Closed Package

Closures are functions that have access to variables in another function scope, and the common way to create closures is to create another function inside one function and access the local variables of the function through another Function.

you can return a local variable by closing a packet

function Box () {

var user = ' Lee ';

return function () {//return box () local variable via anonymous function

Return user;

};

}

Alert (box () ()); direct call to anonymous function return value via box () ( )

var b = Box ();

Alert (b ()); Another call to the anonymous function returns a value

the use of closures has one advantage, but also its disadvantage: it is possible to put local variables in memory, you can avoid the use of global variables. ( global variable pollution causes application unpredictability, and each module can invoke a disaster, so it is recommended to use a private, encapsulated local variable ).

to accumulate by global variables

var age = 100; Global Variables

function Box () {

Age + +; the module level can call global variables and accumulate

}

Box (); Execute function, accumulate

Alert (age); Output Global Variables

accumulation cannot be achieved by local variables

function Box () {

var age = 100;

Age + +; Accumulate

Return age;

}

Alert (box ()); 101

Alert (box ()); 101, unable to implement because it was initialized again

the accumulation of local variables can be realized by closures

function Box () {

var age = 100;

return function () {

Age + +;

Return age;

}

}

var b = Box (); Get function

Alert (b ()); Calling anonymous functions

Alert (b ()); the second call to the anonymous function implements the cumulative

PS: Because the local variable returned by the scope in the closure is not destroyed immediately, it may consume more memory. Excessive use of closures can result in degraded performance, and it is recommended that closures be used when necessary.

The mechanism of the scope chain causes a problem in which any variable obtained by an anonymous function in the loop is the last Value.

an anonymous function is included in the loop

function Box () {

var arr = [];

for (var i = 0; i < 5; i++) {

arr[i] = function () {

Return i;

};

}

Return arr;

}

var b = Box (); get an array of functions

Alert (b.length); get the function set length

for (var i = 0; i < b.length; i++) {

Alert (b[i] ()); output The value of each function, which is the last value

}

the above example outputs a result of 5, which is the maximum I valueobtained after the loop . Because b[i] calls an anonymous function, the anonymous function is not self-executing, and when the callis made,box () is executed,i have already become 5 , so the end result is 5 a 5 .

the loop contains anonymous functions - change 1, self-executing anonymous functions

function Box () {

var arr = [];

for (var i = 0; i < 5; i++) {

arr[i] = (function (num) {// self-executing

Return num;

}) (i); and to pass the argument

}

Return arr;

}

var b = Box ();

for (var i = 0; i < b.length; i++) {

Alert (b[i]); This returns an array, which can be printed directly .

}

in 1 , we let the anonymous function execute itself, resulting in an array instead of a function that ultimately returns to a[i] . The value of 0,1,2,3,4 is retained in the resulting b[0]-b[4] .

The loop contains an anonymous function - change 2, anonymous function, and then do an anonymous function

function Box () {

var arr = [];

for (var i = 0; i < 5; i++) {

arr[i] = (function (num) {

return function () {// direct return value, change 2 to return

Return num; principle and change 1 as

}

}) (i);

}

Return arr;

}

var b = Box ();

for (var i = 0; i < b.length; i++) {

Alert (b[i] ()); This is done through the b[i] () function call .

}

in 1 and 2 , we execute it by anonymous function and immediately assign the result to a[i]. Each i, is the caller passed by value, so the final return is the specified increment of i. instead of Iin the box () function .

about This object

The use of this object in closures can also cause some problemswhen the this object is bound at run time based on the execution environment of the function, if this is in the global scope window, which points to the object if it is inside the Object. closures, however, point to window at run time , because closures do not belong to properties or methods of this Object.

var user = ' The Window ';

var obj = {

User: ' The Object ',

Getuserfunction:function () {

return function () {// closures are not part of obj, This is pointing to window

Return this.user;

};

}

};

Alert (obj.getuserfunction () ()); The window

can force point to an object

Alert (obj.getuserfunction (). Call (obj)); The Object

You can also get objects from the previous scope

Getuserfunction:function () {

var = this; object from the Object's method

return function () {

Return that.user;

};

}

Memory leaks

because The JScript objects and DOM objects of IE use different garbage collection methods, so closures can cause problems in Ie. Is the problem of memory leaks, which means that elements residing in memory cannot be destroyed. The following code has two knowledge points that have not been learned, one is DOM, the other is an Event.

function Box () {

var odiv = document.getElementById (' odiv '); Odiv has been in memory since it was run out

Odiv.onclick = function () {

Alert (odiv.innerhtml); The memory leaks are caused by odiv here.

};

}

Box ();

then the odiv should be dereferenced at the end to avoid a memory Leak.

function Box () {

var odiv = document.getElementById (' odiv ');

var text = odiv.innerhtml;

Odiv.onclick = function () {

Alert (text);

};

Odiv = null; de-referencing

}

PS: If you do not use dereference, you need to wait until the browser is closed to Release.

Mimic Block-level Scopes

JavaScript does not have the concept of block-scoped Scopes.

function Box (count) {

For (var i=0; i<count; i++) {}

Alert (i); I will not expire because I left the for block

}

Box (2);

function Box (count) {

For (var i=0; i<count; i++) {}

var i; even if you re-declare it, it won't be the previous value

Alert (i);

}

Box (2);

The above two examples illustrate JavaScript does not have a scope for block-level statements,and if() {} for () {} is not scoped, if so, the range i should be Destroyed. Even if you re-declare the same variable, it will not change its value.

JavaScript does not remind you that you have declared the same variable more than once; in this case, it will only turn a blind eye to the subsequent declarations ( if initialized, of course ). Using the impersonation Block-level scope avoids this problem.

Impersonation Block-level Scope ( private scope )

(function () {

This is a block level scope .

})();

overwrite with block-level scope ( private scope )

function Box (count) {

(function () {

for (var i = 0; i<count; i++) {}

})();

Alert (i); error, Unable to access

}

Box (2);

block-level scopes are used ( private Scope ) , any variables defined in the anonymous function will be destroyed at the end of Execution. This technique is often used outside the function in the global scope to limit the addition of too many variables and functions to the global scope. In general, we should add variables and functions to the global scope as little as Possible. In large projects, when Multi-person development, too many global variables and functions can easily lead to naming conflicts, causing catastrophic consequences. With Block-level scopes ( private scopes ), each developer can use his or her own variables without worrying about messing up the global scope.

(function () {

var box = [1,2,3,4];

Alert (box); Box came out, and I don't know.

})();

Using a block-level scope in a global scope reduces the memory problems that are used by closures because there is no reference to the anonymous Function. As soon as the function is executed, its scope chain can be destroyed immediately.

Private variables

JavaScript does not have the concept of private properties; all object properties are Public. however, There is a concept of a private variable. Any variable defined in a function can be considered a private variable, because these variables cannot be accessed outside of the Function.

function Box () {

var age = 100; Private variable, External unreachable

}

By creating a closure within the function, the closures can also access these variables through their own scope chain. With this, you can create a public method that accesses a private variable.

function Box () {

var age = 100; Private Variables

function Run () {// private Functions

Return ' running ... ';

}

This.get = function () {// External public Privileged method

Return age + Run ();

};

}

var box = new Box ();

Alert (box.get ());

You can access a private variable by constructing a method pass Parameter.

function Person (value) {

var user = value; This sentence can actually be omitted

This.getuser = function () {

Return user;

};

This.setuser = function (value) {

user = value;

};

}

however, the method of an object is created multiple times when it is called multiple Times. You can use static private variables to avoid this problem.

Static private variables

through Block-level scopes ( private Scope ) defines a private variable or function, you can also create an external public privileged Method.

(function () {

var age = 100;

Function Run () {

Return ' running ... ';

}

Box = function () {}; Construction Method

Box.prototype.go = function () {// prototype method

Return age + Run ();

};

})();

var box = new Box ();

Alert (box.go ());

the above object declaration, using the box = function () {} instead of function Box () {} because if you use the latter, it becomes a private function and cannot be accessed globally, so we use the Preceding.

(function () {

var user = ';

person = function (value) {

user = value;

};

Person.prototype.getUser = function () {

Return user;

};

Person.prototype.setUser = function (value) {

user = value;

}

})();

using prototype causes the method to be shared, and the user becomes a static Property. ( the so-called static property, which is a property shared in a different object ).

Module mode

previously, The constructor was used to create private variables and privileged METHODS. Then the object literal is created using module Mode.

var box = {// literal object, also singleton object

age:100,// This is a public attribute and will be changed to private

Run:function () {/// at this time the public function will be changed to private

Return ' running ... ';

};

};

Privatization variables and Functions:

var box = function () {

var age = 100;

Function Run () {

Return ' running ... ';

}

Return {// returns object directly

Go:function () {

Return age + Run ();

}

};

}();

The above example of a direct return object can also be written like this:

var box = function () {

var age = 100;

Function Run () {

Return ' running ... ';

}

var obj = {// Create literal object

Go:function () {

Return age + Run ();

}

};

Return obj; return This object

}();

The literal object declaration, in fact, can be regarded as a singleton pattern in the design pattern, so-called singleton mode, which is always an instance of preserving the Object.

Enhanced module mode, which is suitable for returning custom objects, that is, Constructors.

function Desk () {};

var box = function () {

var age = 100;

Function Run () {

Return ' running ... ';

}

var desk = new Desk (); you can instantiate a specific object

Desk.go = function () {

Return age + Run ();

};

Return desk;

}();

Alert (box.go ());

JS anonymous functions and Closures (javascript Advanced programming 3rd Edition)