JavaScript Object Inheritence, new() and prototype

programming
1

Hello,
After working in the book by Kirupa, I have a few questions about the Website Link 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.

2

  • 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.

      promFunc()
  .then(value => doSomething) 
  .catch(error => console.log(error))

  • 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 :smile:
Somebody else can probably give you a better example :slightly_smiling_face:

1 Like
3

Kirupa goes more into using new when talking about classes. 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.

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

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

vs

// 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.

// 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

// 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.

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.

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.

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.

1 Like
4

You have to be careful in saying this since primitives are not objects :wink: . 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.

5

My bad, your are right, :slightly_smiling_face:

6

@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 :wink:

2 Likes
7

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!