In-depth explanation of closure in JavaScript

Introduction

Closure is a very powerful feature in JavaScript. The so-called closure is a function within a function. The inner function can access the scope of the outer function, so that closures can be used to do some more powerful work.

Today I will give you a detailed introduction to closures.

Functions within functions

We mentioned that functions within functions can access variables in the parent function scope. Let's look at an example:

function parentFunction() {
 var address = 'flydean.com'; 
 function alertAddress() { 
 alert(address); 
 }
 alertAddress();
}
parentFunction();

In the above example, we define a variable address in parentFunction, and define an alertAddress method inside parentFunction, and access the address variable defined in the external function inside this method.

There is no problem running the above code, and the data can be accessed correctly.

Closure

Now that we have functions within functions, what are closures?

Let’s look at the following example:

function parentFunction() {
 var address = 'flydean.com'; 
 function alertAddress() { 
 alert(address); 
 }
 return alertAddress;
}
var myFunc = parentFunction();
myFunc();

This example is very similar to the first example, except that we return the inner function and assign it to myFunc.

Next we called myFunc directly.

MyFunc accesses the address variable in parentFunction, although parentFunction has already completed execution and returned.

But when we call myFunc, we can still access the address variable. This is closure.

This feature of closure is very useful. We can use closure to generate function factory as shown below:

function makeAdder(x) {
 return function(y) {
 return x + y;
 };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2)); // 7
console.log(add10(2)); // 12

Add5 and add10 are both closures, which are created by the makeAdder function factory. By passing different x parameters, we get different bases of the add method.

Finally, two different add methods are generated.

Using the concept of function factory, we can consider a practical application of closure. For example, we have three buttons on the page, and by clicking these buttons we can modify the font.

We can first generate three methods through function factory:

function makeSizer(size) {
 return function() {
 document.body.style.fontSize = size + 'px';
 };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

With these three methods, we bind the DOM element to the callback method:

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

Using closures to implement private methods

Compared with Java, Java has private access descriptors. Through private, we can specify that the method can only be accessed within the class.

Of course, there is no such thing in JS, but we can use closures to achieve the same effect.

var counter = (function() {
 var privateCounter = 0;
 function changeBy(val) {
 privateCounter += val;
 }

 return {
 increment: function() {
  changeBy(1);
 },

 decrement: function() {
  changeBy(-1);
 },

 value: function() {
  return privateCounter;
 }
 };
})();

console.log(counter.value()); // 0.

counter.increment();
counter.increment();
console.log(counter.value()); // 2.

counter.decrement();
console.log(counter.value()); // 1.

We defined the privateCounter property and changeBy method in the parent function, but these methods can only be accessed in the internal function.

We use the concept of closure to encapsulate these properties and methods and expose them to external use, ultimately achieving the effect of private variable and method encapsulation.

Scope Chain of Closures

For each closure, there is a scope, including the scope of the function itself, the scope of the parent function, and the global scope.

If we embed a new function inside a function, a scope chain will be formed, which we call a scope chain.

Take a look at an example below:

// global scope
var e = 10;
function sum(a){
 return function(b){
 return function(c){
  // outer functions scope
  return function(d){
  // local scope
  return a + b + c + d + e;
  }
 }
 }
}

console.log(sum(1)(2)(3)(4)); // log 20

Common Problems with Closures

The first common problem is using closures in loop traversal. Let's look at an example:

function showHelp(help) {
 document.getElementById('help').innerHTML = help;
}

function setupHelp() {
 var helpText = [
  {'id': 'email', 'help': 'Your e-mail address'},
  {'id': 'name', 'help': 'Your full name'},
  {'id': 'age', 'help': 'Your age (you must be over 16)'}
 ];

 for (var i = 0; i < helpText.length; i++) {
 var item = helpText[i];
 document.getElementById(item.id).onfocus = function() {
  showHelp(item.help);
 }
 }
}

setupHelp();

In the above example, we created a setupHelp function. In setupHelp, the onfocus method is assigned a closure, so the item in the closure can access the item variable defined in the external function.

Because we assign values ​​inside a loop, we actually create three closures, but these three closures share the same scope of the outer function.

Our intention is that different ids trigger different help messages. But if we actually execute it, we will find that no matter which id it is, the final message is the last one.

Because onfocus is triggered only after the closure is created, the value of item actually changes at this time. After the loop ends, the value of item has pointed to the last element, so all that is displayed is the help message of the last data.

How to solve this problem?

The simplest way is to use the let descriptor introduced in ES6 to define the item as the scope of the block. A new item will be created each time the loop is executed, thus keeping the value of the item in the closure unchanged.

 for (let i = 0; i < helpText.length; i++) {
 let item = helpText[i];
 document.getElementById(item.id).onfocus = function() {
  showHelp(item.help);
 }
 }

Another way is to create another closure:

function makeHelpCallback(help) {
 return function() {
 showHelp(help);
 };
}

 for (var i = 0; i < helpText.length; i++) {
 var item = helpText[i];
 document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
 }

The concept of function factory mentioned earlier is used here, and we create different scope environments for different closures.

Another way is to include the item in a new function scope, so that each creation is a new item, which is similar to the principle of let:

 for (var i = 0; i < helpText.length; i++) {
  (function() {
    var item = helpText[i];
    document.getElementById(item.id).onfocus = function() {
     showHelp(item.help);
    }
  })(); 
 }

The second common problem is memory leaks.

 function parentFunction(paramA)
 {
 var a = paramA;
 function childFunction()
 {
 return a + 2;
 }
 return childFunction();
 }

In the above example, childFunction refers to the variable a of parentFunction. As long as childFunction is still in use, a cannot be released, causing parentFunction to be unable to be garbage collected.

Closure performance issues

We define an object and access its private properties through a closure:

function MyObject(name, message) {
 this.name = name.toString();
 this.message = message.toString();
 this.getName = function() {
  return this.name;
 };

 this.getMessage = function() {
  return this.message;
 };
}

What's wrong with the above object?

The problem with the above object is that for each new object, the getName and getMessage methods will be copied, which on the one hand causes content redundancy, and on the other hand affects performance.

Generally speaking, we define the object's methods on the prototype:

function MyObject(name, message) {
 this.name = name.toString();
 this.message = message.toString();
}
MyObject.prototype.getName = function() {
 return this.name;
};
MyObject.prototype.getMessage = function() {
 return this.message;
};

Note that we should not rewrite the entire prototype directly, which will lead to unknown errors. We only need to rewrite specific methods as needed.

Summarize

Closures are a very powerful and useful concept in JS. I hope you will like them.

This is the end of this article about closure in JavaScript. For more relevant content about closure in JavaScript, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!