Why beagle object does not accept both eat and bark method

JavaScript
1

Tell us what’s happening:

Your code so far


function Animal() { }
Animal.prototype.eat = function() { console.log("nom nom nom"); };

function Dog() { }

// Only change code below this line
Dog.prototype=Object.create(Animal.prototype);


/*Dog.prototype={
constructor: Dog,
bark(){
  console.log('Woof!');
}
}*/

with reference to This topic found in fCC, the commented code does not seem to work. it will accept bark as a method but will not accept eat as a method. However, if I use the code below beagle will accept both eat and bark as method. As far I understood, the commented code and the code below should give the same output. Did I write the code correctly?

Dog.prototype.constructor = Dog;
Dog.prototype.bark=function(){
console.log('Woof!');
}

// Only change code above this line

let beagle = new Dog();

console.log(beagle); //prints []
console.log(beagle.constructor);// prints [Function: Dog]
let container1 = [];
let container2 = [];
for(let x in beagle){
if(beagle.hasOwnProperty(x)){
  container1.push(x);
}else{
  container2.push(x);
}
}

console.log(container1);//prints []
console.log(container2);//prints ['constructor', 'bark', 'eat']. If I use the commented code it prints ['constructor', 'bark']

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36 OPR/70.0.3728.189.

Challenge: Add Methods After Inheritance

Link to the challenge:

2

I’ve never seen a prototype being assigned as an object like in your code. When I play around with it, it doesn’t seem to be equivalent. I would just mimic the format in the example and be done with it. Honestly, I have only rarely seen “prototype” since I did this challenge, but I do see lots of class-based stuff out in the wild.

3

Thanks for the reply and the insight.

I was worried the wording is making readers confuse to what I am asking, thus the no reply despite the fast response in fCC forum

So basically prototype is not a commonly used feature of JS?

4

I’m still learning, so probably not the best to ask. :slight_smile:

My understanding is that while it’s an underlying feature of JavaScript, it is not used a lot in modern JS. For example, I’m learning React and I haven’t seen it used in any tutorials or docs that I’ve learned from–whereas I’ve used a lot of classes (which do a similar thing).

On the other hand, you did get me interested and as we speak, I’m reading the MDN docs on the subject. It is kind of cool what’s going on under the hood and it never hurts to know.

Good luck! maybe a working programmer will show up and comment.

1 Like
5

yup, have been re-reading this topic for 2 days. Still can’t fully grasp what is going on under the hood for inheritance and prototype. Just have to keep grinding. Too late to back out now.

Good luck to you too

6

I know that for me to learn, I have to get my hands dirty. I’ve already got VS code up and am playing around and messing about with this stuff. Making stuff with it, changing the examples around, extending them, trying to break them, etc., is really the only way it will stick for me.

7

yup, doing that is fun.
But I don’t know. I feel that if I just do the hands on approach, play around with codes, breaking it and then fixing it without going through some concept I might skip over some crucial fundamental. Maybe it is just me.

8

As far as I can see, prototype is a property that only exists on functions, and it only exists in case that someone uses the function as a constructor, like the above Dog function.

What happens under the hood if you type let beagle = new Dog() is that beagle.__proto__ will be set to the object that the prototype property of Dog points at.

You can check that with logging beagle.__proto__ === Dog.prototype // true.

__proto__ points you to the object that beagle inherits its properties and methods from. If you walk up that chain, at some point they all end at the Object prototype. Finally, Object.__proto__ is null, that’s the end of the chain.

prototype however would be more accurately described as the_prototype_to_use_if_this_function_is_used_as_a_constructor.

9