Why jQuery do this: jQuery.fn.init.prototype = jQuery.fn?

by

The function jQuery.fn.init is the one that is executed when you call jQuery(".some-selector") or $(".some-selector"). You can see this in this snippet from jquery.js:

jQuery = window.jQuery = window.$ = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context );
}

So, in fact, the line you mention is critical to how jQuery allows the addition of functionality to jQuery objects, both inside jQuery itself and from plugins. This is the line:

jQuery.fn.init.prototype = jQuery.fn;

By assigning jQuery.fn as the prototype of this function (and because the first snippet uses ‘new’ to treat jQuery.fn.init as a constructor), this means the functionality added via jQuery.fn.whatever is immediately available on the objects returned by all jQuery calls.

So for example, a simple jQuery plugin might be created and used like this:

jQuery.fn.foo = function () { alert("foo!"); };
jQuery(".some-selector").foo();

When you declare ‘jQuery.fn.foo’ on the first line what you’re actually doing is adding that function to the prototype of all jQuery objects created with the jQuery function like the one on the second line. This allows you to simple call ‘foo()’ on the results of the jQuery function and invoke your plugin functions.

In short, writing jQuery plugins would be more verbose and subject to future breakage if the implementation details changed if this line didn’t exist in jQuery.

More Related Contents:

  1. How can I upload files asynchronously with jQuery?
  2. Why does my JavaScript code receive a “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error, while Postman does not?
  3. Stop form refreshing page on submit
  4. Variable doesn’t get returned from AJAX function
  5. navigator.geolocation.getCurrentPosition sometimes works sometimes doesn’t
  6. How to differentiate single click event and double click event?
  7. TypeError: p.easing[this.easing] is not a function
  8. Rails 5: how to use $(document).ready() with turbo-links
  9. How to unbind a listener that is calling event.preventDefault() (using jQuery)?
  10. Hide scrollbar while still being able to scroll with mouse/keyboard [duplicate]
  11. JavaScript/jQuery check broken links
  12. JavaScript – head, body or jQuery?
  13. How do I replace the entire HTML node using jQuery
  14. How to prevent simultaneous logins of the same user with Firebase?
  15. Change URL and redirect using jQuery
  16. How do I drag multiple elements at once with JavaScript or jQuery?
  17. Difference between screen.availHeight and window.height()
  18. Simulate drop file event
  19. jQuery x y document coordinates of DOM object
  20. How do I capture a key press (or keydown) event on a div element?
  21. Send form data using ajax
  22. How do you force your Javascript event to run first, regardless of the order in which the events were added?
  23. Selecting elements without jQuery
  24. Function not calling within an onclick event
  25. refresh div with jquery
  26. Remove everything within script and style tags
  27. JQuery AutoComplete, manually select first searched item and bind click [duplicate]
  28. How to focus an input field on Android browser through javascript or jquery
  29. What does this JavaScript/jQuery syntax mean?
  30. Google maps responsive resize

Leave a Comment