Closure code

<pre>// from the Mozilla Developer Center website on 'Closures'
// https://developer.mozilla.org/en/JavaScript/Guide/Closures

// not a closure
function init() {
  var name = "Mozilla";
  function displayName() {
    alert(name);
  }
  displayName();
}

// a closure
function makeFunc() {
  var name = "Mozilla";
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
myFunc();

// a 'slightly more interesting' closure
function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

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

print(add5(2));
print(add10(2));

// practical closures
body  {
  font-family: Helvetica, Arial, sans-serif;
  font-size:   12 px;
}

h1  {
  font-size: 1.5em;
}

h2  {
  font-size: 1.2em;
}

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

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

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

<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>

// emulating private methods with closures

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

// multiple counters
var makeCounter = function() {
  var privateCounter = 0;
  function changeBy(val)  {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }
};

</pre>

Advertisement