How Inheritance works in Constructor Functions in JavaScript ? - GeeksforGeeks

15 Feb, 2022
Here, we will discuss inheriting a constructor function in JavaScript. Constructor functions define the prototype of the properties an object will contain. Using the constructor function, we can create a new object after passing the required parameters.
Inheriting a previously defined constructor function means using the parameters of the previously defined function along with adding some new parameters to the newly defined constructor function. For this, we need to use the call() function which allows us to call a function defined somewhere else in the current context. 
Syntax:
myFunction.call( this, property1, property2, ... , propertyN )
 
Parameter values:
myFunction: This is a constructor function from which we want to inherit the parameters in a new constructor function.
this: The values of parameters that will use this keyword while calling myFunction.
property1, property2, ..., propertyN: The parameters that are to be inherited in the new constructor function.
Return type: A constructor function or the function which has inherited its properties does not have any return type. It specifies the prototype of the properties an object will contain which are created from that constructor function.
Example: Here, we create an ‘Employee’ constructor function. A new ‘Developer’ constructor function is created that will inherit the basic properties of ‘Employee’ as well as will contain some new properties. 
HTML
<!DOCTYPE html><html lang="en">  <head>    <title>         JavaScript inheritance of constructor functions     </title></head>  <body>    <script>        function Employee(name, age, gender, id) {            this.name = name;            this.age = age;            this.gender = gender;            this.id = id;        };          function Developer(name, age, gender, id,         specialization) {              // Calling Employee constructor function            Employee.call(this, name, age, gender, id);              // Adding a new parameter            this.specialization = specialization;        }        console.log(Employee.prototype);        console.log(Developer.prototype);    </script></body>  </html>
Output:
Object
constructor: ƒ Employee(name, age, gender, id)
[[Prototype]]: Object

Object
constructor: ƒ Developer(name, age, gender, id, specialization)
[[Prototype]]: Object
We can notice that the ‘Developer‘ constructor function inherits the properties of the ‘Employee‘ constructor function along with a new parameter ‘specialization‘. Here, we called the Employee function using the call() function to pass the required parameters to the Employee constructor function. 
We can also create objects using these constructor functions after passing the values of the required properties of that object.
Syntax:
let Obj1 = new Object( parameters )
Example: This example describes the object created with a new keyword to create an instance of an object that has a constructor function.
HTML
<!DOCTYPE html><html lang="en">  <head>    <title>         JavaScript inheritance of constructor functions     </title></head>  <body>    <script>        function Employee(name, age, gender, id) {            this.name = name;            this.age = age;            this.gender = gender;            this.id = id;        };          function Developer(name, age, gender, id, specialization) {              // Calling Employee constructor function            Employee.call(this, name, age, gender, id);              // Adding a new parameter            this.specialization = specialization;        }          // Creating objects        let Employee1 = new Employee("Suraj", 28, "Male", 564);        let Developer1 = new Developer("Karishma", 31, "Female", 345,            "Frontend Developer");        console.log(Employee1);        console.log(Developer1);    </script></body>  </html>
Output:
Employee {name: 'Suraj', age: 28, gender: 'Male', id: 564}
age: 28
gender: "Male"
id: 564
name: "Suraj"
[[Prototype]]: Object

Developer {name: 'Karishma', age: 31, gender: 'Female', id: 345, 
    specialization: 'Frontend Developer'}
age: 31
gender: "Female"
id: 345
name: "Karishma"
specialization: "Frontend Developer"
[[Prototype]]: Object
We can observe that the constructor function of Employee is inherited to create a new constructor function Developer which can be used to create objects with new properties along with the inherited properties of the parent constructor.
adnanirshad158
javascript-object
javascript-oop
JavaScript-Questions
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript