[Javascript] Closure

Found a very good article in Chinese from the blog of Ruanyifeng which talking about the closure of javascript.

Before learning closure, it is better to understand the variable scope.

Learn by doing (all examples with # have been tested, try them):

  • #1 example
  • Global variable :

    var v1 = 1;
    function f1() {
      console.log(v1); // Display 1 in console
    }
    
  • #2 example
  • Local variable :

    function f2() {
      var v2 = 1;
    }
    console.log(v2); // Can't find variable:v2
    

    So local variable cannot be used outside of a function.

    Attention!
    There is an exception, local variable defined in function must use the “var” command, or it will be considered as a global variable, see an example:

  • #3 example
  • function f3() {
      v3 = 1;
    }
    f3(); // call function f3, the variable will be initialized 
    console.log(v3); // Display 1 in console
    

    So how to call a local variable, normally it seems impossible. Always a “but” here.

  • #4 example
  • function f4() {
      var v4 = 1;
      function f5() {
        var v5 = 1;
        console.log(v4);
      }
    }
    

    The local variable v4 of f4 is visible to f5, but in turn, v5 is not visible to f4.

    An example from StackOverflow, this is called “chain scope” in javascript :

    var currentScope = 0; // global scope
    (function () {
      var currentScope = 1, one = 'scope1';
      alert(currentScope);
      (function () {
        var currentScope = 2, two = 'scope2';
        alert(currentScope);
        (function () {
          var currentScope = 3, three = 'scope3';
          alert(currentScope);
          alert(one + two + three); // climb up the scope chain to get one and two
        }());
      }());
    }());
    

    Time to see closure.

  • #6 example
  •    function f6(){
        var n=999;
        nAdd=function(){n+=1}
        function f7(){
          console.log(n);
        }
        return f7;
      }
      var result=f6();
      result(); // Display 999
      nAdd();
      result(); // Display 1000
    

    Here f7 could be a closure function. In this example, it runs twice. The first value is 999 and second is 1000 after the execution of nAdd.
    nAdd is an anonymous function and a global variable(not using var).

    And which is to be mentioned is that f6 and f7 weren’t cleared in RAM by garbage collector because they were assigned to global variable.

    Attention!
    The variables used by closure will be saved in RAM, so make sure not abuse it when using.

    Advertisements

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s