var $ = this.jQuery无法理解

Question

(function () {
    var $ = this.jQuery;

    this.myExample = function () {};
}());

Can you tell me what this line means:

var $ = this.jQuery;

I am new to javascript

Answer 1

since it is an IIFE , this refers to the window object inside the scope of the function(since it may not be using strict mode), so we are creating a local variable called $ which refers to the global jQuery variable for easy access.

But it can be simplified as

(function ($) {
    this.myExample = function () {};
}(jQuery));

Answer 2

var $ = this.jQuery; means $ as this.jQuery; in (function () {}()); scope.

Answer 3

It is a variable, you can say that $ will have the value of this.jQuery .

var $ = this.jQuery;

var is a short for variable, $ is the name of that variable, and the value of it is on the right side.

Answer 4

That line is is mapping $ to this.jQuery. Essentially so when calling a function that uses this.jQuery object, $ can be used instead., for example you would use $.somefunction() instead of this.jQuery.somefunction()

Answer 5

The self executing function that encloses those two lines creates the scope. "this" would be the document. If jQuery is loaded then there is this.jQuery so $ becomes this documents jQuery.

Answer 6

In JavaScript, every function is invoked on an object that can be accessed with this . What this is depends on the way the function is called, and defaults to window :

obj1.func(); // "this" inside "func" will be "obj1"
func.call(obj2); // "this" inside "func" will be "obj2"
func(); // "this" will default to "window"

In your case, you are using the third way: (function(){...})() calls the function "unbound", and this will default to the global window object.

var $ = this.jQuery;

Will now bind the value of window.jQuery to the variable name $ , which happens to be a valid identifier name in JavaScript. As the jQuery library provides all its functionality in a global function window.jQuery , this is a convenient way to access it using the shorter name $ :

$("a").click();

---

To experiment with this in JavaScript, try out the following in your browser's JavaScript console:

function alertThis() { alert(this); }
var obj = {method: alertThis};

alertThis(); // will show something similar to [object Window], as "this" is "window"
alertThis.call("Foobar") // will show "Foobar"
obj.method(); // will show something similar to [object Object], as "this" is "obj"