JavaScript Function Invocation

JavaScript functions have 4 invocation methods.

The difference between each method lies inthisthe initialization of

thisKeywords

Generally speaking, in JavaScript, this points to the current object when the function is executed.

Note Notethisis a reserved keyword, you cannot modifythisthe value of it.

Invoking JavaScript Functions

In the previous chapters, we have learned how to create functions.

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

Invoking as a Function

Example

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

Try it Yourself »

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

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

The page object in a browser is the browser window (the 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

Try it Yourself »

Note This is a common method for invoking JavaScript functions, but it is not a good programming practice.
Global variables, methods, or functions can easily cause naming conflict bugs.

Global Object

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

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

This example returnsthisthe value of this is the window object:

Example

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

Try it Yourself »

Note Invoking a function as a global object makesthisthe value of this the global object.
Using the window object as a variable can easily cause the program to crash.

Invoking a Function as a Method

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

The following example creates an object (myObject), the object has two properties (firstNameandlastName), and a method (fullName):

Example

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

Try it Yourself »

fullNameA method is a function. A function belongs to an object.myObjectis the owner of the function.

thisAn object, which owns JavaScript code. In the example,thisthe value of this ismyObjectthe object.

Test it! ModifyfullNamethe method and returnthisthe value:

Example

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

Try it Yourself »

Note Invoking a function as an object method makesthisthe value of this the object itself.

Invoking a Function with a Constructor

If the function call is preceded by thenewkeyword, then it is invoking a constructor.

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

Example

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

Try it Yourself »

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

Note In the constructor,thisthe keyword has no value.
thisThe value of this is created when the function call instantiates the object (new object).

Invoking a Function as a Function Method

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

call()andapply()are predefined function methods.

Example

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

Try it Yourself »

Example

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

Try it Yourself »

Both methods use the object itself as the first parameter. The difference between the two lies in the second parameter: apply takes an array of arguments, that is, multiple arguments are combined into an array and passed in, while call passes them as arguments of call (starting from the second parameter).

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

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

Note Through the call() or apply() methods, you can setthisthe value of this, and call it as a new method of an existing object.
Other Extensions