JavaScript, All about prototype in JS

What is prototype in JavaScript?
Answer: In JavaScript, a prototype is an inherent mechanism that allows objects to inherit properties and methods from other objects. Each object in JavaScript has a prototype from which it inherits methods and properties. 

Key points about prototypes:

1. Prototype Chain: Every JavaScript object has a prototype (except for the base object, which is 'Object.prototype'), which acts as a fallback chain for property and method lookups.

2. Constructor Function: Objects in JavaScript are created using constructor functions (or class syntax in modern JavaScript). When you create an object using a constructor function, the 'prototype' property of that function becomes the prototype of the objects created by it.

3. Inheritance: Prototypes facilitate inheritance in JavaScript. When you access a property or method on an object, JavaScript looks for it directly on the object. If it's not found, it looks at the object's prototype, and continues up the prototype chain until it finds the property/method or reaches the end ('Object.prototype').

4. Prototype vs. '__proto__': 'prototype' is a property of constructor functions or classes, while '__proto__' (deprecated in favor of 'Object.getPrototypeOf()' and 'Object.setPrototypeOf()') is a reference that an object has to its prototype.
Here's a brief example to illustrate:
javascript
// Constructor function
function Person(name) {
this.name = name;
}
// Adding a method to the prototype
Person.prototype.sayHello = function() {
console.log('Hello, my name is ${this.name}');
};
// Creating objects using the constructor
let person1 = new Person('Alice');
let person2 = new Person('Bob');
person1.sayHello(); // Outputs: Hello, my name is Alice
person2.sayHello(); // Outputs: Hello, my name is Bob

In this example:
- 'Person.prototype' is the prototype of objects created with 'new Person()'.
- Both 'person1' and 'person2' inherit the 'sayHello' method from 'Person.prototype'.
Understanding prototypes is crucial for leveraging JavaScript's object-oriented features effectively, especially when working with constructor functions or class-based inheritance.

Can we create prototype of an object?
Answer: In JavaScript, every object already has a prototype. When you create an object using either object literals '{}' or constructor functions, the object automatically inherits properties and methods from its prototype. Here's how you can work with prototypes in JavaScript:
1. Object Literals:

let person = {
name: 'Alice',
age: 30
};
console.log(person.toString()); // Outputs: [object Object]

In this example, 'person' inherits methods like 'toString()' from 'Object.prototype'.
2. Constructor Functions:

function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayHello = function() {
console.log('Hello, my name is ${this.name}');
};
let person1 = new Person('Alice', 30);
person1.sayHello(); // Outputs: Hello, my name is Alice

Here, 'Person.prototype' is used to add the 'sayHello' method, which 'person1' inherits.
While you can't create a prototype from scratch for an already existing object (since every object inherently has a prototype it inherits from), you can modify the prototype of constructor functions or classes to affect all instances created from them. This approach allows you to extend or modify the behavior of objects in JavaScript.
If you meant creating an object that serves as a prototype for other objects (like creating an inheritance chain), you typically use constructor functions, classes, or object literals with shared methods defined on them.

Creating JavaScript Objects

How is object created in JavaScript?
Answer: In JavaScript, objects can be created using several methods. Here are the main ways to create objects:
1. Object literals: This is the most common way to create objects in JavaScript. You define an object by enclosing key-value pairs in curly braces '{}'.

let person = {
name: 'John',
age: 30,
city: 'New York'
};

2. Using the 'new' keyword with a constructor function: You can define a constructor function and create objects using the 'new' keyword.

function Person(name, age) {
this.name = name;
this.age = age;
}
let person1 = new Person('Alice', 25);
let person2 = new Person('Bob', 30);

3. Using 'Object.create()' method: You can create an object with a specified prototype object and properties.

let personProto = {
greet: function() {
return 'Hello, ' + this.name;
}
};
let person = Object.create(personProto);
person.name = 'Alice';

4. Using ES6 Classes: Introduced in ES6, classes are syntactical sugar over JavaScript's existing prototype-based inheritance.

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
let person = new Person('Alice', 25);

These are the primary methods to create objects in JavaScript, each with its own advantages and use cases depending on the scenario you're working with.

When a object is created in JavaScript then it inherits prototype. How can we check or prove it?
Answer: In JavaScript, every object inherits properties and methods from its prototype. You can check or prove this inheritance using the following methods:
1. Using 'Object.getPrototypeOf()' method:
You can use 'Object.getPrototypeOf(obj)' to get the prototype of 'obj'. This method returns the prototype of the specified object.

function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
return 'Hello, ' + this.name;
};
let person = new Person('Alice');
// Check the prototype of person
let proto = Object.getPrototypeOf(person);
console.log(proto === Person.prototype); // true

In this example, 'Person.prototype' is the prototype of objects created using the 'Person' constructor function. When you create 'person' using 'new Person('Alice')', 'person' inherits properties and methods defined in 'Person.prototype'.
2. Using 'instanceof' operator:
The 'instanceof' operator checks if an object is an instance of a specific constructor.

function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
return 'Hello, ' + this.name;
};
let person = new Person('Alice');
// Check if person is an instance of Person
console.log(person instanceof Person); // true

Here, 'person instanceof Person' returns 'true' because 'person' is an instance of the 'Person' constructor function. This demonstrates that 'person' inherits from 'Person.prototype'.
3. Accessing inherited properties:
You can directly access properties and methods defined in the prototype of an object.

function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
return 'Hello, ' + this.name;
};
let person = new Person('Alice');
// Accessing method from prototype
console.log(person.greet()); // Outputs: Hello, Alice

In this example, 'person.greet()' accesses the 'greet' method defined in 'Person.prototype'.
These methods demonstrate how objects inherit properties and methods from their prototypes in JavaScript. It's a fundamental aspect of JavaScript's prototype-based inheritance model.

A function is an object then what will be its prototype?
Answer: In JavaScript, functions are indeed objects, and like all objects, they have a prototype. Here's how prototypes work with functions:
1. Function Object and 'Function.prototype':

Every function in JavaScript is an instance of the 'Function' constructor. The 'Function' constructor itself is a function object and inherits from 'Function.prototype'. This means that any function you define (whether using function declaration, function expression, or the 'Function' constructor) will automatically have access to properties and methods defined on 'Function.prototype'.

function greet(name) {
console.log('Hello, ' + name);
}
console.log(typeof greet); // Outputs: "function"
console.log(greet instanceof Function); // Outputs: true
console.log(Function.prototype.isPrototypeOf(greet)); // Outputs: true

2. Prototype Chain for Functions:
The prototype of a function ('Function.prototype') itself inherits from 'Object.prototype'. This forms a prototype chain:

Function.prototype -> Object.prototype -> null

This chain means that functions inherit properties and methods from both 'Function.prototype' and 'Object.prototype'.
3. Adding Properties and Methods to Function Prototype:
You can add properties and methods to 'Function.prototype' just like you can with any other object's prototype. These additions will then be accessible to all functions in your JavaScript environment.

Function.prototype.customMethod = function() {
console.log('Custom method');
};
greet.customMethod(); // Outputs: "Custom method"

Here, 'customMethod' is added to 'Function.prototype', and since 'greet' is a function, it inherits 'customMethod'.
In summary, in JavaScript, functions are objects with an additional capability to be callable. Their prototype ('Function.prototype') provides methods that are common to all functions, and this prototype inherits from 'Object.prototype'.