JavaScript Function Call

JavaScript functions can be called in 4 different ways.

The difference between each method lies in the initialization of this.

Keywords

Generally, in JavaScript, this refers to the current object during the execution of a function.

| | Note that this is a reserved keyword and you cannot change the value of this. | | --- | --- |

Calling a JavaScript Function

In previous chapters, we learned how to create functions.

The code inside a function is executed after the function is called.

Calling as a Function

Example

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

The above function does not belong to any object. However, in JavaScript, it is always a default global object.

In HTML, the default global object is the HTML page itself, so the function belongs to the HTML page.

In the browser, the page object is the browser window (window object). The above function automatically becomes a function of the window object.

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

Example

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

| | This is a common way to call a JavaScript function but not a good programming practice. <br>Global variables, methods, or functions can easily cause naming conflicts and bugs. | | --- | --- |

Global Object

When a function is not called by its own object, the value of this becomes the global object.

In web browsers, the global object is the browser window (window object).

This example returns the value of this as the window object:

Example

function myFunction() {
    return this;
}
myFunction();                // Returns the window object

| | Calling a function as a global object can make the value of this become the global object. <br>Using the window object as a variable can easily cause the program to crash. | | --- | --- |

Calling as a Method

In JavaScript, you can define functions as methods of objects.

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

Example

var myObject = {
    firstName: "John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // Returns "John Doe"

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

The this object owns the JavaScript code. In this example, this is the myObject object.

Test this! Modify the fullName method to return the this value:

Example

var myObject = {
    firstName: "John",
    lastName: "Doe",
    fullName: function () {
        return this;
    }
}
myObject.fullName();          // Returns [object Object] (the owner object)

| | Calling a function as an object method makes this become the object itself. | | --- | --- |

Calling with a Constructor

If a function is called with the new keyword, it is a constructor call.

This looks like creating a new function, but JavaScript functions are recreated objects:

Example

// Constructor function:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName = arg2;
}

// This creates a new object
var x = new myFunction("John", "Doe");
x.firstName;                             // Returns "John"

A constructor call creates a new object. The new object inherits the properties and methods of the constructor function.

| | In a constructor function, this has no value. <br>The value of this is created when the function is called to instantiate an object (new object). | | --- | --- |

Calling as a Function Method

In JavaScript, functions are objects. JavaScript functions have their properties and methods.

call() and apply() are predefined function methods. Both methods can be used to call a function, and both methods must have the object as the first parameter.

Example

function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // Returns 20

Example

function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // Returns 20

Both methods use the object itself as the first parameter. The difference lies in the second parameter: apply passes an array of parameters, which combines multiple parameters into a single array, while call passes parameters directly (starting from the second parameter).

In JavaScript strict mode, the first parameter becomes the value of this when calling a function, even if it is not an object.

In JavaScript non-strict mode, if the value of the first parameter is null or undefined, it will use the global object instead.

| | Using call() or apply() methods, you can set the value of this, and call it as a new method of an existing object. | | --- | --- |