JavaScript From Beginner To Advanced

0% completed

Previous
Next
JavaScript - Constructor Functions

In JavaScript, constructor functions are used to create multiple similar objects with the same properties and methods. They serve as a blueprint for creating individual instances, each with its own data that adheres to the same structure. This is particularly useful in scenarios where you need to instantiate many objects with similar functionality, such as users in a system, items in a game, or processes in an application. Constructor functions capitalize on JavaScript's prototype-based inheritance model to enable objects to share methods, thereby saving memory and improving performance.

Syntax of Constructor Functions

Constructor functions are defined like any regular function, but they are used specifically to construct objects and usually start with a capital letter to distinguish them from other functions.

Image
Javascript
Javascript
. . . .
  • FuncName is a placeholder for the constructor function's name.
  • The constructor function takes param1, param2`, etc. parameters.
  • new FuncName(arg1, arg2, ...) creates a new object instance with the provided initial values.

Example: Using a Constructor Function

Here we will create a simple constructor function to instantiate new Car objects. Each car will have properties for make, model, and year.

Javascript
Javascript

. . . .

Explanation:

  • The Car function is designed to act as a constructor. Constructors are templates for creating objects that share similar properties and methods.
  • The this keyword within the constructor function refers to the new object that is being created when the function is called with new.
  • this.make, this.model, and this.year are properties that are being set on the new object based on the values passed to the constructor function.
  • myCar is an instance of Car created by passing "Toyota", "Corolla", and "2021" as arguments to the constructor. This instance inherits properties set by the constructor.

Demonstrating Property Addition Limitations

When properties are added to an instance after it has been created, these properties do not affect the constructor function or other instances created from the same constructor. This demonstrates that properties added in this way are instance-specific.

Example

Javascript
Javascript

. . . .

Explanation:

  • The color property is added only to the myCar instance, showing that new properties can be added to objects after their creation.
  • However, anotherCar, which is another instance of Car, does not have the color property because it was added only to myCar and is not part of the Car constructor or its prototype. This example highlights that instance-specific properties do not impact other instances or the original constructor definition.

Using Prototype Objects with Constructor Functions

Prototypes are useful for defining methods that should be available to all instances of a constructor function without having to define these methods multiple times for each instance.

Example

Javascript
Javascript

. . . .

Explanation:

  • Car.prototype.displayInfo adds a method displayInfo to the prototype object of Car. All instances of Car, including those already created like myCar and anotherCar, can use this method.
  • The method displayInfo when called, accesses the properties of this, which refers to the object instance (myCar or anotherCar) invoking the method.
  • This method is shared across all instances, reducing memory overhead and ensuring consistency in functionality across all objects of the same type.

These examples illustrate the foundational concepts of using constructor functions in JavaScript, showing how to efficiently create and manage similar objects while optimizing code reusability and memory usage.

Constructor functions are a powerful feature of JavaScript, enabling efficient object creation while maintaining a clean and manageable codebase. By using prototypes in conjunction with constructors, methods can be shared across instances, optimizing memory usage and performance in applications that require the creation of many similar objects.

.....

.....

.....

Like the course? Get enrolled and start learning!
Previous
Next