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

Question

Ravi Vishwakarma · Answer

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.
Syntaxand 
let newObject = Object.create(prototypeObject, propertiesObject);
Exampleand 
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.
and 
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
Exampleand 
// 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.
and

forum

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

Sandra Emily

Can you answer this question?

1 Answers

Object.create()

Class-Based Inheritance

Liked By