How do custom objects inherit from Javascript Object

Question

How does a custom created object have access to methods such as .toString() method which is an Object method. How is a custom class linked to an Object

This article states

All objects ultimately have the Object constructor at the end of their prototype chain. This means any methods or properties added to the Object property are automatically available to all objects.

In the previous example, if we called rufus.toString(), javascript would check the rufus object, then the Cat object, then the Pet object. The Pet object’s prototype was created with the Object constructor (using the object literal shortcut) so javascript would then find the toString() method on the Object’s prototype

Now after reading through the article I understand that in order to inherit from an object we have to specify in the prototype of the function constructor of an object the object we would like to inherit from. Now I read that by default the prototype property is empty.Then how can an object have the property toString() ? I dont understand the statement

The Pet object’s prototype was created with the Object constructor (using the object literal shortcut)

Update:

I read that the prototype property of the constructor function is empty by default. I read that here I have pasted the quote here

First, every JavaScript function has a prototype property (this property is empty by default), and you attach properties and methods on this prototype property when you want to implement inheritance.

How do we inherit from the javascript Object then ?

*Now I read that by default the prototype property is empty.* Where did you read that? Note that the prototype of an object is **not** the same as the prototype property (usually associated with a constructor). — , May 15 '16 at 08:21
@torazaburo could you explain that a little bit. Could you explain the difference between protoype of an object and the prototype property ? I thinking i am mixing them .. — James Franco, May 15 '16 at 08:27
Yes, I too think you are. There are better explanations out on the web than I could give in a paragraph. Search for "difference between prototype and `__proto__`" or something like that. — , May 15 '16 at 13:21

score 3 · Accepted Answer · edited May 23 '17 at 12:31

3

All objects inherit the properties of Object via prototypal inheritance. If you do :

var b = {};
console.log(b.__proto__)

you can see all the properties inherited from Object.

So, what happens is that when you do b.toString(), it will look for the toString() function on b, then it will keep going up the prototype chain and ultimately reach Object which has this function.

EDIT:

Function Constructors vs Objects:

Just to clarify, a function constructor defined like:

var a = function() {
   this.b = "b";
   this.c = "c";
}

has its prototype set to function. This can be verified by doing console.log(a).

However, we use a to create new Objects like this:

var d = new a();

And these objects have their prototype set to Object which, again, can be verified by doing console.log(d).

More details here.

edited May 23 '17 at 12:31

Community

1
1

answered May 15 '16 at 08:19

Tarun Dugar

8,921
8
42
79

I read that the __proto__ property is a reference to the prototype property and by default the prototype property is empty unless explicitly specified. How can a custom object implicitly inherit from `Object` then ? – James Franco May 15 '16 at 08:24
Where did you read this? For a detailed understanding refer https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype – Tarun Dugar May 15 '16 at 08:28
prototype property for a constructor function, not an object. Those are two separate things. – Tarun Dugar May 15 '16 at 08:34
Could you post a link that explains the difference ? – James Franco May 15 '16 at 08:36

Mohammad Usman · Answer 2 · 2016-05-15T08:49:57.337

Referring from JavaScript The Definitive Guide:

All objects created by object literals i.e {} have the same prototype object, and we can refer to this prototype object in JavaScript code as Object.prototype. Objects created using the new keyword and a constructor invocation use the value of the prototype property of the constructor function as their prototype. So the object created by new Object() inherits from Object.prototype just as the object created by {} does. Similarly, the object created by new Array() uses Array.prototype as its prototype, and the object created by new Date() uses Date.prototype as its prototype.

So all objects which are created using {} literals will have Object.prototype as their prototype and have access to methods defined by Object.prototype for example toString() etc etc.

The new operator is used to create and initialize new objects. The new keyword must be used with a function invocation. When a function invocation is used with new keyword it is called constructor invocation.

Objects created with new and function invocation will inherit from the prototype property of constructors. So objects created with new Date() will inherit from Date.prototype and objects created with new Array() will inherit from Array.prototype.

You can change this prototype property to make objects inherit from your own custom objects. For example

function myFunction() {
    this.name = 'a';
    this.age = 20;
}

myFunction.prototype = {
    toString: function() {
        // you can override default toString() method here..
    },

    // you can define as many functions here as you want.
};

var myObj = new myFunction();

Object myObj will inherit from myFunction.prototype and all methods defined in this objects will be available to myObj.

EcmaScript5 defines a new method Object.create() for creating objects have prototype other than Object.prototype. For example

var prototypeObject = {a: 1, b: 2, c: 3};
var obj1 = Object.create(prototypeObject);

Now obj1' will inherit fromprototypeObject' and not from Object.prototype

score 0 · Answer 3 · 2016-05-16T21:56:02.133

You asked

How does a custom created object have access to methods such as .toString() method which is an Object method. How is a custom class linked to an Object

From reading what you posted you seemed by have over thunk it. You got it, then you ungot it. To answer the question without including any code.

In programming, all objects inherit from a default object. Think of this as JavaScripts template, it has to start with something and it has base properties and methods and you build on top of that. Each object has different base properties. I stated in a prior post that the prototype chain ends here, but that is not entirely accurate, as the prototype chain end in null.

How do custom objects inherit from Javascript Object

3 Answers3