jQuery Function Implementation and Function Call?

What is the difference of calling function like:

testCall: function() and function testCall() in jQuery ?

Update:

Questions: Does usage of one over the another have some performance issues related to it OR it really does not matter which one you are using ?

Update 2

Also other thing that I noticed that whenn I am defining function using testCall: function() and I call it using this.testCall() i开发者_Python百科t works fine and am able to call it in any other function.

But when I am using function testCall() and I try to call it using testCall() in another function than I am getting errors and am not able to call it. Is this possible or there could be some other reason for the errors ?

In this example:

testCall: function()

testCall is now a function available on the object you're in, like this: object.testCall() It can access other functions, properties, etc inside this object if it needs to.

In this version:

function testCall()

testCall is just a globally available method, not scoped to the object or plugin, whatever you're dealing with, you can call it from anywhere, like this: testCall()

This is really a question about Javascript syntax (and semantics), not jQuery.

Both of those constructions define functions. This:

var x = {
  // ...
  name: function() { /* ... */ },
  // ...
};

defines a function (an anonymous function) and assigns it as the value of the property called "name" in the object being assigned to the variable "x".

This:

function name() {
  /* ... */
}

defines a function with the name "name". The effect is similar to:

var name = function() { /* ... */ };

but definitely different. However, for most purposes it's safe to think about them as being almost the same. The effect is that "name" is bound to the function in the lexically-enclosing scope. If you do that definition outside of any other function, then "name" becomes a property of the "window" object, and the function is therefore globally available. If that declaration is inside another function, then "name" is only available inside that function.

Usually you see the first form when you're doing something like setting up callbacks for some jQuery facility, like a UI plugin or $.ajax. You're giving jQuery a function that it should call upon something happening — an AJAX call finishing, or a use action like a mouse click, or completion of some sort of animation.

edit oh, and finally here's another note. If you define a function the second way, well then you can refer to that function by name and use it in an object definition (like the first example):

function globalFunction() {
  function localFunction() { /* ... */ };

  jQuery.something({
    x: 100, y: 100,
    callback: localFunction,
    // ...
  });
}

Many more such things are possible - functions are values in Javascript and can be tossed around as easily as numbers and strings.

The first (testCall: function()) is object literal notation for defining a function and assigning it to a property on an object (not shown). The function itself is anonymous; the property it is bound to has a name, but the function does not.

The second (function testCall()) is a named function.

Named functions have several advantages over anonymous ones, and so though you see the first format quite a lot, I would recommend using it sparingly if at all. Named functions can be reported usefully by your tools (debuggers and the like), whereas anonymous functions just show up as ? or (anonymous). More here.

For that reason, rather than this:

function doSomeNiftyAjaxyThing(foo) {
    $.ajax({
        url: "blah",
        success: function() {
            // Do something involving the successful result and `foo`
            foo.bar();
        }
    });
}

I would typically do this instead:

function doSomeNiftyAjaxyThing(foo) {
    $.ajax({
        url: "blah",
        success: niftySuccess
    });

    function niftySuccess() {
        // Do something involving the successful result and `foo`
        foo.bar();
    }
}

Not only does this keep my code a bit cleaner (er, to my mind), but it means that if something goes wrong inside niftySuccess, I've given the function a name my tools can report to me. Note that other than the fact that the function has a name, they're identical – both functions are closures over the foo argument and anything else inside doSomeNiftyAjaxyThing.

You might be tempted to give the function a name inline, like so:

function doSomeNiftyAjaxyThing(foo) {
    $.ajax({
        url: "blah",
        success: function niftySuccess() {  // <== change here, PROBLEMATIC
            // Do something involving the successful result and `foo`
            foo.bar();
        }
    });
}

There you're declaring a function with a name as an expression, and assigning the result of the expression to a property. Arguably you should be able to do that, but there are a series of implementation...anomalies in the various Javascript engines out there that prevent your being able to do that. (More in the article linked above, and in this article.)