Learn Constructor Functions and this | Prototypes, Inheritance, and the this Keyword

When you use a constructor function in JavaScript, the this keyword plays a crucial role in creating new object instances. Inside a constructor function, this refers to the new object being constructed. This allows you to assign properties and methods directly to the instance. Each time you call a constructor function with the new keyword, a fresh object is created, and this inside the constructor points to that new object. This mechanism is essential for building multiple objects with similar structure and behavior.


              12345678910
            
function Car(make, model) {
  this.make = make;
  this.model = model;
  this.getDescription = function() {
    return this.make + " " + this.model;
  };
}

const myCar = new Car("Toyota", "Corolla");
console.log(myCar.getDescription()); // "Toyota Corolla"

The behavior of this is determined by how a function is called. In the constructor function example, using new Car("Toyota", "Corolla") ensures that this refers to the new Car instance. If you call the same function without new, this would not refer to a new object, which can cause unexpected results or errors. This context-sensitive nature of this is especially important when dealing with prototype methods or when functions are assigned as callbacks, where the binding of this can easily change.


              12345678910111213141516171819
            
function Animal(type) {
  this.type = type;
  this.speak = function() {
    console.log("I am a " + this.type);
  };
}

const dog = new Animal("dog");

// Incorrect binding: extracting the method loses the correct 'this'
const speak = dog.speak;
speak(); // "I am a undefined"

// Fixing with bind:
const boundSpeak = dog.speak.bind(dog);
boundSpeak(); // "I am a dog"

// Or using call/apply:
dog.speak.call({ type: "cat" }); // "I am a cat"

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 5

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Awesome!

Completion rate improved to 7.69

Swipe to show menu


              12345678910
            
function Car(make, model) {
  this.make = make;
  this.model = model;
  this.getDescription = function() {
    return this.make + " " + this.model;
  };
}

const myCar = new Car("Toyota", "Corolla");
console.log(myCar.getDescription()); // "Toyota Corolla"


              12345678910111213141516171819
            
function Animal(type) {
  this.type = type;
  this.speak = function() {
    console.log("I am a " + this.type);
  };
}

const dog = new Animal("dog");

// Incorrect binding: extracting the method loses the correct 'this'
const speak = dog.speak;
speak(); // "I am a undefined"

// Fixing with bind:
const boundSpeak = dog.speak.bind(dog);
boundSpeak(); // "I am a dog"

// Or using call/apply:
dog.speak.call({ type: "cat" }); // "I am a cat"

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 5