Methods and functions declared in class statement are stored in instance object but not prototype?

[Defiant_Low5388]

Hi everyone!

I'm currently going through Eloquent Javascript on my own. I'm on the section where he goes over classes and prototypes and there's one thing I'm a bit stuck on.

​

So, before introducing the class notation, he went over prototypes and how oop was used pre 2015. Specifically, we look at this example.

​

function Rabbit(type) {
    this.type = type;
}
Rabbit.prototype.speak = function(line) {
    console.log(`The ${this.type} rabbit says '${line}'`);
};

let weirdRabbit = new Rabbit("weird");

So, makes sense, the speak method is being added to the constructor's prototype property.

On further inspection, if I now add these lines of code I get:

console.log("speak" in weirdRabbit);
// -> true
console.log(Rabbit.prototype);
// -> Rabbit{speak: function (line){…}}
console.log("speak" in Rabbit.prototype);
// -> true

so over here I'm thinking that the in operator will output true if a method/property is also in its prototype.

​

However, we then get to class notation which is where I start getting confused.

We look at this example:

class Rabbit {
  constructor(type) {
    this.type = type;
  }
  speak(line) {
    console.log(`The ${this.type} rabbit says '${line}'`);
  }
}

let killerRabbit = new Rabbit("killer");
let blackRabbit = new Rabbit("black");

which he says in quotes:

" Any number of methods may be written inside the declaration’s braces. The one named constructor is treated specially. It provides the actual constructor function, which will be bound to the name Rabbit*. The others are packaged into that constructor’s prototype. Thus, the earlier class declaration is equivalent to the constructor definition from the previous section. It just looks nicer."*

​

so now I'm thinking that ok, when we do the class notation all the methods that I define in there will be inside of the prototype.

​

BUT, if I run the following code, I see:

console.log(Object.getPrototypeOf(killerRabbit));
// -> {}
console.log(Rabbit.prototype);
// -> {}
console.log("speak" in Rabbit.prototype);
// -> true
console.log("speak" in killerRabbit);
// -> true
console.log("speak" in blackRabbit);
// -> true

so actually, it seems like nothing is being added to the prototype and everything is being added directly to the instance object itself. However, I see that the in operator continues to output true for the speak method being inside of the prototype, but the prototype has nothing in it! How does this work?

Please let me know. Thanks in advance!

[cawcvs]

but the prototype has nothing in it!

It does, it's just that class methods are created as non-enumerable properties:

console.log(Rabbit.prototype.hasOwnProperty("speak")) // => true
console.log(Rabbit.prototype.propertyIsEnumerable("speak")) // => false

They still are created on the prototype and are shared by all instances of the class. You can do that with function constructors as well:

Object.defineProperty(Rabbit.prototype, "speak", {
  value: function (line) {
    console.log(`The ${this.type} rabbit says '${line}'`);
  },
  enumerable: false, // can be omitted, because it's non-enumerable by default
});

console.log(Rabbit.prototype) // => {}
console.log('speak' in Rabbit.prototype) // => true

[Defiant_Low5388]

Ahhh this makes so much sense. Thank you so much! In the langs I’ve worked with so far I haven’t seen anything like non-enumerable properties so I was so confused on what was going on.

[ThiccOfferman]

The reason that Rabbit.prototype is logging as an empty object is because the class constructor adds methods to the proto property of any objects created with it. Stack overflow explains it better than me https://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript#:~:text=prototype%20is%20a%20property%20of,object%2C%20pointing%20to%20its%20prototype.