# JavaScript Object Inheritence, new() and prototype

**URL:** <https://forum.kirupa.com/t/javascript-object-inheritence-new-and-prototype/646731>\
**Category:** programming\
**Created:** [March 21, 2021, 10:15pm UTC](https://forum.kirupa.com/t/javascript-object-inheritence-new-and-prototype/646731 "2021-03-21T22:15:40Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Belfry777](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/belfry777/32/12917_2.png) [@Belfry777](https://forum.kirupa.com/u/Belfry777)\
**Post date:** [March 21, 2021, 10:15pm UTC](https://forum.kirupa.com/t/javascript-object-inheritence-new-and-prototype/646731/1 "2021-03-21T22:15:40Z")

</div>

Hello,  
After working in the book by Kirupa, I have a few questions about the [Website Link](http://sporto.github.io/blog/2013/02/22/a-plain-english-guide-to-javascript-prototypes/) listed at the end of the chapter (see the bottom part about constructor functions). Firstly, I do not understand what new() does, or what the “prototype” means when we are talking about a function. According to the author, this (function) prototype should not be confused with the inheritance chain prototype, but his explanation is not comforting. New() is supposed to create a new instance something else, but unlike its simple friend create() it has a lot more implications. Thanks for your time.

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [March 22, 2021, 3:07pm UTC](https://forum.kirupa.com/t/javascript-object-inheritence-new-and-prototype/646731/2 "2021-03-22T15:07:42Z")

</div>

- In Javascript **everything is an object** except a primitive

- The browser has **no concept** of any object that is not built in (built in examples include: window, document, element, function, Promise) **until you declare it**

- Usually you first **declare** a function/ object / array ect which is like adding entries to the browser **encyclopedia of objects** (unless it is already built in)

- Then you can do something with the object it like call it/ **access a value/ call a method on the object**

If you `console.log(Promise.prototype)` you can see the Promise object and all of the methods that you can call on that object.

```
    Promise.prototype
    catch: function catch()
    constructor: function Promise()
    finally: function finally()
    then: function then()

```

- You can have **multiple Promises running** at one time so when you want to use a promise (the function is already inbuilt into the browser) you ‘clone’ it with `new Promise` e.g.

let promFunc = function(){ return `new Promise`(function(resolve, reject){ do something; `Promise.resolve()`})}

- You can then call methods on the Promise object eg.

- The Promise prototype is the Promise object with all its methods.

- new Promise is like cloning that object so that you can use it and have multiple instances of promise at the same time

I hope this helps, I don’t use much OO or classes I usually use a procedural or functional style but I do mess around with `Element.prototype` a bit 😄  
Somebody else can probably give you a better example 🙂

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [March 22, 2021, 3:42pm UTC](https://forum.kirupa.com/t/javascript-object-inheritence-new-and-prototype/646731/3 "2021-03-22T15:42:48Z")

</div>

Kirupa goes more into using `new` when [talking about classes](https://www.kirupa.com/javascript/classy_way_to_create_objects.htm). While right now JavaScript can use `class` to define classes, in the past before the `class` keyword was available, normal functions were used instead. They represented the `constructor` of a `class` definition and could be used the same way classes are used today to create new, custom objects.

```auto
// modern JavaScript
class MyObject {
  constructor (value) {
    this.value = value
  }
}

const obj = new MyObject(3)
console.log(obj.value) // 3

```

vs

```auto
// older versions of JavaScript
function MyObject (value) {
  this.value = value
}

var obj = new MyObject(3)
console.log(obj.value) // 3

```

The prototype is where shared methods are stored for these new object instances. The `class` syntax hides this detail but you have to be explicit with the older approach.

```auto
// modern JavaScript
class MyObject {
  constructor (value) {
    this.value = value
  }
  doubleMyValue () {
    this.value *= 2
  }
}

const obj = new MyObject(3)
console.log(obj.value) // 3
obj.doubleMyValue()
console.log(obj.value) // 6

```

vs

```auto
// older versions of JavaScript
function MyObject (value) {
  this.value = value
}

MyObject.prototype.doubleMyValue = function () {
  this.value *= 2
}

var obj = new MyObject(3)
console.log(obj.value) // 3
obj.doubleMyValue()
console.log(obj.value) // 6

```

The confusion here is that all objects have this thing we refer to by name as a “prototype”. It is another object that the object can look to in order to access properties or methods that doesn’t have itself. In the examples above, `obj` only has one property itself, `value`. It doesn’t have its own `doubleMyValue()` method. However, `obj`'s “prototype” object does.

```auto
console.log(obj.hasOwnProperty('value')) // true
console.log(obj.hasOwnProperty('doubleMyValue')) // false
const objPrototype = Object.getPrototypeOf(obj)
console.log(objPrototype.hasOwnProperty('doubleMyValue')) // true

```

Given that `obj`'s prototype has that method, it too can act like it does and use it as though it were its own. This is the foundation of how inheritance works in JavaScript.

The problem is that classes and (most) functions have a _property_ named `prototype` - we saw this above using the old approach to defining `doubleMyValue()`. This property does NOT represent the “prototype” of the function or class. To get that, you would use `Object.getPrototypeOf()` as seen above, not the `prototype` property.

```auto
function MyObject (value) {
  this.value = value
}

var MyObjectPrototype = Object.getPrototypeOf(MyObject)
console.log(MyObjectPrototype === MyObject.prototype) // false

```

This is because the `prototype` property in classes and functions is used as the “prototype” of the objects they create when used in combination with `new`.

```auto
function MyObject (value) {
  this.value = value
}

var obj = new MyObject(3)
const objPrototype = Object.getPrototypeOf(obj)
console.log(objPrototype === MyObject.prototype) // true

```

So the property name `prototype` is a bit of a misnomer and it really would have been better named something like `prototypeForInstances` since it’s the instances that are inheriting from the class/function through its `prototype` property.

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [March 22, 2021, 3:45pm UTC](https://forum.kirupa.com/t/javascript-object-inheritence-new-and-prototype/646731/4 "2021-03-22T15:45:07Z")

</div>

> [@steve.mills](#):
>
> In Javascript **everything is an object** even a function

You have to be careful in saying this since primitives are not objects 😉 . And while many primitives can be _treated_ like objects and still work (due to wrapping/autoboxing), there are two specific primitives for which that does not work at all: `null` and `undefined`.

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [March 22, 2021, 3:51pm UTC](https://forum.kirupa.com/t/javascript-object-inheritence-new-and-prototype/646731/5 "2021-03-22T15:51:05Z")

</div>

My bad, your are right, 🙂

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [March 22, 2021, 5:21pm UTC](https://forum.kirupa.com/t/javascript-object-inheritence-new-and-prototype/646731/6 "2021-03-22T17:21:58Z")

</div>

@Belfry777 and I don’t know if this will be any help at all, but here’s a “tip” I did walking through object inheritance and use of prototypes. Its difficult to explain succinctly, and I’m not confident I did a good job at it, but maybe it can help 😉

> [@JS Tip of the Day: The Deal With Prototypes](http://forum.kirupa.com/t/js-tip-of-the-day-the-deal-with-prototypes/643123):
>
> The Deal With Prototypes Level: Beginner Prototypes in JavaScript are objects that other objects look to when they can’t find properties that are being requested of them. If the object doesn’t have the property itself, it can instead use the value of that property in its associated prototype. You can set the prototype for an object using Object.setPrototypeOf(). let me = {}; let friend = { answer: 42 }; console.log(me.answer); // undefined Object.setPrototypeOf(me, friend); // (me's protot…

---

<div class="post-metadata">

**Author:** ![Belfry777](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/belfry777/32/12917_2.png) [@Belfry777](https://forum.kirupa.com/u/Belfry777)\
**Post date:** [March 23, 2021, 11:48pm UTC](https://forum.kirupa.com/t/javascript-object-inheritence-new-and-prototype/646731/7 "2021-03-23T23:48:40Z")

</div>

Thank you Senocular!  
Your response is very informative. I will continue to look over it until I understand them. I need to look at constructor functions, and understand them too.  
Thank you for your time!