Scribd
Upload
3 views

Prototype

The document provides an overview of prototypes in JavaScript, explaining their role in object inheritance and the prototype chain. It includes examples of using constructor functions and the Object.create() method to illustrate how prototypes work. Key concepts such as memory efficiency, inheritance, and extensibility are highlighted, along with a tree structure of the prototype chain and flow explanation for accessing methods.

Uploaded by

dikshyant dash
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Prototype

The document provides an overview of prototypes in JavaScript, explaining their role in object inheritance and the prototype chain. It includes examples of using constructor functions and the Object.create() method to illustrate how prototypes work. Key concepts such as memory efficiency, inheritance, and extensibility are highlighted, along with a tree structure of the prototype chain and flow explanation for accessing methods.

Uploaded by

dikshyant dash
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Here are concise and clear notes on Prototype in JavaScript with

examples, perfect for interview preparation.

🌟 Prototype in JavaScript

1. What is Prototype?

 In JavaScript, every object has an internal property called


[[Prototype]] that links to another object.

 This forms the prototype chain, allowing objects to inherit


properties and methods from their prototype.

 The prototype is like a blueprint that objects can use to share


common functionality.

2. How does Prototype Work?

 When you access a property or method of an object, JavaScript first


checks the object itself.

 If not found, it looks up the prototype chain until it either finds the
property or reaches null (end of the chain).

3. Example of Prototype in JavaScript

javascript

CopyEdit

// Constructor function

function Person(name, age) {

this.name = name;

this.age = age;

// Adding method to the prototype

Person.prototype.greet = function() {

console.log(`Hello, my name is ${this.name} and I'm ${this.age} years


old.`);
};

// Creating an object

const dikshyant = new Person("Dikshyant", 28);

dikshyant.greet(); // Output: Hello, my name is Dikshyant and I'm 28


years old.

// Checking prototype

console.log(dikshyant.__proto__ === Person.prototype); // true

4. Prototype Chain Example

javascript

CopyEdit

console.log(dikshyant.toString());

// Output: [object Object]

// 'toString' is inherited from Object.prototype

Prototype Chain:
dikshyant → Person.prototype → Object.prototype → null

5. Key Concepts

1. Prototype Property: Used in constructor functions.

javascript

CopyEdit

Person.prototype.greet;

2. proto: Internal reference linking an object to its prototype.

javascript

CopyEdit

dikshyant.__proto__ === Person.prototype; // true

3. Object.create(): Creates an object with a specific prototype.


Object.create() is used to create a new object with a specified
prototype.

javascript

CopyEdit

const car = Object.create({ wheels: 4 });

console.log(car.wheels); // 4

🔥 Key Takeaways:

 prototype is only for constructor functions and classes, not


plain objects.

 Use Object.create() to create objects with a prototype.

 Use constructor functions or classes when you need inheritance


with prototype.

const personPrototype = {

greet: function () {

console.log(`Hello, my name is ${this.name}`);

};

// Correct way to create an object that inherits from personPrototype

const person = Object.create(personPrototype);

person.name = "Dikshyant";

person.greet();

// Output: Hello, my name is Dikshyant

6. Why Use Prototypes?

 Efficient memory usage: Methods are shared among objects, not


copied.
 Inheritance: Objects can inherit properties and behaviors.

 Extensibility: Easily add new functionalities to existing objects.

Would you like me to add advanced concepts like prototype inheritance


and class syntax for modern JavaScript?

4o

You said:

create tree structure of prototype and show the flow

ChatGPT said:

Here's a clear tree structure of the JavaScript prototype chain and the flow
when accessing properties.

Example Code for Reference:

javascript

CopyEdit

function Person(name) {

this.name = name;

Person.prototype.greet = function() {

console.log(`Hello, my name is ${this.name}`);

};

const dikshyant = new Person("Dikshyant");

dikshyant.greet(); // Accessing the 'greet' method

🌲 Prototype Chain Tree Structure:

plaintext

CopyEdit

dikshyant (Object instance)


│

└──> Person.prototype

├── greet() <-- Accessed here

└── constructor

└──> Object.prototype

├── toString() <-- Inherited if called

├── valueOf()

└── __proto__

└── null (End of prototype chain)

🔍 Flow Explanation (When dikshyant.greet() is called):

1. Step 1: JavaScript first checks the dikshyant object itself for the
greet method.

2. Step 2: It doesn't find greet directly on dikshyant.

3. Step 3: It moves up to Person.prototype and finds the greet method


there.

4. Step 4: If not found in Person.prototype, it would continue up to


Object.prototype.

5. Step 5: The chain ends when it reaches null.


Class based proto type example
class Animal {

constructor(name) {

this.name = name;

speak() {

console.log(`${this.name} makes a sound.`);

class Dog extends Animal {

speak() {

console.log(`${this.name} barks!`);

const dog = new Dog("Bruno");

dog.speak(); // Output: Bruno barks!

You might also like