The code inside the JavaScript function is executed when "something" calls it.
Calling JavaScript functions
When a function is defined, the code inside the function will not be executed.
When a function is called, the code inside the function is executed.
The calling function can also be called "start function" or "execute function".
Call a function as a function
example
1 2 3 4 function myFunction(a, b) { return a * b; } myFunction(10, 2); // Will return 20
The above function does not belong to any object. But in JavaScript, there is always a default global object.
In HTML, the default global object is the HTML page itself, and all the above functions "belong" to the HTML page.
In the browser, this page object is the browser window. The above function automatically becomes a window function.
myFunction() and window myFunction() is the same function:
example
1 2 3 4 function myFunction(a, b) { return a * b; } window.myFunction(10, 2); // It also returns 20
This is a common way to call functions, but it is not a good habit.
Global variables, methods, or functions can easily cause naming conflicts and vulnerabilities in global objects.
this keyword
In JavaScript, something called "this" refers to the object that "owns" the current code.
The value of this ， when used in a function, is the object that "owns" the function.
Note that this is not a variable. It belongs to keyword. You cannot change the value of {this}.
Global object
When an object is called without an owner object, the value of this # becomes a global object.
In a web browser, a global object is a browser object.
In this example, the window object is returned with the value of {this}:
example
1 2 3 4 5 var x = myFunction(); // x will become a window object function myFunction() { return this; }
Calling a function as a global function will cause the value of {this} to become a global object.
Using the window object as a variable can easily crash the program.
Call a function as a method
In JavaScript, you can define functions as object methods.
The following example creates an object (myObject) with two properties (firstName and lastName) and a method (fullName):
example
1 2 3 4 5 6 7 8 var myObject = { firstName:"Bill", lastName: "Gates", fullName: function () { return this.firstName + " " + this.lastName; } } myObject.fullName(); // "Bill Gates" will be returned
The fullName method is a function. The function belongs to an object. myObject is the owner of the function.
The thing called "this" is the object that "owns" this JavaScript code. In this example, the value of this} is myObject.
Test it! Modify the fullName method to return the value of {this}:
example
1 2 3 4 5 6 7 8 var myObject = { firstName:"John", lastName: "Doe", fullName: function () { return this; } } myObject.fullName(); // [object Object] will be returned
Calling a function with an object method will cause the value of {this} to become the object itself.
Call a function through a function constructor
If the function call is preceded by the new keyword, then this is a constructor call.
It looks like you create a new function, but since JavaScript functions are objects, you actually create a new object:
example
1 2 3 4 5 6 7 8 9 // This is the function constructor: function myFunction(arg1, arg2) { this.firstName = arg1; this.lastName = arg2; } // A new object was created: var x = new myFunction("Bill", "Gates"); x.firstName; // Will return "Bill"
The constructor call creates a new object. The new object inherits properties and methods from its constructor.
The {this} keyword in the constructor has no value.
The value of this} becomes the new object created when the function is called.