Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Elaboration on elclanrs' answer.</p> <p><code>foo.bar</code> is a method; an instruction of how to do something. In object-oriented programming languages, the only object that can use that instruction is a <code>foo</code> or an object related to <code>foo</code>; but in JavaScript, anybody can try to run it if the code asks them to.</p> <p>In your second anonymous function, you are getting a method to run, running it, and returning the type of the result. However, it's not a <code>foo</code> that is running this function; it's anonymous, so the <code>window</code> is the object that's running it. The <code>window</code> runs <code>foo</code>, which tries to return <code>this.baz</code>; however, the <code>window</code> doesn't HAVE a <code>baz</code>, so that's why you're getting undefined.</p> <p>To test it further, try setting <code>window.baz</code> and see if you get the right result, and also try elclanrs' suggestion of using the <code>call()</code> method to ensure it gets called from a <code>foo</code>'s scope.</p> <p><strong>EDIT</strong></p> <p>You're right, the type of <code>arguments[0]</code> and <code>foo.bar</code> IS the same; they're both "function". I think the confusion is over JavaScript's treatment of functions as first-class objects.</p> <p>If you're familiar with object-oriented languages like Java or C++, then you would expect that when you call <code>bar</code>, it's always being called by a <code>foo</code> that has a <code>baz</code> property; however, this isn't the case in JavaScript. Any function can be called by ANY object, which means the result may or not make sense.</p> <p>The difference between the two, as elclanrs says, is all about the <code>.</code>. Let's say I made my own object <code>phew = {baz: 44}</code>. I could, validly, "steal" a method from <code>foo</code> like this: <code>phew.myMethod = foo.bar</code>. Now, <code>phew</code> knows the instructions contained in <code>bar</code>, and if I call <code>phew.myMethod()</code>, I would get 44 as my result because <code>phew</code> is calling the method, and <code>phew</code>'s <code>baz</code> is 44; it doesn't matter <em>where</em> the method is defined! All that matters is <em>what the method says to do</em>, and <code>bar</code> says to return the <code>baz</code> of whoever called it.</p> <p>So now, going back to your code, you're calling <code>arguments[0]()</code>. It does seem like it should be the same, but because functions are first-class objects, when you passed it as a parameter, all you really passed was a function called <code>bar</code>. When you called <code>arguments[0]()</code>, it was like calling <code>bar()</code>, which is different from calling <code>foo.bar()</code> just like it's different from calling <code>phew.myMethod()</code>, <strong>even though they all are exactly the same function</strong>. </p> <p>For more info, try <a href="https://stackoverflow.com/questions/705173/what-is-meant-by-first-class-object">this SO post</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload