What is the difference between Object.create() and class-based inheritance in JavaScript?

Sandra Emily 788 18 Jun 2024

1 Answers

Ravi Vishwakarma 19 Jun 2024

Object.create() and class-based inheritance are used to create objects and establish inheritance relationships. However, they approach inheritance differently and offer distinct advantages and use cases.

Object.create()

Object.create() is a method that creates a new object, using an existing object as the prototype of the newly created object.

Syntax

let newObject = Object.create(prototypeObject, propertiesObject);

Example

const person = {
	// Create 'greet' method in person object
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const john = Object.create(person); // Create object 
john.name = "John"; // Assign value in name property
john.greet(); // "Hello, my name is John"

Characteristics

Prototype-Based: Directly establishes the prototype of the new object.
Simpler Syntax: More straightforward for creating objects with a specified prototype.
No Constructor: This does not involve constructors; simply sets up prototype chains.

Class-Based Inheritance

Class-based inheritance in JavaScript is syntactic sugar over the existing prototype-based inheritance. It uses the class keyword to define classes and the extends keyword to demonstrate inheritance.

Syntax

// Define a class named ParentClass
class ParentClass {
  // Constructor method for ParentClass, called when a new instance is created
  constructor(param) {
    // Assign the provided parameter to the instance property 'param'
    this.param = param;
  }

  // Method of ParentClass that logs the 'param' property to the console
  method() {
    console.log(this.param);
  }
}

// Define a class named ChildClass that extends (inherits from) ParentClass
class ChildClass extends ParentClass {
  // Constructor method for ChildClass, called when a new instance is created
  constructor(param, childParam) {
    // Call the parent class's constructor with 'param' to initialize the parent class's properties
    super(param);
    // Assign the provided child-specific parameter to the instance property 'childParam'
    this.childParam = childParam;
  }

  // Method of ChildClass that logs the 'childParam' property to the console
  childMethod() {
    console.log(this.childParam);
  }
}

// Example usage:
// Create an instance of ChildClass
const instance = new ChildClass('parentParam', 'childParam');

// Call the inherited method from ParentClass
instance.method(); // Logs: parentParam

// Call the method defined in ChildClass
instance.childMethod(); // Logs: childParam

Example

// Create person class as a base class
class Person {
  // Create constructor of person class
  constructor(name) {
    // Initialize the 'name' property with the provided name parameter
    this.name = name;
  }

  // Create 'greet' method to show msg
  greet() {
    // Log a greeting message including the 'name' property to the console
    console.log(`Hello, my name is ${this.name}`);
  }
}

// Create employee class that extends (inherits from) Person class
class Employee extends Person {
  // Create constructor of employee class
  constructor(name, job) {
    // Call the parent class's constructor with 'name' to initialize the parent's properties
    super(name);
    // Initialize the 'job' property with the provided job parameter
    this.job = job;
  }

  // Create 'work' method to show the job description
  work() {
    // Log a message including the 'name' and 'job' properties to the console
    console.log(`${this.name} is working as a ${this.job}`);
  }
}

// Create an instance of Employee named 'john'
const john = new Employee("John", "Developer");
// Call the 'greet' method from the Person class
john.greet(); // Logs: "Hello, my name is John"
// Call the 'work' method from the Employee class
john.work();  // Logs: "John is working as a Developer"

Characteristics

Class Syntax: Uses class, constructor, and extends keywords for defining and inheriting classes.
Constructors: Supports constructors for initializing object properties.
Method Definition: Methods are defined inside the class body, providing a cleaner syntax.
Inheritance Chain: Uses super to call the parent class's constructor and methods.

Note

Object.create(): Directly creates objects with a specified prototype, simpler and more flexible for straightforward inheritance needs.
Class-Based Inheritance: Uses class and extends for a more structured, OOP-like inheritance model, suitable for complex hierarchies and clear code organization.

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md

forum

What is the difference between Object.create() and class-based inheritance in JavaScript?

Can you answer this question?

1 Answers

Object.create()

Class-Based Inheritance