0

First of all sorry for the vague title; couldn't think of a more appropriate wording. I'm relatively new to Javascript and web programming in general (although season in .NET desktop programming). I have been looking at the following coding pattern repeatedly in JS, especially with library functions such as jQuery UI:

$("#MyDiv").dialog({ ... });

My question is (thinking like a C# programmer), what is the type of $("#MyDiv")? How does dialog() become a member of this type? I can see that dialog() is defined in jQuery UI library and can be dynamically attached to any object. What's the magic here? What's C# equivalent of this; Extension methods?

Also, is there a way to get reference of the calling object inside this "attached" function?

dotNET
  • 33,414
  • 24
  • 162
  • 251
  • `$("#MyDiv")` is a type that belongs to the jQuery library, its not pure Javascript. think of jQuery as a collection of extension methods , like Linq in c# – Banana Jun 13 '14 at 07:17
  • Typically, you can reference the calling object (from the method) using `this`. For example, $('#mydiv').dialog({ ... }) => `this` is typically the DOM element (`#mydiv`) or a jQuery object representing the selection. – Jack Jun 13 '14 at 07:19
  • More information on constructor functions and prototype can be found here: http://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711 even though you call jquery ($) without new, a new jquery instance is returned. – HMR Jun 13 '14 at 09:11

2 Answers2

2

Here's a quick breakdown of:

$("#MyDiv").dialog({ ... });
  1. $ is a function. Though it looks like a special symbol, it's just a plain old javascript function.
  2. That function takes the argument "#MyDiv" and creates and returns a jQuery object.
  3. The jQuery UI library has made sure that all jQuery objects that are created have a method called .dialog() by adding that to the prototype of jQuery objects (an extension mechanism jQuery uses).
  4. So, the .dialog() part is calling the .dialog() method on the jQuery object that was just created and returned by the previous function.

In sequential steps:

  1. Call the $ function and pass it the "#MyDiv" selector argument.
  2. The $ function creates a jQuery object and looks up that selector and stores any DOM objects that match that selector in that jQuery object.
  3. The $ function then returns this new jQuery object.
  4. That jQuery object is then searched for a method called .dialog() and when that method is found it is executed on that object as in obj.method().
  5. The .dialog() method looks at the jQuery object it was called on (which the this pointer is set to) and it looks at the arguments passed to the .dialog() method and acts accordingly.
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Insightful. Thanks a bundle. – dotNET Jun 13 '14 at 07:25
  • the closest c# alternative for the selector i can think of is a lambda expression, as in `(object = > object.ID=="MyDiv")`, where '#' would be .ID, and '.' would be .Class, and no prefix would be .Type – Banana Jun 13 '14 at 07:25
2

$("#MyDiv") returns a jQuery object, and dialog is a method of the jQuery class.

Unlike languages like C++, Javascript allows methods to be added to classes on the fly. So when you load the jQuery UI library, it adds the dialog method to the jQuery class.

Inside the method, the special variable this contains a reference to the object that it was called on.

Barmar
  • 741,623
  • 53
  • 500
  • 612