__proto__ Vs. Prototype in Javascript

proto VS. prototype in JavaScript

When working with JavaScript, you may come across the terms “proto” and “prototype”. These two concepts are related to object inheritance and can sometimes be confusing. In this article, we will explore the differences between proto and prototype in JavaScript and how they are used.

proto

The “proto” property is an internal property of JavaScript objects that allows objects to inherit properties and methods from other objects. It is a reference to the object’s prototype.

Here’s an example:

const parent = {
  greet() {
    console.log("Hello!");
  }
};

const child = {
  name: "John"
};

child.__proto__ = parent;

child.greet(); // Output: Hello!

In the above example, the “parent” object has a “greet” method. By setting the “proto” property of the “child” object to the “parent” object, the “child” object inherits the “greet” method and can call it.

prototype

The “prototype” property is a property of JavaScript functions. It is used to create and define properties and methods that are shared by all instances of that function.

Here’s an example:

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log("Hello, my name is " + this.name);
};

const john = new Person("John");

john.greet(); // Output: Hello, my name is John

In the above example, the “Person” function has a “prototype” property. By adding properties and methods to the “prototype” object, they become accessible to all instances of the “Person” function. The “john” object, created using the “new” keyword, inherits the “greet” method from the “prototype” object of the “Person” function.

Differences

While “proto” and “prototype” are related to object inheritance, they have some key differences:

“__proto__” is a property of an object, while “prototype” is a property of a function.
“__proto__” is used to look up properties and methods in the prototype chain, while “prototype” is used to define properties and methods for objects created by a function constructor.
“__proto__” can be accessed and modified directly, while “prototype” is accessed through the constructor function.

Conclusion

In summary, “proto” and “prototype” are both important concepts in JavaScript object inheritance. “proto” allows objects to inherit properties and methods from other objects, while “prototype” is used to define properties and methods for objects created by a function constructor. Understanding the differences between “proto” and “prototype” will help you better utilize JavaScript’s powerful object-oriented capabilities.

That’s all for this article! We hope you found it helpful in understanding the differences between “proto” and “prototype” in JavaScript.

Happy coding!

proto Vs. Prototype in Javascript