Learning .prototype

Question

Edit: for those people seeing this post in the future, this site was undoubtedly critical for me to digest Javascript. If you're coming from a traditional OOP background, I HIGHLY recommend it. The UML-esq diagrams were amazing. I still can't get my head around what the .prototype property in Javascript is. Is it simply a reference to another object? Or is it a reference to a pointer to another object? I come from C/C++/x86 and just can't see how it works. Let's look at some examples of how I currently see things; it'd help to point out my errors to see how things work. I don't even know if some of these are valid syntax. `Object` and `Function` are the global object/function objects respectively. ``` 1 // Global.prototype = ?? 2 // Function.prototype = ?? 3 4 var obj1 = {}; // obj1.prototype = Object 5 obj2 = {}; // obj2.prototype = Object 6 7 var func1 = function() {}; // func1.prototype = Function 8 func2 = function() {}; // func2.prototype = Function 9 function func3() {} // func3…

Accepted Answer

Wow, that's a lot of questions. Let's work through them.

Is it simply a reference to another object? Or is it a reference to a pointer to another object?

There are no pointers in JavaScript. Yet, a variable or property holding "an object" is actually holding a reference to the object, so other variables can hold references to the same object.

```
Global.prototype = ??
```

The global object (`window` if you want), where all global variables are defined, has no prototype (don't care about exceptions in some environments).

I still can't get my head around what the .prototype property in Javascript is.

The `.prototype` property is a property that all function objects have, pointing to their prototype object (a plain object).

You must not confuse it with the internal prototype reference which each object has. That prototype points to the object where properties are looked up which an object doesn't have itself.

```
Function.prototype = ??
```

This is the object from which all Function objects inherit. It contains things like `call` or `bind`.

```
var obj1 = {};              // obj1.prototype = Object
var func1 = function() {};  // func1.prototype = Function
```

Yes, kinda. I think you've got the concept, but didn't know the terminology. While `func.prototype` is a different thing, the `obj.prototype` property doesn't even exist. However, you meant the internal prototypes - we can access them via the `Object.getPrototypeOf` function. And they don't refer to the constructor functions, but their prototype objects. Here's the correction:

```
Object.getPrototypeOf(obj1) === Object.prototype
Object.getPrototypeOf(func1) === Function.prototype
```

should it be 'new Foo' or 'new Foo()'?

That doesn't matter, they're equivalent. You only need the brackets explicitly when you want to pass arguments.

```
var Foo = function() { this.prop1 = 0; }
var foo = new Foo();
```

Again, your assumptions were correct but expressed wrong. Let's work through the details.

Above, I've talked about "prototype objects". What are those? They are plain objects which get implicitly created with every function. In this case, it's `Foo.prototype` - an empty object. So we deal here with three objects: The `Foo` constructor function, its `Foo.prototype` prototype object and the `foo` instance.

What's special about `foo`? It's the first thing which the `new` operator does. When a function is getting invoked as a constructor - with `new` - then its `.prototype` property is accessed and a new object is instantiated with its internal prototype set to that prototype object. That's the miraculous thing. After that the function is called on the new instance so that `this` is the new object; and in your case it creates the `.prop1` property on the instance. Then the result is returned (and assigned to `foo`).

How to make use of that magic now? The point is to create properties on the prototype object, which will be inherited then.

```
// modify `Foo.prototype`, the object which `foo` inherits from:
Foo.prototype.prop2 = 1;
console.log(foo.prop2); // 1!
```

I also don't understand swapping prototypes around.

The problem is that this is quite impossible. Once instantiated, an object's prototype chain is quite static. However, you don't need that often.

```
goo.prototype = new Foo();
```

That didn't work because the `.prototype` property is not what you expected.

```
var c = new C();
C.prototype = new A();
```

That does work only a littlebit. Have a look above at what `new` does - it looks up the `.prototype` property of the constructor only once. The internal prototype stays locked then - you don't change the `c` instance. However, if you would create a new instance `var d = new C()` now then it would inherit from the `A` instance.

I hope this helps; if you have further questions please comment.

Learning .prototype

Solution

Problem