JAVASCRIPT FUNCTION INVOCATION

Introduction

When a function is invoked, its current execution is halted and control and parameters are transferred to the new function. Every function takes two more parameters, arguments and this, in addition to the declared parameters. In object-oriented programming, this argument is crucial, and the invocation pattern determines its value. The method invocation pattern, function invocation pattern, constructor invocation pattern, and apply invocation pattern are the four invocation patterns in JavaScript. The initialization of the bonus parameter varies between the patterns.

Any expression that yields a function value is followed by a pair of parentheses, which is known as the invocation operator. There may be one or more expressions inside the parentheses, broken up by commas. One argument value is produced by each expression.

The function's parameter names will be assigned to each of the argument values. When the number of parameters and arguments differs, there is no runtime error. The excess argument values will be ignored if there are too many of them. The undefined value will be used to replace any missing values if there are insufficient argument values. It is possible to pass any kind of value to any parameter; there is no type checking on the argument values.

The Pattern of Method Invocation

We refer to a function as a method when it is stored as an object attribute. This is connected to the object when a method is called. An invocation expression is invoked as a method if it includes a refinement, such as a. dot expression or [subscript] expression:

// Create myObject. It has a value and an increment
// method. The increment method takes an optional
// parameter. If the argument is not a number, then 1
// is used as the default.

var myObject = {
    value: 0,
    increment: function (inc) {
        this.value += typeof inc === 'number' ? inc : 1;
    }
};

myObject.increment(  );
document.writeln(myObject.value);    // 1

myObject.increment(2);
document.writeln(myObject.value);    // 3

This can be used by a method to gain access to the object and change or retrieve values from it. This is bound to the object at the time of invocation. Functions that use this are extremely reusable due to the very late binding. Public methods are those that use this to obtain their object context.

The Function Invocation Pattern

A function is called as a function when it is not an object property:

var sum = add(3, 4);    // sum is 7

This function is bound to the global object when it is invoked using this pattern. This was an error in the language's design. If the language design had been done properly, this would still be bound to the outer function's variable when the inner function is called. Because the inner function does not share the method's access to the object because it is bound to the incorrect value, this error has the effect of preventing a method from using an inner function to assist it in doing its tasks. Thankfully, there's a simple fix. The inner function will have access to this via the defined variable if the method defines one and sets its value to this.

By convention, the name of that variable is that:

// Augment myObject with a double method.

myObject.double = function (  ) {
    var that = this;    // Workaround.

    var helper = function (  ) {
        that.value = add(that.value, that.value);
    };

    helper(  );    // Invoke helper as a function.
};

// Invoke double as a method.

myObject.double(  );
document.writeln(myObject.value);     // 6 

The Constructor Invocation Pattern

The archetypal inheritance language is JavaScript. This implies that properties can be directly inherited by objects from other objects. It is a classless language.

This is a significant divergence from the style of the day. Modern languages are mostly classical. Though nothing is known about prototypal inheritance, it is a very evocative concept. Because JavaScript is not confident in its prototypal nature, it provides a syntax for creating objects that is similar to that of classical languages. Prototypal inheritance was frowned upon by most traditional programmers, and the true prototypal nature of the language is hidden by classically inspired syntax. It's the worst scenario possible.

A new object with a hidden connection to the value of the function's prototype member will be constructed and bound to the function if it is called with the new prefix.

The return statement behaves differently as a result of the new prefix.

// Create a constructor function called Quo.
// It makes an object with a status property.

var Quo = function (string) {
    this.status = string;
};

// Give all instances of Quo a public method
// called get_status.

Quo.prototype.get_status = function (  ) {
    return this.status;
};

// Make an instance of Quo.

var myQuo = new Quo("confused");

document.writeln(myQuo.get_status(  ));  // confused

Constructors are functions designed to be used with the new prefix. They are often stored in variables with capitalized names. The capitalization convention is crucial because if a constructor is invoked without the new prefix, terrible things can happen without a compile-time or runtime warning.

It is not advised to use constructor functions in this manner. In the upcoming chapter, there will be better options.

The Apply Invocation Pattern

Functions can have methods because JavaScript is a functional object-oriented language.

We can create an array of arguments to call a function with the apply method. We are also able to select the value of this. The apply method requires two inputs. The value that ought to be connected to this is the first. The array of arguments is the second.

// Make an array of 2 numbers and add them.

var array = [3, 4];
var sum = add.apply(null, array);    // sum is 7

// Make an object with a status member.

var statusObject = {
    status: 'A-OK'
};

// statusObject does not inherit from Quo.prototype,
// but we can invoke the get_status method on
// statusObject even though statusObject does not have
// a get_status method.

var status = Quo.prototype.get_status.apply(statusObject);
    // status is 'A-OK'

Cocnclusion

A new object is created by using the constructor. The constructor's methods and properties are passed down to the new object.

The this keyword in the constructor does not have a value.
The value of this will be the new object created when the function is invoked.