- In JavaScript, functions are objects and as such, they can have properties. One of these properties is a special property called "prototype", which is an object that serves as a blueprint for creating new objects. When you define a function in JavaScript, it automatically gets a prototype object attached to it.
- The prototype object contains properties and methods that will be inherited by all instances of objects created using the function as a constructor. This allows you to define a set of common properties and methods for a group of related objects.
- For example, suppose you have a function called Person that creates objects representing individual people. You could add properties and methods to the prototype object of the Person function, such as name, age, and greet(), which would then be shared by all instances of the Person object created using the new keyword.
- Here's an example code snippet to demonstrate the concept of prototype object in function:
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function () {
console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old`);
}
const person1 = new Person('John', 30);
person1.greet(); // Output: "Hello, my name is John and I'm 30 years old"
const person2 = new Person('Jane', 25);
person2.greet(); // Output: "Hello, my name is Jane and I'm 25 years old"
if (Function.prototype === Object.getPrototypeOf(Person)) {
console.log(true)
} else {
console.log(false)
}
if (Object.getPrototypeOf(person1) === Person.prototype) {
console.log(true)
} else {
console.log(false)
}
if (Object.getPrototypeOf(Object.getPrototypeOf(person1)) === Object.prototype) {
console.log(true)
} else {
console.log(false)
}
if (Object.getPrototypeOf(Person.prototype.__proto__) === Object.getPrototypeOf(person1.__proto__.__proto__)) {
console.log(true)
} else {
console.log(false);
}
if (Object.getPrototypeOf(person1.__proto__) === Object.prototype) {
console.log(true)
} else {
console.log(false);
}
- Diagrammatic Representation:
- In this example, the Person function is defined with two parameters, name and age. The function sets the name and age properties on the newly created object using the this keyword. Additionally, we have added a greet() method to the Person.prototype object, which is shared by all instances of the Person object.
- When we create new instances of the Person object using the new keyword, the greet() method can be called on each instance and it will output a message containing the person's name and age.
- In addition to adding properties and methods to the prototype object of a function, you can also modify existing properties and methods on the prototype object. This allows you to change the behavior of all instances of objects created using the function as a constructor.
- For example, suppose you want to modify the greet() method for all instances of the Person object to include a custom greeting based on the time of day. You can do this by modifying the Person.prototype.greet method as follows:
Person.prototype.greet = function () {
const hour = new Date().getHours();
let greeting;
if (hour < 12) {
greeting = 'Good morning';
} else if (hour < 18) {
greeting = 'Good afternoon';
} else {
greeting = 'Good evening';
}
console.log(`${greeting}, my name is ${this.name} and I'm ${this.age} years old`);
}
- Now, when you create new instances of the Person object and call the greet() method, the output will include a custom greeting based on the time of day.
const person1 = new Person('John', 30);
person1.greet(); // Output: "Good morning, my name is John and I'm 30 years old"
const person2 = new Person('Jane', 25);
person2.greet(); // Output: "Good morning, my name is Jane and I'm 25 years old"
- The prototype object in function in JavaScript allows you to define a set of common properties and methods for a group of related objects. By adding or modifying properties and methods on the prototype object, you can change the behavior of all instances of objects created using the function as a constructor. This provides a powerful mechanism for creating reusable code in JavaScript.
No comments:
Post a Comment