Search code examples
javascriptjquerydeveloper-tools

What is x.fn.x.init[] value shown for $() and $(this) in chrome dev tools

I have a habbit of debugging JS and jQuery script in some developer tool. I realized Chrome Dev Tools showing x.fn.x.init as a value for $() and $(this). However I dont realize what are these value:

Code

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="jquery-2.0.2.min.js" ></script>
<script src="jquery.ui.widget.js" ></script>
<title></title>
<script type="text/javascript">

    $(document).ready(function () {
        var outstring = "";
        outstring = "" + $() + $(this);
    });

</script>
</head>
<body>
</body>
</html>

enter image description here

Solution

  • This is actually the REAL code behind instantiating $

    Take a look at the github source 

    jQuery.fn = jQuery.prototype = {
    // The current version of jQuery being used
    jquery: core_version,

    constructor: jQuery,
    init: function( selector, context, rootjQuery ) {
        var match, elem;
    .....

    and then at line 263

    // Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

    Since you are using the minified version, this gets turned into what you see.