Inherit properties from super

Question

I'm new at JS - and like many JS-beginners I'm somewhat confused about property-inheritage. As far as I understood a constructor function owns a property called prototype. This property points to a prototype-object. So when I define two constructors like:

function Super(){
this.x = 1 }

and

function Sub(){
this.y = 2 }

they will both point to a prototype-object.

With the following line of code Sub will inherit the property of Super:

Sub.prototype = new Super();

Now the question: what exactly happens here? Will the "old" prototype-object - which is pointed by Sub.prototype - just be replaced by the new object created with new Super()?

Kind regards Henning

"*With the following line of code*" - where did you get that from? [Using `new` there is severely outdated](https://stackoverflow.com/questions/12592913/what-is-the-reason-to-use-the-new-keyword-here). — Bergi, Oct 02 '18 at 17:27
"*Will the "old" `Sub.prototype` object just be replaced by the new object*" - yes. Although this doesn't really achieve anything. It's not until you start instantiating `new Sub` objects while `Sub.prototype` has that new value. — Bergi, Oct 02 '18 at 17:30
try Object.create() https://stackoverflow.com/questions/10430279/extending-an-object-in-javascript — Allen Wong, Oct 02 '18 at 17:49
@Bergi: Thanks for the link. Actualiy I stumbled upon the "sub.prototype = Object.create(Super.prototype)"-approach in the first place. Since I did'nt understood this, I started with the outdated approach. — readme_txt, Oct 02 '18 at 17:51
OK. Do you understand what `Object.create` (on its own, not in this scenario) achieves? Do you know what the `new` operator does, and what it has to do with the `.prototype` property of the constructor function? — Bergi, Oct 02 '18 at 18:33
@Bergi As far as I understood Object(p).create creates a new object with given properties of the prototype p. New calls a constructor-function and also creates an object. The .prototype-property point to the prototype-object which provides the properties at Object.create and new? — readme_txt, Oct 02 '18 at 19:01
@readme_txt `Object.create(p)` creates a new *empty* object (without any own properties) that *inherits* from `p`, so if you access a property and it doesn't exist there you get the one from `p`. — Bergi, Oct 02 '18 at 19:03
@Bergi As far as I understood Object(p).create creates a new object with given properties of the prototype p. New calls a constructor-function and also creates an object. The .prototype-property point to the prototype-object which provides the properties at Object.create and new? — readme_txt, Oct 02 '18 at 19:09
@readme_txt "*new object with given properties*" - no, those properties are inherited - dynamically: if you add/remove/alter properties on the prototype object, this change is reflected when you try to access the property on the object. "*The .prototype-property point to the prototype-object*" - no, the [internal inheritance relationship is not the same as the physical `.prototype` property](https://stackoverflow.com/q/9959727/1048572) — Bergi, Oct 02 '18 at 19:25
@Bergi Thank you for your Answer! The .prototype-property only exists in functions, right? So I thought, that the .prototype-property points to the prototype-object which is used for creating objects via new and provide them with methods defined in the prototype-object. The __proto__ property in turn refers to the objects prototype along the prototype-chain. — readme_txt, Oct 02 '18 at 20:58

score 2 · Answer 1 · answered Oct 27 '18 at 00:37

Yes, in a kind of way

function Super(){
  this.x = Math.random()
}

function Sub(){
  this.y = 2 //this will be keeped
}
Sub.prototype.myMethod = function(){} //this will be lost

Sub.prototype = new Super();

but by this way you rely on singleton

console.log(new Sub().x === new Sub().x) //true

if you want to complete overwrite prototype, you can do this way

Sub.prototype = Super.prototype

if you want to extends overwriting prototype, you can do this way

Object.assign(Sub.prototype, Super.prototype)

if you want to extends prototype, you can do this way

Object.assign(Sub.prototype, {...Super.prototype, ...Sub.prototype})

or in modern ES6

class Sub extends Super{
  constructor(){
    super()
    //...
  }
}

Inherit properties from super

1 Answers1