Using Object.create to establish multiple prototypes in JavaScript

Question

Using Object.create to establish multiple prototypes in JavaScript

I am trying to have my child object inherit the prototypes of multiple parents, but the following methods do not seem to work:

child.prototype = Object.create(parent1.prototype, parent2.prototype);

and also this:

child.prototype = Object.create(parent1.prototype);
child.prototype.add(Object.create(parent2.prototype));

Do you have any suggestions on how to achieve this?

UPDATE : I am working with THREE.JS on Chrome

javascript inheritance three.js prototype multiple-inheritance

Answer 1

Answer №1

In Javascript, achieving multiple inheritance is not directly supported. The common approach is to extend a base class. The following code snippet demonstrates this concept, inspired by the example found on MDN Object.create

function SuperClass(){
  //class 1 - contains some super functionalities
  console.log('SuperClass');
}
function OtherSuperClass(){
  //class 2 - contains some other super functionalities
  console.log('OtherSuperClass');
}

//MyClass intends to inherit the functionalities from both SuperClass and OtherSuperClass
function MyClass() {
  SuperClass.call(this);
  OtherSuperClass.call(this);
}

//implementing inheritance and extension
//using Object.assign to extend the class
MyClass.prototype = Object.create(SuperClass.prototype); // inheritance
Object.assign(MyClass.prototype, OtherSuperClass.prototype); // extension

//defining custom method or overriding existing ones
MyClass.prototype.myMethod = function() {
  console.log('custom method for double inheritance');
};

Answer 2

In Javascript, achieving multiple inheritance is not directly supported. The common approach is to extend a base class. The following code snippet demonstrates this concept, inspired by the example found on MDN Object.create

function SuperClass(){
  //class 1 - contains some super functionalities
  console.log('SuperClass');
}
function OtherSuperClass(){
  //class 2 - contains some other super functionalities
  console.log('OtherSuperClass');
}

//MyClass intends to inherit the functionalities from both SuperClass and OtherSuperClass
function MyClass() {
  SuperClass.call(this);
  OtherSuperClass.call(this);
}

//implementing inheritance and extension
//using Object.assign to extend the class
MyClass.prototype = Object.create(SuperClass.prototype); // inheritance
Object.assign(MyClass.prototype, OtherSuperClass.prototype); // extension

//defining custom method or overriding existing ones
MyClass.prototype.myMethod = function() {
  console.log('custom method for double inheritance');
};

Using Object.create to establish multiple prototypes in JavaScript

Answer №1

Similar questions

Guide to Spidermonkey Bytecode Documentation

Obtaining the data stored in objects within a parse database

One requirement for a directive template is that it must contain only a single root element, especially when using the restrict option to E

Saving a picture to local storage with the file input type in ReactJS

Error message related to the callback type issue in Node.js with the http.createServer

Cypress eliminating the "X-CSRFToken" header

Having trouble with Electron nodeIntegration functionality and experiencing some odd behavior in general with Electron

Drag and Drop Functionality in ReactJS for Organizing Multiple Lists

What steps can be taken to resolve the mouse-pointer problem?

phpif (the current date is after a certain specific date, do

JavaScript is utilized to update HTML content through an Ajax request, but unfortunately, the styling is

Navigable Vuetify Tabs with routing capabilities

Combining both the Javascript and PHP components of the Facebook SDK

Navigating through Next.js for slug URLs such as site.com/username

What is the best method for dividing strings in javascript?

Use Google script to input drop down options directly into a Google spreadsheet

Ways to initiate SVG animations using Angular Component functions?

Issue: Access to sdcard/hello.mp3 file denied due to permission error (EACCES)

Tips for customizing the appearance of a single plot within a time series chart using FusionCharts or FusionTime

What causes a decrease in performance for a React + Three/Threejs application when it is deployed or in production as opposed to running on localhost?