# 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:** 4
**Page:** 1
### Author:  [@femke.blanco](https://discourse.processing.org/u/femke.blanco)
#### Post date: [May 21, 2020, 9:19pm UTC](https://discourse.processing.org/t/javascript-question-re-prototpyes/21149/1 "2020-05-21T21:19:28Z")
Why would I want to use **Object.create()** when I can just assign one object’s prototype to another object’s prototype?
```auto
function Thingy() {}
Thingy.prototype.change = function () {
return this.char1 + this.char2;
}
function Thingamajig(param1, param2) {
this.char1 = param1;
this.char2 = param2;
}
Thingamajig.prototype = Thingy.prototype;
var thingy1 = new Thingy();
var thingamajig1 = new Thingamajig(1, 2);
alert(thingamajig1.change());//3
```
Thanks in advance.
---
### Author:  [@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")
> [@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.
---
### Author:  [@femke.blanco](https://discourse.processing.org/u/femke.blanco)
#### Post date: [May 25, 2020, 11:35pm UTC](https://discourse.processing.org/t/javascript-question-re-prototpyes/21149/3 "2020-05-25T23:35:11Z")
Thanks for your reply. For my purpose, I am using an old environment which does not support ES6, so I am forced to use the outdated ways. Thanks again.
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [May 25, 2020, 11:57pm UTC](https://discourse.processing.org/t/javascript-question-re-prototpyes/21149/4 "2020-05-25T23:57:24Z")
> [@femke.blanco](#):
>
> , I am using an old environment which does not support ES6,
You can use [BabelJS.io](http://BabelJS.io) to convert modern JS to old JS when you’re ready to deploy it: 💡
> **[Babel · The compiler for next generation JavaScript](https://babeljs.io/repl/#?browsers=defaults%2C%20not%20ie%2011%2C%20not%20ie_mob%2011&build=&builtIns=false&spec=false&loose=true&code_lz=OQVwzgpgBGAuBOBLAxrYBuAUJ5AbAhmGFACoAWiAdgOYCeUA3plFMmfjRABQCUjzLKPAiwQ8SlFgUwAOjb54ARigBqSdLnt4AJiwsAvpkM4CRUhRr4AtvgBWialAgAPWBEoATYuSp1-LZAB7Sjh4EFRA-C4ABwVrRQAaKFj4a20-JkEYEGiIKJ49QSlEWXklKABeZLirRUKWYtKtbUrq1KtdAUNjIJDYdV9aZSrKCAB3c0HeBIEs4ssbe2phqFGJnwW7By5EqHSsTHxcPNgueeprLeXNDmpuHgKoAHonqABmIA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=true&fileSize=true&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Ces2015-loose%2Cenv&prettier=true&targets=&version=7.9.6&externalPlugins=)**
>
> The compiler for next generation JavaScript