SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Jul 2004
    Location
    Tacoma, WA
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question What kind of a function call is this

    I just ran into this script today and I don't know what this really does. I'm not sure what this is. It looks like an anonymous function that has a function within a function that calls a function but when I test this it actually just prints to the screen "function wtf(){document.write(wtf)} ;"

    I'm confused here. Any help would be appreciated. Thanks!

    Code:
    <script type="text/javascript">
    	//<![CDATA[
    	(
    		function() 
    		{
    			function wtf() 
    			{ 
    				document.write(wtf);
    			}
    			wtf();
    		}
    	)();
    	//]]>
    </script>

  2. #2
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have re-written the function (renaming a few things) to make it OO,

    Code javascript:
    function MyClass() 
    		{  
    		  this.displayTest = testMethod; 
     
    		  function testMethod() 
    		  { 
    		    document.write(testMethod);
    		  }
    		}
    	testObject = new MyClass;  //Instantiating the MyClass class
    	testObject.displayTest();  //Invoking the Method testMethod

    I hope this helps.

    Regards,
    YMas
    Last edited by YMas; Feb 23, 2008 at 11:36. Reason: I apologise for misreading the code snippet

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2004
    Location
    Tacoma, WA
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for helping me out here. Just so I'm understanding this correctly they are setting a property with the value of the method testMethod.

    And then they use document.write to write out the entire method text of testMethod(??)

    So when you did testObject.displayTest(); because this property is assigned a method now it acts as a method?

    Would there be anything wrong with the first way I showed the function or would it be better to show the function the way you wrote it? Personally I like the way you wrote it because I know what it says.

  4. #4
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    t3,
    I apologise for not reading your code snippet properly.

    The initial code you provided was an example of Functional JavaScript, not OO JavaScript as I previously thought.

    Let's go through your initial code, which is an example of a self-invoking function:

    • The round parentheses, within which the function is enclosed, and the argument parantheses which follow tell the JavaScript parser to run the function (hence the name self-invoking).
    • When the function is invoked, the function call wtf() runs the function wtf defined directly above it, resulting in the syntax of the function wtf being written on the page.


    Try running this, look at the source and follow the alerts:
    Code javascript:
    (	
      function()  //Anonymous Function 
      {
        alert("Anonymous function has been invoked");
        function wtf() 
        { 
          alert("We are in wtf()")
          document.write(wtf);
        }
        alert("About to make a call to the function wtf()");
        wtf();
        alert("End");
      }
    )();

    You will see "About to make a call to the function wtf()" before you see "We are in wtf()", as you need to call a function for it to run.

    I don't think there's anything wrong with the first way.

    Which of the two ways to use depends entirely on the context within which the function will be implemented.

    I hope this helps.

    Regards,
    YMas
    Last edited by YMas; Feb 23, 2008 at 14:47.

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2004
    Location
    Tacoma, WA
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Totally helps! I was thinking that it was more along the lines of encapsulation or rather self encapsulation if that even exists. But this explains that a bit more. I just haven't ever ran across this style of syntax before so I wasn't confident on what it was.

    Thanks so much YMas.

  6. #6
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From OOP, hiding the details of object implementation is referred to as encapsulation, so if you look at the MyClass Class in my first post, I have encapsulated testMethod — you cannot access testMethod unless you instantiate the class.

    I first came across the notion of self-invoking functions on Dustin Diaz's site (Link).

    Thanks,
    YMas

  7. #7
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The self-invoking function pattern is used for confining the code within. In javascript, code run outside a function is implicitly global. By putting it inside a self-invoking function, any such implicit globals are limited to the scope of that (temporary) function. Thus, the code doesn't "leak".
    Or, to put it in an example:
    Code:
    (function() {
      var foo = 42;
    })();
    assert(typeof(foo) == "undefined"); // true

  8. #8
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    kyber, but it doesn't fully enclose anything unless you use the 'var' keyword, no?

    Code:
    (function() { obj = { 'one':'two' }; person = 'john'; })();
    obj and person would still be made global... so it's useless if you still don't use the var keyword (and you SHOULD).


Bookmarks

Posting Permissions

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