Closure: a function that has access to variables in the scope of another function.

In essence, closure is a bridge that connects the inside and outside of a function.

A common way to create a closure is to create another function within one function.

function createComparisonFunction(propertyName){
	return function(object1, object2){
        //The following two lines of code access the variable propertyName in the external function
		var val1=object1[propertyName];
		var val2=object2[propertyName];
		
		if(val1<val2){
			return 1;
		}
		else if(val1>val2){
			return -1;
	 	}
		else{
			return 0;
		}
	};
}

Note: a closure can only take the last value of any variable in the containing function. Closures hold the entire variable object, not a particular variable.

<p id="help">Helpful notes will appear here</p>
<p>E-mail: <input type="text" id="email" name="email"></p>
<p>Name: <input type="text" id="name" name="name"></p>
<p>Age: <input type="text" id="age" name="age"></p>

//No matter which input the focus is on, the information displayed is about age
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();

After modification, the expected effect is achieved

Method 1: use more closures

//To achieve the expected effect, help points to the corresponding string in the helpText array
function showHelp(help) {
  document.getElementById('help').innerHTML = help;
}

function makeHelpCallback(help) {
  return function() {
    showHelp(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 = makeHelpCallback(item.help);
  }
}

setupHelp();

Method 2: use anonymous closure

//To achieve the expected effect, help points to the corresponding string in the helpText array
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++) {
    (function() {
       var item = helpText[i];
       document.getElementById(item.id).onfocus = function() {
         showHelp(item.help);
       }
    })(); // Now associate the item of the current loop with the event callback
  }
}

Method 3: use let keyword

//To achieve the expected effect, help points to the corresponding string in the helpText array
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++) {
    let item = helpText[i];
    document.getElementById(item.id).onfocus = function() {
      showHelp(item.help);
    }
  }
}

setupHelp();

See in detail: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures