When defining function on a prototype, is the function recreated on each new instance?

Question

I have the following code in javascript, and I am unclear on the underlying functionality of the following prototyping:

function TestClass()
{
}

var externalFunction = function() {
    console.log("hit the function defined internally");
};

Object.defineProperty(TestClass.prototype, "myFunction", {
    enumerable: false,
    writable: false,
    value: externalFunction
});

TestClass.prototype.myFunction2 = function() {
    console.log("hit the function defined on the prototype");
}

var tc = new TestClass();
var tc2 = new TestClass();

console.log(tc.myFunction === tc2.myFunction);
console.log(tc.myFunction2 === tc2.myFunction2);

Are either of myFunction or myFunction2 re-created whenever a new TestClass() is defined, or will the new TestClass() contain pointers to the original myFunction and myFunction2?

The way prototypal inheritance works is that a chain of objects is created for the purpose of property resolution. Your `tc` and `tc2` objects will not have (own) a `myFunction` property, so the property will be searched for in its "prototype chain". The first object in that chain will be the `TestClass.prototype` object, where it will find the property and return the function. All objects created from the `TestClass` constructor will have `TestClass.prototype` as the first object in their prototype chain. — cookie monster, Apr 18 '14 at 16:08

score 3 · Accepted Answer · edited May 23 '17 at 10:26

Every object you create using the TestClass function as a constructor e.g.

var test1 = new TestClass();
var test2 = new TestClass();

will have the same prototype. What happens when you try to call the function :

test2.myFunction2();

is that the JS interpreter will look for myFunction2 on the object referenced by test2. It doesn't have a myFunction2 property, so it looks up the chain to see if the prototype of test2 has a property of type function called "myFunction2" - which it does, and so it calls it.

So to answer the question :

or will the new TestClass() contain pointers to the original myFunction and myFunction2?

The object you create with new TestClass() will contain a reference to an object (it's prototype) and that object contains the references to the two functions. Note that the reference between the new object and it's prototype is kind of secret, see :

here

This can be a source of extreme confusion since there are two things called "prototype" - there is a property of a the constructor function called "prototype" and there is the secret link (called e.g. proto in webkit). In code is seems a lot easier than it is to write it down :

var TestClass = function() {}
TestClass.prototype = {
   method: function() {}
};

var a = new TestClass();
console.log(a.__proto__ === TestClass.prototype); // true
console.log(a.method === TestClass.prototype.method); // true

Perfect. That's what I suspected, but I wanted to make sure. Thank you for the answer, I will mark it as soon as I am able. — dvlsg, Apr 18 '14 at 16:13
+1 though I'd stress that the reference to its prototype is an implicit/internal reference. People sometimes assume they can do `test1.prototype` to get a direct reference. — cookie monster, Apr 18 '14 at 16:14

When defining function on a prototype, is the function recreated on each new instance?

1 Answers1