There are four ways to invoke functions in JavaScript. Based on lexical environment and type of invocation, JavaScript engine does various activity behind the scenes.  In addition, this  variable inside any function also changes its behavior based on function structure and its invocation type.

01. Functions in global namespace:

function foo(){
    console.log(this);    
}

foo();    // Window

02. Functions inside object:

var greet = {
	"language" : "EN",
	"foo" : function (){
		    console.log(this);
		}
	};

greet.foo();    //   greet object

Here, the function is attached to greet object. We cannot invoke the function directly, i.e. we have to invoke it by referencing the greet object. In this type of context,  variable this will refer to greet object.

03. Constructor functions:

Constructor functions help us create objects. When we invoke a function with  new keyword, the function acts like a constructor function and JavaScript engine takes some steps behind the scene to facilitate object creation.

function Employee(name, age){
    this.name = name;
    this.age = age;
}

var sajib = new Employee("sajib", 33);

We use capital letter of function constructors by convention to indicate that the function is used to create object, but it is not mandatory. Whenever we invoke a function with new  keyword, JavaScript behaves differently and its behavior is explained by following code.

function Employee(name, age){
    var this = new Object();    
	
    this.name = name;
    this.age = age;
	
    return this;
}

Firstly, JS creates a new empty object and sets reference of this variable to that empty object and at last it returns the newly created object.

04. Invoking function by setting reference of this variable:

var greet1 = {
    "language" : "EN"
};

var greet2 = {
    "language" : "FR",
    "showLan" : function(){
                    console.log(this.language);
                }
};

greet2.showLan();               // FR
greet2.showLan.call(greet1);    // EN

4th way of invoking a function is by using call().  By invoking this way, we can define which object will be pointed by this reference.

---

JavaScript Objects and Prototype

Facts about objects in JavaScript

• Objects can only have properties. Property can be another object, function/method etc
• For every function we write in JS, two objects are created. Function object and its prototype object. Each function has a prototype property which points to its prototype object.
• All objects which are created from from a function constructor gets a property dunder proto (i.e. __proto__)  which refers to the constructor functions prototype object.
• Function’s prototype object has also a property constructor which points to the function.

 

• Every function has a property named prototype
• Every object created has a property called __proto__
• Every prototype object has also  __proto__  , additionally they also have a property named constructor which points to the function from which it was created.