# Javascript: Question re prototpyes

**URL:** <https://discourse.processing.org/t/javascript-question-re-prototpyes/21149>\
**Category:** Beginners\
**Created:** [May 21, 2020, 9:19pm UTC](https://discourse.processing.org/t/javascript-question-re-prototpyes/21149 "2020-05-21T21:19:28Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 22, 2020, 5:47am UTC](https://discourse.processing.org/t/javascript-question-re-prototpyes/21149/2 "2020-05-22T05:47:31Z")

</div>

> [@femke.blanco](#):
>
> Why would I want to use Object.**create()** when I can just assign one object’s prototype to another object’s prototype?

Your posted example above is about classical (I’d say archaic) inheritance.

For more than half a decade already the modern way of doing that is via keywords `class`, `extends` and `super`:

> **[class - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class)**
>
> The class declaration creates a binding of a new class to a given name.

> **[extends - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends)**
>
> The extends keyword is used in class declarations or class expressions to create a class that is a child of another class.

> **[super - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super)**
>
> The super keyword is used to access properties on an object literal or class's \[\[Prototype\]\], or invoke a superclass's constructor.

Below’s your sketch rewritten to use modern inheritance:

```auto
'use strict';

class Thingy {
  change() {
    return this.char1 + this.char2;
  }
}

class Thingamajig extends Thingy {
  constructor(param1, param2) {
    super();
    this.char1 = param1;
    this.char2 = param2;
  }
}

const thingy1 = new Thingy(),
      thingamajig1 = new Thingamajig(1, 2);

alert(thingamajig1.change()); // 3

```

Back to your classical inheritance example, why is `Thingamajig.prototype = Thingy.prototype;` wrong?

B/c you don’t add anything to Thingamajig, your sketch works w/o any glitches.

But the moment you decide to add any new methods to Thingamajig you will notice those would show up on Thingy as well.

B/c both Thingy & Thingamajig are sharing the same object _prototype{}_.

So instead of assigning Thingy._prototype{}_ to Thingamajig._prototype{}_ you would want a clone of the former.

That’s where Object.**create()** comes in:

> **[Object.create() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create#Examples)**
>
> The Object.create() static method creates a new object, using an existing object as the prototype of the newly created object.

`Thingamajig.prototype = Object.create(Thingy.prototype);`

This time we’re assigning a clone of Thingy._prototype{}_ to Thingamajig._prototype{}_.

So they’re not alias to the same _prototype{}_ object anymore.

And thus we can make changes to Thingamajig._prototype{}_ w/o having those reflected back to Thingy._prototype{}_.

However, we’ve got 1 more detail to deal w/.

Due to Thingamajig._prototype{}_ reassignment, we end up losing its original _prototype{}_.**constructor()** function:

> **[Object.prototype.constructor - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor)**
>
> The constructor data property of an Object instance returns a reference to the constructor function that created the instance object. Note that the value of this property is a reference to the function itself, not a string containing the function's...

And instead it points to Thingy constructor function.

In order to amend that, we need to reassign that back to Thingamajig:  
`Thingamajig.prototype.constructor = Thingamajig;`

So we actually need 2 steps for a correctly classical inheritance:

```auto
Thingamajig.prototype = Object.create(Thingy.prototype);
Thingamajig.prototype.constructor = Thingamajig;

```

P.S.: [Object.**create()**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create) doesn’t actually clone an object, but rather creates an empty 1 w/ its ` __proto__ ` pointing to the 1st passed object parameter:

> **[Object.prototype.\_\_proto\_\_ - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto)**
>
> The \_\_proto\_\_ accessor property of Object instances exposes the \[\[Prototype\]\] (either an object or null) of this object.

---

_[View the full topic](https://discourse.processing.org/t/javascript-question-re-prototpyes/21149)._