Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts

    [RFI] Closures - real world use

    I'm writing an article about closures in JavaScript. Does any of the coding genii here know some real-worldly examples that I can include, besides the obvious use of closures to store private members of objects, which I already have as an example?


    (Alex Vincent, JKD, GlennGV, Jeff Mott, Beetle, Brothercake, Whammy and anyone I might have overlooked - I'm calling out to you here!)
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Round Rock, Texas
    Posts
    443
    Thanks
    0
    Thanked 0 Times in 0 Posts
    what the heck are closures?

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I second that Radar.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Last edited by glenngv; 02-03-2004 at 05:11 AM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    wouldn't the

    [array].sort().
    setTimeOut
    setInterval


    be ehh closures?

  • #6
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    And from the first two replies to this post I bet you understand why this article is sorely needed...

    Glenn: I personally think the HOP article has a better practical example, but in the end I didn't want to steal his. Do you have any ideas, expecially for template functions / function constructors? (I already have the object orientation-private members and the object binding for this and arguments as practical examples.)
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Round Rock, Texas
    Posts
    443
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I still don't fully grock it; but inner classes in Java sounds like the same thing, so maybe it's not rocket surgery.

    If I understand correctly, closures may solve a practical problem - that of namespace....

    I love creating objects when I create javascript code. The object incapsulates it's own "global" variables nicely. BUT conventional JS object coding does not not solve the namespace problem for an object's functions. Function names are exposed to the HTML page in which it is included (or in-lined). And in particular I'd like to create utility functions that have the same name, for all my objects - printing out an objects properties for example. I guess you'd call this pseudo-overloading.

    re: crockford.com link
    For discussion's sake, not nitpicking...

    I think what he's calling "private members" are just local scope variables. This is how one get's namespace protection for an object's properties (members as he calls them).

    What he calls "priveleged methods" are simply the conventional way an object's methods are defined. His example "in-lines" the actual function code so to speak, but that's just a variation on a theme. The function's name is publicly exposed (a-la Janet Jackson), which is a problem one MUST solve to reach JavaScript reuseabilty nervana.


    bottom lines
    I did not know one could define a function w/in a function in JavaScript. Verwy Interwesting you wasskully wabbit!

    I always knew that a function is "just another object" in Javascript but I did not appreciate the implications- this closure stuff exploits it's potential.

    I was just staring blankly at http://en.wikipedia.org/wiki/Closure_(programming) If one speaks English, closures probably is no Einsteinian leap. Illustrating a feature using the same way of writing that one uses to formally define a language is no way to teach it.
    Last edited by RadarBob; 02-03-2004 at 01:40 PM.

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    Round Rock, Texas
    Posts
    443
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK, want to read something understandable?

    JavaScript the Definitive Guide fourth edition, page 173.
    Last edited by RadarBob; 02-03-2004 at 04:40 PM.

  • #9
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Originally posted by RadarBob
    I still don't fully grock it; but inner classes in Java sounds like the same thing, so maybe it's not rocket surgery.
    They address the same issues, yes.
    If I understand correctly, closures may solve a practical problem - that of namespace....
    Could you explain what you mean by the practical problem of namespace? The word "namespace" has several rather different meanings depending on what programming environment you come from.
    I love creating objects when I create javascript code. The object incapsulates it's own "global" variables nicely. BUT conventional JS object coding does not not solve the namespace problem for an object's functions. Function names are exposed to the HTML page in which it is included (or in-lined). And in particular I'd like to create utility functions that have the same name, for all my objects - printing out an objects properties for example. I guess you'd call this pseudo-overloading.
    Here JavaScript being functional at core comes into play. Functional languages traditionally doesn't do overloading, they do code forking.
    re: crockford.com link
    For discussion's sake, not nitpicking...

    I think what he's calling "private members" are just local scope variables. This is how one get's namespace protection for an object's properties (members as he calls them).
    Again, in a functional language, objects are procedures, and all the object orientation of functional languages is traditionally constructed based on three principles: Lexical scoping, closure creation, and a structural base model (structural languages, in difference to procedural and imperative, limits flow control to code forking. There are no flow breaking statements in structural languages, and the functional paradigm builds on top of the structural.)
    What he calls "priveleged methods" are simply the conventional way an object's methods are defined.
    Not really. You see, the functions HAVE to be declared in the constructor, because the constructor creates a closure. Again, this is how functional languages achieve object orientation.
    His example "in-lines" the actual function code so to speak, but that's just a variation on a theme. The function's name is publicly exposed (a-la Janet Jackson), which is a problem one MUST solve to reach JavaScript reuseabilty nervana.
    The function name may be read, yes, because you can read out the source of the public method that contains it. However, there is no way to access it by that name, short of actually reading it out from source code.
    bottom linesI did not know one could define a function w/in a function in JavaScript. Verwy Interwesting you wasskully wabbit!

    I always knew that a function is "just another object" in Javascript but I did not appreciate the implications- this closure stuff exploits it's potential.
    Closures is one of the most powerful features coming out of the functional paradigm. JavaScript is more of a functional language than an imperative in terms of features, so I think this feature should be lifted forward.
    I was just staring blankly at http://en.wikipedia.org/wiki/Closure_(programming) If one speaks English, closures probably is no Einsteinian leap. Illustrating a feature using the same way of writing that one uses to formally define a language is no way to teach it.
    That's not what he does. He gives a code sample in the language ML.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Location
    Round Rock, Texas
    Posts
    443
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Could you explain what you mean by the practical problem of namespace? The word "namespace" has several rather different meanings depending on what programming environment you come from.
    If I have the following:
    Code:
    function UserDefinedObject () {
       var myValue = null;  //local scope only. Other code can use same variable name. 
    
    // methods
       this.setValue = fetchIt;
    }
    
    function fetchIt() {
        // fetchIt code here.
    }
    The name of the function, fetchIt in this case, must be unique in the page in which this code may be included.

    As I understand it the following avoids the problem:
    Code:
    function UserDefinedObject () {
       var myValue = null;  
    
    // methods
       this.setValue = function () { //fetchIt code here};
    }
    Now the function is literally inside the object definition, just like myValue, and thus other code can have a setValue function that will not be ambiguous.

  • #11
    Regular Coder
    Join Date
    Jun 2002
    Location
    Round Rock, Texas
    Posts
    443
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Are the following two equivelent? Asked another way; what are the scope, inheretance, other(?) issues here?
    Code:
    function UserDefinedObject_one () {
       // lots of good stuff
    }
    
    UserDefinedObject_one.prototype.setValue = function() {//set value code here};
    VICE

    Code:
    function UserDefinedObject_two () {
    
       function fetchIt () {
          // set value code here
       }
    }

  • #12
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    No. JavaScript is lexically scoped, not dynamically scoped. That means that identifier names in a scope "shadows" identifiers in shallower (or lower, depending on terminology) scopes, and is in turned shadowed by identifiers in deeper (or higher) scopes. (ie variable names in a function scope are separate from variables in the global scope, and overrides the global variable when you use that identifier.)

    An example:
    Code:
    var
        x='ex';
    function fn(x){
        var
            t='shallow: ('+x+');';
        function fn(x){
            var
                t='deep: "'+x+'";';
            return t;
        }
        return fn(t);
    }
    var
        t='global: {'+x+'};';
    fn(t); // => 'deep: "shallow: [global: {ex};];";'
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #13
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Ah, here's the deal: Each scope may only contain one object mapped to a certain identifier. The JavaScript parser will first do one parsing run of the code, compiling all functions, and declaring all variables (though NOT defining them). That means that functions will technically be declared and defined already, variables will only be declared. When finished it will go over the code again, this time executing it. This means that the last function with the given identifier will be the one that is defined. Variables will on the other hand not be defined until the definition is encountered in the execution run. This process is the same for functions, but note: It's done EACH TIME THE FUNCTION EXECUTES, not the single time the function is compiled. In a way, you can consider the global scope to be a closure you are operating within. That means that as long as you declare the function in a separate scope, you can use as many functions of that name as you wish.

    A demonstration:
    Code:
    var
        a=[];
    function t(){
        return false;
    }
    a.push(t);
    var
        t='global';
    a.push(t);
    function t(){
        return true;
    }
    a.push(t);
    t=function(){
        return true;
    };
    a.push(t);
    alert(a) // => function t(){return true;}, 'global', 'global', function (){return true;}
    Note the difference between the first and the last functions - one is named, the other is not.
    Last edited by liorean; 02-03-2004 at 09:02 PM.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #14
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts

    Resolving onload conflicts

    Originally posted by liorean

    Glenn: I personally think the HOP article has a better practical example, but in the end I didn't want to steal his. Do you have any ideas, expecially for template functions / function constructors? (I already have the object orientation-private members and the object binding for this and arguments as practical examples.)
    I don't know if this is a good practical application of closures in javascript.

    One of the main problems of combining multiple scripts from different authors is the onload conflict. Combining the onload handlers (without cancelling each other out) is the common problem facing newbie javascripters. By using functions as arguments and return values, you can easily fix the conflict.

    Code:
    function addWindowOnload(f){
      var wo = window.onload;
      return (wo) ? function(){wo();f()}:f;
    }
    
    function func1(){
      alert('function 1');
    }
    
    function func2(msg){
      alert(msg);
    }
    
    var func3 = new Function("alert('function 3')");
    var func4 = function(){alert('function 4')}
    
    window.onload = func1; //this type of assignment must be the first onload handler
    
    //subsequent onload handlers
    window.onload = addWindowOnload(function(){func2('function 2')}); 
    window.onload = addWindowOnload(func3);
    window.onload = addWindowOnload(func4);
    Last edited by glenngv; 02-04-2004 at 08:34 AM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •