Prototype JS

In JavaScript, every object has an internal property called [[Prototype]] (denoted as proto in modern engines). This prototype is a reference to another object from which it inherits properties and methods.

Prototypes are key to achieving inheritance in JavaScript.

const obj1 = {
    fname:"Divisht",
    lname:"K",
    greet:function (){
        return `Hey ${this.fname}` ;
    }
}


const obj2 = {
    fname:"Abhishek",
    lname:"P",
}

obj2.__proto__ = obj1;

console.log(obj2.greet())

Dry run -

Step 1: Call obj2.greet()

• You call obj2.greet().

Step 2: Lookup for greet

• The JavaScript engine first checks if greet exists in obj2.

• It doesn’t, so it looks in obj2.__proto__.

• obj2.__proto__ points to obj1, where the greet method is found.

Step 3: Execution Context

• The greet method from obj1 is executed. Inside the method:

• The value of this refers to obj2, because obj2.greet() is called.

• this.fname resolves to obj2.fname, which is “Abhishek”.

Step 4: Return Value

• The greet method returns the string:

`Hey ${this.fname}` // Resolves to: "Hey Abhishek"

Prototype chaining

In JavaScript, objects have a prototype property that enables inheritance. By setting obj2's prototype to obj1, obj2 can access obj1's methods. When calling a method like greet on obj2, JavaScript looks up the prototype chain to find the method in obj1 and uses properties from obj2 for execution, demonstrating how prototype chaining works.

obj2 -> obj1 -> Object.prototype -> null

Steps for prototype chaining.

1. obj2.greet:

• Not found in obj2, so JavaScript checks obj2.__proto__ (which is obj1).

• greet is found in obj1.

2. this inside greet:

• Refers to the object that called the method (obj2 in this case).

Function Prototypes

Function.prototype.greet = function(){
    console.log(`Fun name is ${this.name}`)
}


function callProto(){}

callProto.greet();

The greet method is now available to all function objects because every function in JavaScript inherits from Function.prototype.

Here, you are adding a greet method to the Function.prototype.Now, every function in JavaScript inherits this greet method.
callProto is a regular function like all functions, it inherits from Function.prototype.

When we call greet()

• When you call callProto.greet(), JavaScript:

• Looks for greet on the callProto object itself (it’s not there).

• Then checks callProto.__proto__, which points to Function.prototype, where it finds greet.

Notes -

1. Anonymous Functions

If the function has no name (anonymous), the name property will be an empty string (""):

const anonFunc = function() {};
anonFunc.greet(); // Output: Fun name is

Custom Properties

You can assign a custom name property:

function customFunc() {}
customFunc.name = "My Custom Function";
customFunc.greet(); // Output: Fun name is My Custom Function

Why Doesn’t It Work?

• Reason 1: Lack of a name property

JavaScript assigns an empty string ("") to the name property of anonymous functions. So, when you call anonFunc.greet(), the greet method tries to use this.name, which is "".

Sol :

You can manually assign a name to the function:

anonFunc.name = "Anonymous";
anonFunc.greet(); // Output: Fun name is Anonymous

2. Arrow Functions :

   An arrow function is a shorthand for writing functions and behaves differently than traditional functions.

const arrowFunc = () => {};
arrowFunc.greet();

Why Doesn’t It Work?

• Reason 1: No name property

Arrow functions don’t have their own name property. Even if you assign a name:

const arrowFunc = () => {};
console.log(arrowFunc.name); // Output: "" (empty string)

• Reason 2: this in Arrow Functions

Arrow functions don’t have their own this. Instead, they inherit this from the surrounding lexical scope.

When you call arrowFunc.greet(), this inside greet refers to the object where the greet function is defined (i.e., Function.prototype), not the arrow function.

Sol :

Arrow functions inherently don’t work well in this scenario because they lack their own name property. You can wrap the arrow function in a named function if needed:

const wrapper = function () {
  const arrowFunc = () => {};
  arrowFunc.name = "ArrowWrapped";
  return arrowFunc;
};

const myArrow = wrapper();
myArrow.greet(); // Output: Fun name is ArrowWrapped