How to add a method to an object's prototype

Question

There are many ways to create objects. However, I wanted to know why I am getting an error with this approach (just attempting to learn) - What is meant by 'undefined' in the error message? The problem is not related to how the object was first instantiated as I have tried var Obj={}; and obtained same result. Thx.

'use strict';
 var Obj=Object.create(null);
 var descriptor={
    value: 37, writable: true, enumerable: true, configurable: true};
 Object.defineProperty(Obj, 'p0' , descriptor);   
 // Next line causes an error: Cannot set property 'f' of undefined
 Obj.prototype.f = function() { //define a method f() on Obj PROTOTYPE
        return (`hello ${this.p0}`); 
  };
 console.log(Obj.f());

Answer 1

The OP's interesting example merits close inspection to best grasp the resulting error as well as how to improve the code.

Passing null to Object.create() produces an undefined object which causes the error to occur. The correction involves passing instead a prototype object, such as Object. The result: Obj possesses a valid and defined object with all the methods of the Object prototype.

Variable descriptor holds a valid object whose prototype incidentally is accessible as descriptor.constructor.prototype. More information about constructors here.

The statement adding a property to Obj is correct, but of limited usefulness. It adds a property directly to the Obj and not to its prototype. For that reason, adding the method f to the prototype is awkward since it can only access the property p0 of the specific object Obj owing to the property not belonging to the prototype of Obj. The final statement indicates that method f() works correctly with respect to Obj when the code below executes:

'use strict';

// creates undefined object
var Obj=Object.create(null);
console.log("Obj is " + Obj.constructor);

// instantiate Obj of type Object
Obj = Object.create( Object );
console.log("Obj is now instance of Object? " + (Obj instanceof Object));


var descriptor={
value: 37, writable: true, enumerable: true, configurable: true};

// directly add property to object Obj
Object.defineProperty(Obj, 'p0', descriptor);

// adding new method to Obj prototype
 Obj.prototype.f = function() { 
    return ("hello " + Obj.p0); 
  };
  
console.log(Obj.f());

The OP may wish to revise the code as follows:

'use strict';

var descriptor =
{
value: 37, 
writable: true,
enumerable: true,
configurable: true
};


/*  instantiate Obj of type Object
 *  like this:  
 *      var Obj = Object.create( Object );
 *  Or: 
 */
var Obj = Object.constructor;

// make p0 a property of the Obj prototype
Obj.prototype.p0 =  descriptor;

// add method to Obj prototype
 Obj.prototype.f = function() { 
    return ("hello " + this.p0.value); 
  };
  
console.log( Obj.f() );

The advantage of this second example is that all objects instantiated from the Obj prototype will have an f method and a p0 property.

Note: in re the 'use strict' statement, one should be aware that not all browsers support it; see here.

Answer 2

So, basically, I think this boils down to a fundamental misunderstanding of what a prototype is. Individual instances of an object do not have a .prototype, rather, they have an internal link to the prototype of the constructor from which the object instance was created. This was formerly known as .__proto__ (AKA dunder-proto), but has since been officially deprecated.

More recently, to reference the prototype of the constructor for an object instance, you can access a property called .constructor. (*Note*: .constructor may be undefined depending on how the object was created). From this, you can access the .prototype.

Similarly, you can use Object.getPrototypeOf(obj) and Object.setPrototypeOf(obj) where obj is an instance of an object.

For example:

var x = Object.create(null);
console.log("x.prototype", x.prototype);

var y = Object.create({a: "foo"});
console.log("y.prototype:", y.prototype);

The .prototype is undefined in both cases, because object instances do not have a prototype property, only object constructors do.

That being said, we can access the prototype that an object instance was created from by using the .constructor.prototype property, like so:

function myObj (){
  this.a = "foo";
}
// myObj is a constructor function, which has a prototype that we can set properties on
myObj.prototype.b = "bar";
// obj is an instance of an object, which does not have a prototype property
var obj = new myObj();

console.log("obj.prototype:", obj.prototype);
console.log("Object.getPrototypeOf(obj):", Object.getPrototypeOf(obj));
console.log("obj.constructor.prototype:", obj.constructor.prototype);