JavaScript Function Call

The code inside a JavaScript function will be executed when 'something' calls it.

Call JavaScript function

When a function isDefineThe code inside the function will not be executed.

When a function isCallWhen, the code inside the function will be executed.

Calling a function can also be said to be 'starting a function' or 'executing a function'.

In this tutorial, we use the "Call"

Call a function in the form of a function

Instance

function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);           // Will return 20

Try It Yourself

The above functions do not belong to any object. However, in JavaScript, there is always a default global object.

In HTML, the default global object is the HTML page itself, and all the functions above 'belong' to the HTML page.

In the browser, this page object is the browser window. The function above automatically becomes a window function.

myFunction() and window.myFunction() are the same function:

Instance

function myFunction(a, b) {
    return a * b;
}
window.myFunction(10, 2);    // It will also return 20

Try It Yourself

This is a common way to call a function, but it is not a good habit.

Global variables, methods, or functions can easily cause naming conflicts and vulnerabilities in the global object.

this Keyword

In JavaScript, it is called this The thing that refers to the object that "owns" the current code.

this The value, when used in a function, is the object that "owns" the function.

Please note this It is not a variable. It belongs to the keyword. You cannot change this The value.

The global object

When an object is called without an owner object,this The value becomes the global object.

In a web browser, the global object is the browser object.

This example uses this The value returns this window object:

Instance

var x = myFunction();            // x will become the window object
function myFunction() {
   return this;
}

Try It Yourself

Calling a function as a global function will lead to this The value becomes the global object.

Using the window object as a variable can easily cause the program to crash.

As a method to call a function

In JavaScript, you can define a function as an object method.

The following example creates an object (myObject) with two properties (firstName and lastName), and a method (fullName):

Instance

var myObject = {
    firstName: "Bill",
    lastName: "Gates",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // It will return "Bill Gates"

Try It Yourself

The fullName method is a function. This function belongs to the object. myObject is the owner of the function.

is called this The thing that is "owning" this JavaScript code is the object. In this example,this The value is myObject.

Let's test it! Modify this fullName method to return this The value:

Instance

var myObject = {
    firstName: "Bill",
    lastName: "Gates",
    fullName: function () {
        return this;
    }
}
myObject.fullName();          // It will return [object Object] (the owner object)

Try It Yourself

Calling a function as an object method will result in this its value becomes the object itself.

Function calls through the function constructor

If the function call is preceded by new If the keyword is used, then this is a constructor call.

It looks like you are creating a new function, but since JavaScript functions are objects, you actually create a new object:

Instance

// 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"

Try It Yourself

Constructor calls will create a new object. The new object will inherit properties and methods from its constructor.

Inside the constructor this The keyword has no value.

this its value will become a new object created when the function is called.