What's the Difference Between JavaScript's `.prototype` and `.__proto__`?

Understanding the Distinction Between .prototype and .__proto__

In the realm of JavaScript, objects interact with each other through inheritance and prototype chains. Two critical concepts that play a pivotal role in this inheritance mechanism are .prototype and .__proto__. Although they sound similar, these properties serve distinct functions.

.prototype

.prototype is a property of a constructor function that serves as a template for creating new objects. When you instantiate a constructor function with new, the resulting object has an .__proto__ property that points to the constructor function's .prototype object. This .__proto__ object contains properties and methods that are inherited by the newly created object.

.__proto__

.__proto__ is a property of an object that references the prototype object from which the object was created. It allows the object to access properties and methods defined in the prototype. .__proto__ plays a crucial role in the inheritance chain, enabling objects to inherit properties and methods from their parent objects.

Key Differences

The main difference between .prototype and .__proto__ lies in their roles:

• .prototype: Provides the template used to create new objects.
• .__proto__: References the prototype object from which the current object was created.

Additionally, .prototype is a property of the constructor function, while .__proto__ is a property of individual objects.

Practical Example

Consider the following code:

function Foo(value) { this.value = value; }
Foo.prototype.getValue = function() { return this.value; };
var b = new Foo(20);
var c = new Foo(30);

In this example, .prototype is associated with the Foo constructor function. It defines a getValue method that can be inherited by objects created with new Foo. .__proto__ is a property of both b and c, referencing the Foo.prototype object. Through this .__proto__ reference, b and c can access the inherited getValue method.

Conclusion

.prototype and .__proto__ are essential concepts in JavaScript inheritance. Understanding their distinct functions and how they interact with each other is crucial for effective object-oriented programming in JavaScript.

The above is the detailed content of What's the Difference Between JavaScript's `.prototype` and `.__proto__`?. For more information, please follow other related articles on the PHP Chinese website!