JavaScript学习------闭包

闭包：指有权访问另一个函数作用域中变量的函数。

在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

创建闭包的常见方式就是在一个函数内部创建另一个函数。

function createComparisonFunction(propertyName){
	return function(object1, object2){
        //下面访两行代码访问了外部函数中的变量propertyName
		var val1=object1[propertyName];
		var val2=object2[propertyName];
		
		if(val1<val2){
			return 1;
		}
		else if(val1>val2){
			return -1;
	 	}
		else{
			return 0;
		}
	};
}

注意：闭包只能取得包含函数中任何变量的最后一个值。闭包所保存的是整个变量对象，而不是某个特殊的变量。

<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>

//无论焦点在哪个input上，显示的都是关于年龄的信息
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();

修改后，达到预期效果

方法一：使用更多的闭包

//达到预期效果，help 指向 helpText 数组中对应的字符串
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();

方法二：使用匿名闭包

//达到预期效果，help 指向 helpText 数组中对应的字符串
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);
       }
    })(); // 马上把当前循环项的item与事件回调相关联起来
  }
}

方法三：使用用let关键词

//达到预期效果，help 指向 helpText 数组中对应的字符串
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();

详细见：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures

JavaScript学习------闭包

猜你喜欢