Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Object vs. Prototype in Javascript

I am trying to understand prototypes and dealing with some interference from my understanding of various other constructs.

Can someone explain to me what Object is in Javascript? To clarify, I know what an object(with a lower-case 'o') is, but not what Object (with a capital 'O') is. I understand that any object that is created in JS has a hidden prototype object attached to it. The prototype object is both a property of the parent object, and an object itself, with its own properties that can be accessed using the following command objectName.prototype; additionally, among the properties of the prototype object is a prototype object. Is Object the same as prototype object? If not, what is Object -- the global object? How does it/they relate to the window object or global object?

Thanks in advance for your help. I've scoured the internet for an answer on this, and couldn't find one that was both accessible or understandable. Although I'm not a 10-year old, if you would kindly explain it to me as though I am, I won't be offended, and will greatly appreciate the effort.

like image 920
efw Avatar asked Nov 07 '18 23:11

efw


1 Answers

I understand that any object that is created in JS has a hidden prototype object attached to it.

Basically yes. Every object has an internal property, denoted as [[Prototype]] in the specification, whose value is simply (a reference to) another object. That other object is the first object's prototype.

A prototype object itself is not hidden though, and you can explicitly set the prototype of an object, via Object.create:

var foo = {x: 42};
var bar = Object.create(foo);

console.log(bar.x); // 42
console.log(Object.getPrototypeOf(bar) === foo); // true

In this example, foo is the prototype of bar.

The prototype object is both a property of the parent object, and an object itself

First of all, there isn't only one prototype object. Any object can act as a prototype and there are many different prototype objects. And when we say "prototype object", we are really referring to an object that has the "role" of a prototype, not to an object of a specific "type". There is no observable difference between an object that is a prototype and one that isn't.

I'm not quite sure what you mean by "property of the parent object" here. An object is a not property, at most it can be the value of a property. In that sense, yes, an object that is a prototype must be the value of the internal [[Prototype]] property of another object.

But that is not much different than every other relationship between two objects (so nothing special). In the following example bar is an object and also assign to a property of foo:

var bar = {};
var foo = {bar: bar};

Is Object the same as prototype object?

No.

Object is (constructor) function for creating objects. var obj = new Object(); is the same as var obj = {};. However, using object literals ({...}) is more convenient which is why you are not seeing new Object used that much.

For every constructor function C, the following holds true:

Object.getPrototypeOf(new C()) === C.prototype

i.e. the value of the C.prototype property becomes the prototype of new instance of C created via new C.

Object.prototype is actually the interesting part of Object and the most important one. You may have heard about the "prototype chain". Because a prototype is just an object, it has itself a prototype, which is an object, etc. This chain has to end somewhere. Object.prototype is the value that sits at the end of basically every prototype chain.
There are many prototype chains because every value that is not a primitive value (Boolean, Number, String, Null, Undefined, Symbol) is an object (which includes functions, regular expressions, arrays, dates, etc).

If not, what is Object -- the global object?

See above. It's not the global object, the global object in browsers is window, and while every JavaScript environment must have a global objects, at least so far there is no standard way in the language to reference it (edit: I guess this in the global environment would one cross-platform way).

How does it/they relate to the window object or global object?

The only relation really is:

  • Object is a property of the global object, and thus a global variable.

You may think the global object's prototype is also Object.prototype, but that is not necessarily the case


Reading material:

  • You Don't Know JS: this & Object Prototypes ; all of gettify's books in the series are pretty awesome.
  • http://felix-kling.de/jsbasics/ ; shameless plug for some very concise slides that I created for a JavaScript class that I'm teaching from time to time. Might not be detailed enough to be useful on it's own (and contains typos ;) )
like image 146
Felix Kling Avatar answered Oct 04 '22 16:10

Felix Kling