Javascript Prototype

I AM trying to understand js prototype property: my sample code function Container(param) { this.member = param; } var newc = new Container('abc'); Container.prototype.stamp

Solution 1:

You are setting Container prototype to Box() after the newc instance was already created.

Reorder the statements as follows:

functionContainer(param) {
    this.member = param;
}

functionBox() {
    this.color = "red";
    this.member = "why";
}

Container.prototype = newBox();
Box.prototype.test = "whatever";
Container.prototype.stamp = function (string) {
    returnthis.member + string;
}

//Here the containers prototype setup is complete.var newc = newContainer('abc');

document.write(newc.stamp('def'));

document.write(newc.test);

Solution 2:

If sounds like you want to know WHY it is behaving the way it is, and not just "fix" the code. So here's what's going on.

As you saw, if you change the prototype of "Container", you will actually change the properties for new objects AND objects already instantiated. So:

functionContainer(param) {
    this.member = param;
}

var newc = newContainer('abc');

// setting a new property of the prototype, after newc instantiated.Container.prototype.stamp = function (string) {
    returnthis.member + string;
}

// This already-instantiated object can access the stamp functiondocument.write(newc.stamp('123')); // output: abc123

So there's no problem with the above, as long as you don't call the new method before it's defined. Now the next point. Add this to the above:

// Our Box objectfunctionBox() {
    this.color = "red";
    this.member = "why";
}

Container.prototype = newBox();
var newd = newContainer('fgh');
document.write(newd.stamp('456')); // output: ERROR

Error! But that makes sense, right? You totally wiped out the "Container" prototype and replaced it with the one from "Box", which has no "stamp" function.

I am going to assume you want "Box" to inherit from "Container". That would be logical from the naming convention. If you want to do that, replace the previous section with this:

// Our Box objectfunctionBox() {
    this.color = "red";
    this.member = "why";
}

// This inherits from Container. Note that we can//   do this before or after we declare "Box"Box.prototype = newContainer();

Box.prototype.test = "Whatever";
var b = newBox("jkl"); // note: "jkl" is ignored because "Box" sets "member" to "why"document.write(b.test); // output: Whateverdocument.write("<br>");
document.write(b.stamp("345")); // output: why345

So now we have a "Box" that can call its own methods and parameters, and also call them from its parent "Container".

So the big picture is that an object will look at its own prototype for a method or something, and if it doesn't find it there it will look in the prototype of the thing it inherited from, and so on. The other big point is that setting something in the prototype makes it immediately available in all future AND current instances of that object.

Solution 3:

An object does not contain a reference to its constructor which it uses to get at the prototype. If it did, then the code would work as you expected.

Instead, an object contains a reference to its prototype that is set when it is created.

From the language spec section 4.2.1:

Every object created by a constructor has an implicit reference (called the object’s prototype) to the value of its constructor’s “prototype” property. Furthermore, a prototype may have a non-null implicit reference to its prototype, and so on; this is called the prototype chain. When a reference is made to a property in an object, that reference is to the property of that name in the first object in the prototype chain that contains a property of that name. In other words, first the object mentioned directly is examined for such a property; if that object contains the named property, that is the property to which the reference refers; if that object does not contain the named property, the prototype for that object is examined next; and so on.