Aprende 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"

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 2. Capítulo 5

Pregunte a AI

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you explain more about how `this` behaves differently with and without the `new` keyword?

What are some common mistakes developers make with `this` in JavaScript?

Can you show more examples of fixing `this` binding issues?

Awesome!

Completion rate improved to 7.69

Desliza para mostrar el menú


              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"

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 2. Capítulo 5