Prototype chaining in JavaScript

Question

I'm reading a book called JavaScript patterns but there's one part where I think the guy is confusing.

The guy actually led up in the book to the klass design pattern, where he developed it piece by piece. He first he presents the problem:

function inherit(C, P) {
C.prototype = P.prototype;
}

He says:

"This gives you short and fast prototype chain lookups because all objects actually share the same prototype. But that’s also a DRAWBACK because if one child or grandchild somewhere down the inheritance chain MODIFIES the prototype, it AFFECTS all parents and grandparents."

However, I actually tried to modify the prototype say() in Child and it had no affect on Parent and in fact Child still pointed to Parent and completely ignored its own prototype of same name, which makes sense since it's pointing to a different memory position. So how can the guy say something like that? Below proves my point:

function Parent(){}

Parent.prototype.say = function () {
return 20;
};

function Child(){
}

Child.prototype.say = function () {
return 10;
};

inherit(Child, Parent);

function inherit(C, P) {
C.prototype = P.prototype;
 } 

 var parent = new Parent();
var child = new Child();


var child2 = new Child()
alert(child.say(); //20
alert(parent.say()); //20
alert(child2.say()); //20

It's impossible for any child or grandchild to modify the prototype!

This leads to my second point. He says the solution to the problem of the possibility of accidentially modifying parent prototypes down inheritance chain (which I can't reproduce) is to break the direct link between parent’s and child’s prototype while at the same time benefiting from the prototype chain. He offers the following as a solution:

function inherit(C, P) {
var F = function () {};
F.prototype = P.prototype;
C.prototype = new F();
}

The problem is this outputs the same exact values as the other pattern:

function Parent(){}

Parent.prototype.say = function () {
return 20;
};

function Child(){
}

 Child.prototype.say = function () {
return 10;
};

inherit(Child, Parent);

function inherit(C, P) {
var F = function () {};
F.prototype = P.prototype;
C.prototype = new F();
}

var parent = new Parent();
var child = new Child();


var child2 = new Child()
alert(child.say(); //20
alert(parent.say()); //20
alert(child2.say()); //20

It doesn't make sense that an empty function somehow breaks a link. In fact, the Child points to F and F in turn points to the Parent's prototype. So they are ALL still pointing to the same memory position. This is demonstrated above, where it outputs the same exact values as the first example. I have no clue what this author is trying to demonstrate and why he makes claims that don't gel for me and that I can't reproduce.

Thanks for response.

For completeness, the inherit function should reset the constructor property on C.prototype. `C.prototype.constructor = C;`. If you test it as is, you'll see that it's pointing to P. That would cause problems trying to call the constructor from the object itself. I have a post that tells you more than you need to know about how to setup inheritance. http://js-bits.blogspot.com/2010/08/javascript-inheritance-done-right.html — Ruan Mendes, Dec 14 '10 at 19:15

score 8 · Accepted Answer · edited Oct 19 '19 at 17:34

For your first point:

What this guy is trying to say, is that the methods for both child and parent will change if you modify the prototype after you created instances.

For example:

function inherit(C, P) {
  C.prototype = P.prototype;
} 

function Parent(){}
function Child(){}

inherit(Child, Parent);

Parent.prototype.say = function () {
  return 20;
};

var parent = new Parent();
var child = new Child();


// will alert 20, while the method was set on the parent.
alert( child.say() );

The same thing happens when you change the child's constructor (which is shared with the parent).

// same thing happens here, 
Child.prototype.speak = function() {
  return 40;
};

// will alert 40, while the method was set on the child
alert( parent.speak() );

And about your second point:

function inherit(C, P) {
  var F = function () {};
  F.prototype = P.prototype;
  C.prototype = new F();
}

The new inheriting function will actually separate the constructor of the parent from the child, because it's not pointing to the same object anymore, but now it's pointing to a prototype of a newly created function that has nothing to do with the parent. So, you actually create a local copy of the parent's constructor, and then create a new instance of the copy, which returns all constructor methods an properties. By changing the constructor of the child now, it will not affect the parent.

function inherit(C, P) {
  var F = function () {};
  F.prototype = P.prototype;
  C.prototype = new F();
}

function Parent(){}
function Child(){}

inherit(Child, Parent);

// same thing happens here, 
Child.prototype.speak = function() {
  return 40;
};

var parent = new Parent();

// will throw an error, because speak is undefined
alert( parent.speak() );

Can you briefly clarify "has nothing to do with the parent" when indeed we assign a reference of P prototype to F prototype. So F prototype must be pointing to P's prototype. When we instantiate F, it contains you say a copy, but not a reference? apply() creates copies but object assignment creates references so when assigning prototype, isn't a refeence, not a copy, created from P to F? And if it's a reference, then that link from C to F to P should still exist. But obviously, it doesn't because your code works. — JohnMerlino, Nov 08 '10 at 22:45

orustammanapov · Answer 2 · 2011-06-05T11:44:46.187

The fact that you can change prototype object by pointing another prototype to it is normal JavaScript behavior. JavaScript's primitive values are immutable but objects and arrays aren't. I'll explain it with simple example:

var person = {name: 'greg', age: 20};

>>>person.name; //prints 'greg'

>>>person.age; //prints 20

var a = person;

>>>a.name; //prints 'greg'

a.name = 'peter';

>>>a.name; //prints 'peter'

>>>person.name; //prints 'peter'

//I've changed person.name through a.name. That's why objects in JavaScript are called mutable

Arrays have the same behavior:

var arr = ['first', 'second', 'third'],
    newArr = arr;

newArr.pop();

>>>newArr; //prints ['first', 'second']

>>>arr; //prints ['first', 'second']

//Frist array was also changed

Let's look at strings numbers and booleans(primitive data types):

var str = 'hello world',

    newStr = str;

>>>str; //prints 'hello world'

>>>newStr; //prints 'hello world'

>>>newStr.toUpperCase(); //prints 'HELLO WORLD'

>>>str; //prints 'hello world'

>>newStr; //prints 'hello world'

//Numbers and booleans have similiar behavior

I had the same issue but i fixed it. Look, i've commented your code, some hints in it should help you:

function Parent(){}

Parent.prototype.say = function () {
return 20;
};

function Child(){
}



/**
*
* The area you should examine i've selected below.
*
*/

//Start BUG

//new say method will not affect the Parent.prototype beacuse it wasn't assigned yet
Child.prototype.say = function () {
return 10;
};

//rewrite Child.prototype and all it's methods with Parent.prototype
inherit(Child, Parent);

//End BUG



function inherit(C, P) {
C.prototype = P.prototype;
 } 

var parent = new Parent();
var child = new Child();


var child2 = new Child()
alert(child.say(); //20
alert(parent.say()); //20
alert(child2.say()); //20

The problem here is, that instead of copying and changing the Parent.prototype you creating new Child.prototype.say method and right after it you rewriting the whole Child.prototype object through Parent.prototype assignment. Just change their order and it should work fine.

Guffa · Answer 3 · 2010-11-08T22:31:43.350

If you change the prototype after inheriting it, you see it change the prototype for the parent also:

function Parent(){}

Parent.prototype.say = function () {
return 20;
};

function Child(){
}

inherit(Child, Parent);

Child.prototype.say = function () {
return 10;
};

function inherit(C, P) {
C.prototype = P.prototype;
 } 

 var parent = new Parent();
var child = new Child();


var child2 = new Child()
alert(child.say()); //10
alert(parent.say()); //10
alert(child2.say()); //10

If you use the modifed version of the inherit function, the Child and Parent prototypes remain separate.

Prototype chaining in JavaScript

3 Answers3