Introduction to closures in JavaScript _ javascript tips-js tutorial

This article mainly introduces the closures in JavaScript. this article describes the javacripclosure, Javscript closure and this, Javscript closure, and read/write variables, A friend may refer to the so-called closure: the internal function reads variables other than the current function, that is, the context environment in which the function is created.

The Code is as follows:

Function hello (){
Var char = "hello, world ";
Function print (){
Console. log (char );
};
Return print ();
}

Note that the print function references the char variable of the external hello function, so here we can return

The Code is as follows:

Hello, world

In a sense, this function should be attributed to the scope. Of course, there is no way to directly access char unless an error occurs when we declare this variable. For example

The Code is as follows:

Function hello (){
Char = "hello, world ";
Function print (){
Console. log (char );
};
Return print ();
}

Only because a var is missing.

The Code is as follows:

Here hello is a closure. A closure is a special object. It consists of two parts: the function and the environment for creating the function. The environment consists of any local variables in the scope when the closure is created.

Javscript closure and this

Note that when reading this and arguments, problems may occur.

The Code is as follows:

Function hello (){
This. char = "hello, world ";
Function output (){
Char = "I'm no hello world ";
Console. log (this. char );
};
Return output ();
}

Of course, this example is not very relevant. so, we need an additional example to explain this problem. Here we will refer to an example in Javascript advanced programming to illustrate this problem.

The Code is as follows:

Var name = "The window ";

Var object = {
Name: "My Object ",

GetNameFunc: function (){
Return function (){
Return this. name;
}
}
};
Object. getNameFunc ()()

The solution is to save a temporary variable that, as mentioned in the previous article about Javascript's this.

The Code is as follows:

Var name = "The window ";
Var object = {
Name: "My Object ",

GetNameFunc: function (){
Var that = this;
Return function (){
Return that. name;
}
}
};
Object. getNameFunc ()()

Javscript closure and read/write Variables
It is worth noting that we can also modify these variables if we haven't processed them well.

The Code is as follows:

Function hello (){
Var char = "hello, world ";
Return {
Set: function (string ){
Return char = string;
},
Print: function (){
Console. log (char)
}
}
}
Var say = hello ();
Say. set ('new hello, World ')
Say. print () // new hello world

Javascript closure and Performance

Reference MDC

The Code is as follows:

If a closure is not required for some special tasks, it is unwise to create a function in other functions unless necessary, because the closure has a negative impact on script performance, including processing speed and memory consumption.

This article also says.

The Code is as follows:

For example, when creating a new object or class, the method should usually be associated with the object prototype, rather than being defined in the object constructor. This is because each time the constructor is called, the method will be assigned a value again (that is, for each object creation ).