Class.prototype.method vs this.prototype.method: Does this.prototype Exist? Are They the Same? Inheritance Explained

Table of Contents#

1. Understanding Prototypes in JavaScript
2. Does this.prototype Exist?
3. Class.prototype.method: How It Works
4. this.prototype.method: The Pitfall
5. Inheritance: Prototype Chain in Action
6. Common Misconceptions and Takeaways
7. Conclusion
8. References

1. Understanding Prototypes in JavaScript#

Before diving into Class.prototype vs. this.prototype, let’s ground ourselves in what prototypes are and how they work.

What is a Prototype?#

In JavaScript, every object has an internal hidden property called [[Prototype]] (often referred to as the "prototype" of the object). This [[Prototype]] is itself an object, forming a chain (the prototype chain) that allows objects to inherit properties and methods from one another.

When you access a property or method on an object, JavaScript first checks if the object itself has that property. If not, it traverses the prototype chain, checking the object’s [[Prototype]], then the [[Prototype]] of that object, and so on, until it finds the property or reaches the end of the chain (null).

Constructor Functions vs. ES6 Classes: Prototype Under the Hood#

JavaScript uses constructor functions to create objects. When you define a constructor function and use new to create an instance, the instance’s [[Prototype]] is set to the constructor’s prototype property.

ES6 introduced class syntax, but this is syntactic sugar over constructor functions. Under the hood, classes still rely on the prototype system. For example:

// Constructor function
function Person(name) {
  this.name = name;
}
 
// Add method to Person's prototype
Person.prototype.greet = function() {
  return `Hello, I'm ${this.name}`;
};
 
// ES6 class equivalent
class Person {
  constructor(name) {
    this.name = name;
  }
 
  // Method added to Person.prototype
  greet() {
    return `Hello, I'm ${this.name}`;
  }
}

In both cases, greet is added to Person.prototype, and all instances of Person inherit greet via their [[Prototype]].

2. Does this.prototype Exist?#

A critical question: When working with objects or classes, does this.prototype refer to anything meaningful?

What is this in JavaScript?#

The value of this depends on the context in which it is used:

• In a constructor function or class method (when called with new), this refers to the instance being created.
• In an object method, this refers to the object the method is called on.

Instances Do Not Have a prototype Property#

Here’s the key point: Instances of a class/constructor do not have a prototype property. Only the constructor function/class itself has a prototype property (which is used to set the [[Prototype]] of instances).

For example, if you create an instance person1 = new Person("Alice"), person1 has a [[Prototype]] (which is Person.prototype), but it does not have a prototype property. Thus, this.prototype (where this is person1) is undefined.

Testing this.prototype: A Code Example#

Let’s prove this with a class:

class Person {
  constructor(name) {
    this.name = name;
    // Try to access this.prototype in the constructor
    console.log("this.prototype in constructor:", this.prototype); // undefined
  }
 
  checkPrototype() {
    // Try to access this.prototype in a method
    console.log("this.prototype in method:", this.prototype); // undefined
  }
}
 
const person1 = new Person("Alice"); // Logs: "this.prototype in constructor: undefined"
person1.checkPrototype(); // Logs: "this.prototype in method: undefined"

Result: this.prototype is undefined in both the constructor and method because this refers to the instance (person1), and instances lack a prototype property.

3. Class.prototype.method: How It Works#

Now that we know this.prototype is undefined for instances, let’s explore Class.prototype.method—the correct way to add methods to be inherited by all instances.

Adding Methods to the Prototype via Class Syntax#

When you define a method inside a class (e.g., greet() in the Person class), JavaScript automatically adds that method to Class.prototype (e.g., Person.prototype). This ensures all instances inherit the method via their [[Prototype]].

class Person {
  constructor(name) {
    this.name = name;
  }
 
  // Added to Person.prototype
  greet() {
    return `Hello, I'm ${this.name}`;
  }
}
 
const person1 = new Person("Alice");
const person2 = new Person("Bob");
 
// Both instances inherit greet() from Person.prototype
console.log(person1.greet()); // "Hello, I'm Alice"
console.log(person2.greet()); // "Hello, I'm Bob"
 
// Check if greet is on Person.prototype
console.log(Person.prototype.greet === person1.greet); // true (same function)

Why This is the Right Approach#

Adding methods to Class.prototype is efficient and scalable:

• Single Method Instance: The method is stored once on the prototype, not duplicated for every instance.
• Inheritance: Subclasses can inherit and override these methods via the prototype chain (more on this later).

4. this.prototype.method: The Pitfall#

What happens if you mistakenly try to add a method using this.prototype.method inside a class or constructor?

What Happens When You Try this.prototype.method?#

Since this.prototype is undefined (as shown earlier), attempting to assign a method to this.prototype.method will throw an error (or fail silently in non-strict mode).

Example:

class Person {
  constructor(name) {
    this.name = name;
    // Trying to add a method to this.prototype (which is undefined)
    this.prototype.greet = function() { 
      return `Hello, I'm ${this.name}`; 
    }; 
    // TypeError: Cannot set property 'greet' of undefined
  }
}
 
// This will throw an error when creating an instance
const person1 = new Person("Alice"); 

Result: Uncaught TypeError: Cannot set property 'greet' of undefined

Common Misconception: Confusing [[Prototype]] with prototype Property#

A frequent mix-up is conflating an instance’s [[Prototype]] (its internal prototype link) with the prototype property of constructors. To access an instance’s [[Prototype]], use Object.getPrototypeOf(this) (not this.prototype).

Example:

class Person {
  constructor(name) {
    this.name = name;
    // Access the instance's [[Prototype]] (Person.prototype)
    const instancePrototype = Object.getPrototypeOf(this);
    console.log(instancePrototype === Person.prototype); // true
  }
}
 
const person1 = new Person("Alice"); // Logs: true

5. Inheritance: Prototype Chain in Action#

Prototypes enable inheritance through the prototype chain. When a subclass extends a superclass, the subclass’s prototype inherits from the superclass’s prototype.

How Inheritance Works with Prototypes#

1. The subclass’s prototype has a [[Prototype]] pointing to the superclass’s prototype.
2. Instances of the subclass inherit methods from both the subclass’s prototype and the superclass’s prototype (via the chain).

ES6 extends and the Prototype Chain#

Using class extends simplifies setting up this chain:

class Animal {
  constructor(name) {
    this.name = name;
  }
 
  speak() {
    return `${this.name} makes a sound`;
  }
}
 
// Dog extends Animal
class Dog extends Animal {
  speak() {
    // Call superclass method with super.speak()
    return `${super.speak()} (Woof!)`;
  }
}
 
const dog1 = new Dog("Buddy");
console.log(dog1.speak()); // "Buddy makes a sound (Woof!)"
 
// Trace the prototype chain:
// dog1 -> Dog.prototype -> Animal.prototype -> Object.prototype -> null
console.log(Object.getPrototypeOf(dog1) === Dog.prototype); // true
console.log(Object.getPrototypeOf(Dog.prototype) === Animal.prototype); // true

Key Takeaway for Inheritance#

• Methods defined in the superclass (Animal.speak) live on Animal.prototype.
• Subclass instances (dog1) inherit these methods because Dog.prototype’s [[Prototype]] is Animal.prototype.
• Class.prototype.method (not this.prototype.method) ensures methods are added to the prototype chain for inheritance.

6. Common Misconceptions and Takeaways#

To summarize:

7. Conclusion#

JavaScript’s prototype system is the backbone of inheritance and method sharing. To avoid confusion:

• Use Class.prototype.method (or class method syntax) to add inheritable methods.
• Remember that this.prototype is undefined for instances—use Object.getPrototypeOf(this) to access an instance’s internal prototype.
• Inheritance works via the prototype chain, with extends simplifying subclassing in ES6.

By mastering these concepts, you’ll write cleaner, more efficient JavaScript code and avoid common prototype-related bugs.

8. References#

• MDN Web Docs: Prototype
• MDN Web Docs: this keyword
• MDN Web Docs: Classes
• MDN Web Docs: Inheritance and the prototype chain