Constructor and Prototype
Core Concepts
In JavaScript, every object has a prototype. The prototype is also an object. When you create an object, JavaScript automatically assigns the prototype of the object to the prototype of the constructor function that created the object.
-
Constructor: This is the function that is used to construct or create
(initialize) the object. You can access it via
object.constructor
.
-
Prototype: This is the object from which the object inherits properties and
methods. You can access it via
Object.getPrototypeOf(object)
.
-
Constructor Chain: In class-based inheritance, constructors form a lineage
reflecting the hierarchy of classes for inheritance.
- Prototype Chain: JavaScript's inheritance mechanism. When accessing a property or method, JavaScript traverses the prototype chain until it finds the property or reaches null.
FYI, I need to preface the following diagram with "I think"
Function, Prototype, and Instance Relationships
graph LR myFunc[myFunc Function] -->|has| FunctionProperties[Function Properties] myFunc -->|has| FunctionMethods[Function Methods] myFunc -->|has| FunctionPrototype[myFunc.prototype] FunctionPrototype -->|has| Constructor[constructor: myFunc] FunctionPrototype -->|has| OtherProperties[Other properties and methods] obj[obj Instance] -->|has| InstanceProto[obj.__proto__] InstanceProto -->|points to| FunctionPrototype
Prototype Chain
graph LR Constructor -->|has| Prototype[Prototype] Prototype -->|has| BasePrototype[Base Prototype] Constructor -->|creates| Instance Instance -->|links| Prototype BasePrototype -->|__proto__ points to| Null[null]
Comparison of Constructor and Prototype
The following example demonstrates the difference between a constructor and a prototype.
class Person {
constructor(name) {
this.name = name;
}
}
const user = new Person('Joanne');
console.log(user.name);
function Animal(name){
this.name = name;
}
let pet = new Animal('Fluffy');
console.log(pet.name);
In the above example, both create objects with a name
property. The difference is that
Person
is a class that uses a constructor
method to initialize its name
property.
Animal
is a function that uses the this
keyword to assign its name
property.