I went through this tutorial more than once. I read the Mozilla documentation on constructor, and I am still confused. What’s the point of ‘constructor’ in code block 2. I ran the code (block 1) with and without the bolded line and I am not seeing the difference. I ran in FCC and in Chrome console. Please explain.
Additionally, is it possible that the lessons in OOB be modified because they are very confusing. Perhaps the order be reversed and an explanation for constructor be included in the lessons somewhere.
//block 1
function Animal() { }
Animal.prototype = {
**constructor: Animal,**
eat: function() {
console.log("nom nom nom");
}
};
// Only change code below this line
function Bird(){};
Bird.prototype= Object.create(Animal.prototype);
Bird.prototype.fly = function() {
console.log(“I’m flying!”);
}
//Bird.prototype.constructor = Bird;
let duck = new Bird(); // Change this line
console.log(duck instanceof Bird)
```javascript
//block 2
function Cat(name) {
this.name = name;
}
Cat.prototype = {
**constructor: Cat,**
eat: function() {
console.log("nom nom nom");
}
};
function Bear(name) {
this.name = name;
}
Bear.prototype = {
**constructor: Bear**,
};
function Animal() { }
Animal.prototype = {
**constructor: Animal**,
eat: function() {
console.log("nom nom nom");
}
};
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
Challenge: Object Oriented Programming - Use Inheritance So You Don’t Repeat Yourself
Link to the challenge:
A constructor is executed automatically when you create an object. For example:
var tabby = new Cat('Tiger');
This will call the constructor for the Cat class, passing in the string “Tiger” to the constructor. The constructor then sets this.name to “Tiger”. Now you can refer to the name later in your code:
console.log(`My cat's name is ${tabby.name}.`);
I hate to be stubborn about this, but your answer does not totally answer my question. According to the OOB lessons, the literal constructor and implicit constructor were used a variety of ways. I am not sure I understand when to use it or why it was used in the lesson. By lesson " Add Methods After Inheritance", constructor was not seem to be necessary any longer.
I’m not sure I understand what you mean here? Can you be specific about where the constructor is no longer necessary?
In code block 2, the lesson implies that Cat has to have constructor explicitly stated. Otherwise, Cat would not be Animal.
In later lessons shown in my code block 1, Bird did not have to have constructor explicitly stated to be Animal. duck did not have to have constructor stated to be Bird.
What’s the point of constructor? Do I need it? If yes, when? If not, why muddy the water?
I don’t there is meant to be a difference with the code in the challenge. I think it is just asking for it in principle.
The MDN page has a few examples where you can see the differences with/without setting the constructor.
I read it. I did not understand it fully. Hence the question in the forum.
I think the best answer I can give to your question is that it is considered a best practice to make sure the constructor points to the correct function because there could be situations in which it might produce a bug if it doesn’t (as shown in the link @lasjorg gave above).
Granted, all of this is taken care of if you use the newer class syntax, which provides a much easier way (IMO) to use OOP in JS. But the new syntax is just doing all of this stuff behind the scenes, so it’s probably important that you understand the older prototype syntax as well.
It doesn’t do anything (visibly) in the challenge code. The point is just to set the constructor properly.
As said, it would all happen automatically if you used class and extends, the methods would be on the prototype and the constructor would be set to the correct one.
class Animal {
constructor() {}
eat() {
console.log("nom nom nom");
}
}
class Bird extends Animal {
constructor() {
super();
}
fly() {
console.log("I'm flying!");
}
}
let duck = new Bird();
duck.eat();
duck.fly();
console.log(duck.constructor === Bird); // true
console.log(duck.constructor === Animal); // false
I can’t really give any great practical examples of issues caused by not setting the constructor which is why I linked to the MDN article. I believe there are backward compatibility reasons as well, again I can’t really tell you what they are.
https://exploringjs.com/impatient-js/ch_classes.html#person.prototype.constructor-advanced