0

i'm new to JavaScript and now just learning about classes. Where i learned from (JavaScript.info), it is said that class extends sets the prototype value of the parent class as __proto__ of the child class. Meaning i can just do something like:

(ChildClass.__proto__ === ParentClass) // true

But something else happens. Have a look at this block of code i wrote:

class thing {
    constructor() {
        console.log("hello")
    }

    doAThing() {
        console.log("Doing a very cpu heavy thing.")
    }
}

class extraThing extends thing {
    doAnotherThing() {
        console.log("doing another thing")
    }
}

let thing1 = new thing();
let thing2 = new extraThing();

console.log(Object.getOwnPropertyNames(thing1.__proto__));
// [ 'constructor', 'doAThing' ] - links to itself because theres no __proto__ set...

console.log(Object.getOwnPropertyNames(thing2.__proto__));
// [ 'constructor', 'doAnotherThing' ] - links to itself although it extends "thing".?

I can't understand what's happening... Where does the child class take the parent class's methods from if its not in __proto__.

By the way, as far as i understood, when you call a class with new, it just runs the constructor as a normal constructor function, making classes just a syntactic suger (???). And as far as i know, constructor functions (normal functions that are ran with new) just return an object. So i assume that objects or instances that are returned by a class are just normal objects...

Although, i am aware that there are differences. Constructor functions that are ran under a class have a hidden property named [[IsClassConstructor]], but i don't understand how that would change the returned object, because as far as i know, it just changes the behavior of new (like not letting you call a class without new).

krembo master
  • 53
  • 5
  • [Probably forget about `__proto__`; there are better ways of doing things now.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto) – Pointy Nov 05 '22 at 14:03
  • @Pointy i am aware of Object.getPrototypeOf() and Object.setPrototypeOf(), i just used `__proto__` for this question. – krembo master Nov 05 '22 at 14:06
  • 2
    "*`ChildClass.__proto__ === ParentClass`, but something else happens*" - well that's not what your code is looking at. In your example, it would be `extraThing.__proto__ === thing`, which is indeed true. But you're looking at the prototype objects! The prototype of `thing1` is `thing.prototype`, and the prototype of `thing2` is `extraThing.prototype`, and the prototype of `extraThing.prototype` is `thing.prototype` - which is actually the more relevant thing that `extends` does, since this is what allows you to access `thing2.doAThing()`. – Bergi Nov 05 '22 at 14:31
  • I tried also accessing `thing1.prototype`, but it returned undefined. – krembo master Nov 05 '22 at 14:40
  • `.prototype` is a property of the class (constructor function), not of the instance. – Bergi Nov 05 '22 at 15:33

0 Answers0