Jquery : Understanding Syntax

Question

i am following Jquery video lectures from tutsplus . in a lecture instructor is using this code to show/ hide contact form on button click

var ContactForm = {
 container: $('#contact'),
 init: function(){
 $('<button></button>', {
 text:"Contact Us"
 })
 .insertAfter('article')
 .on('click', this.show);
 },
 show: function () {
 ContactForm.close.call(ContactForm.container);
 ContactForm.container.show();
 },
 close: function() {
 var $this = $(this);
 console.log($this);
 $('span.close').on('click',function (){
 $this.hide();
 });
 }
};

i am unable to get what instructor explains about few of these points so if you please help me to understand about this syntax

init :function (), // i know about anonymous or named functions only

• how we can access close/show with ContactForm.
• whats the difference when we say this.show (in on handler) and $(this).show

Answer 1

Actually, init: function() { } isn't an anonymous function at all. I will try to answer the numerous parts of your question as best as possible.

ContactForm is an object, and thus has properties and methods that can be accessed through JS. For example, you may access the show() and close() methods from outside of the object by using its literal name, for example:

ContactForm.show();
ContactForm.close();

Since it is an object, you may also reference it by using the this keyword inside of it. For example, if you wanted to call the show() method from inside the init() method, you could do this:

var ContactForm = {
 init: function() 
 {
 this.show(); // using this keyword.
 },
 show: function() 
 {
 },
 close: function()
 {
 }
}

In this particular instance, this === ContactForm. However, the syntax you indicated of $(this) is used to create a jQuery object (or collection) from a DOMElement object. For example, let's say that you wish to bind a callback function to an element's click event:

$('a').on('click', function() { 
 $(this) // <-- This now holds a jQuery object representing the clicked element
});

So, bearing all of that in mind:

Within the show() method, the first line calls the close() method of the ContactForm object. The code makes use of the Function's prototype call() method, which allows us to specify the value of this inside of the function. So, on the following line:

ContactForm.close.call(ContactForm.container);

The code is sending ContactForm.container (which is a jQuery object) to the close() method, so that it may be accessed by this:

var $this = $(this);

Inside of the close() method, this now === $('#contact') and not ContactForm.

• Yoshi: Note: var $this = $(this); inside the original code is actually superfluous. If called from the outside it will not work, and from within the object (like you described) this is already a jQuery object. In general the code may look nice on a first glance, on closer inspection not so much.

Answer 2

The init function is the function on ContactForm that you would call to hook up all this code to the DOM elements (therefore initializing the javascript). You should be able to access it by using ContactForm.init(); in the scope where ContactForm is defined. Same thing with the .show() and .close() functions - they should be available at ContactForm.show() from the scope where ContactForm is defined.

As the other answer mentions 'this' is referring to the scope of the current block and for example in this case with a click handler it will refer to the element being clicked. The difference between 'this' and '$(this)' is really just that the latter is wrapped in a jQuery selector, which will give you access to jQuery functions such as .show() and .hide(). Those are not available on the DOM element itself.