javascript闭包

来源：互联网发布：淘宝好评语100字编辑：程序博客网时间：2024/05/22 09:42

在网上查看javascript闭包相关资料，看例子看得懂，感觉明白了，不看的时候又有点模糊，应该属于懵懵懂懂的。

特此将网上几个例子记下，方便以后回顾！

example 01：

function makeFunc() {  var name = "Mozilla";  function displayName() {    alert(name);  }  return displayName;}var myFunc = makeFunc();myFunc();

example 02：为add5和add10分别返回一个方法，返回方法中的x指向外层方法的x,x为两个方法共享，均可修改！

function makeAdder(x) {  return function(y) {    return x + y;  };}var add5 = makeAdder(5);var add10 = makeAdder(10);console.log(add5(2));  // 7console.log(add10(2)); // 12

example 03：与例02一样，返回的方法均可操控外层方法参数。但是不同实例中不能相互影响修改，闭包返回的方法只针对同一实例（可理解为java中new）

var counter = (function() {  var privateCounter = 0;  function changeBy(val) {    privateCounter += val;  }  return {    increment: function() {      changeBy(1);    },    decrement: function() {      changeBy(-1);    },    value: function() {      return privateCounter;    }  };   })();alert(counter.value()); /* Alerts 0 */counter.increment();counter.increment();alert(counter.value()); /* Alerts 2 */counter.decrement();alert(counter.value()); /* Alerts 1 */

var makeCounter = function() {  var privateCounter = 0;  function changeBy(val) {    privateCounter += val;  }  return {    increment: function() {      changeBy(1);    },    decrement: function() {      changeBy(-1);    },    value: function() {      return privateCounter;    }  }  };var counter1 = makeCounter();var counter2 = makeCounter();alert(counter1.value()); /* Alerts 0 */counter1.increment();counter1.increment();alert(counter1.value()); /* Alerts 2 */counter1.decrement();alert(counter1.value()); /* Alerts 1 */alert(counter2.value()); /* Alerts 0 */

example：04 为每个p标签添加事件，此时并没有立即执行此方法，只是指向方法。因此循环完后，item为最后一个，所有方法都访问它，因此都是最后一个；另外事件方法立即执行，则每个help都会出现一遍，最后还是最后一个！

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

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();

为事件添加闭包，循环了三次，返回了三个方法。使用闭包，则上一级的makeHelpCallback(help)资源不会被关闭，因此每个方法都可以向上找到自己的help；上面没有使用闭包，所以造成每个help都是循环完后的help，也就是最后一个；立即执行了事件方法，方法执行完，资源关闭。当触发事件是再去调用方法，根据引用去找方法，但此时的help就是最后一个了

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();

参考：Javascript Closures

0 0