| In this article |
|---|
| what's JavaScript prototypes |
| JavaScript Inheritance |
1 - What's JavaScript prototypes
JavaScript uses prototypes where many other object-oriented languages use classes for inheritance . It is possible to simulate many class-based features with prototypes in JavaScript .wikipedia
All JavaScript objects inherit the properties and methods from their prototype. Objects created using an object literal, or with new Object(), inherit from a prototype called Object.prototype. Objects created with new Date() inherit the Date.prototype. The Object.prototype is on the top of the prototype chain.w3schools
You can consider a prototype is a pointer to a base Object when you create a new instance of that Object , and this mean if you change a prototype property of an object it will affect all objects constructed using that object.
So let's see example and Create a new object and a new instance of it.
Create object and new instance of it.
2 - JavaScript Inheritance
Note : that every constructed function has a property called __proto__ , and you can use it to access base object prototype property as shown below.
function
employee(name, salary) {
this.Name = name;
this.salay = salary
}
//Create prototype transportAllowance property.
employee.prototype.transportAllowance = 500;
// new instance of employee
var emp = new employee('Ahmed', 5000);
// Create transportAllowance property of emp.
emp.transportAllowance = 400;
//
document.write(emp.transportAllowance + '<br/>'); //Output 400
document.write(emp.__proto__.transportAllowance
+ '<br/>'); //output 50
Inheritance is the ability to create a class from another class, the "parent" class, extending the functionality and state of the parent in the derived, or "child" class. It allows derived classes to overload methods from their parent class.
Inheritance is one of the pillars of object-orientation. It is the mechanism of designing one class from another and is one of the ideas for code reusability, supporting the concept of hierarchical classification. C# programs consist of classes, where new classes can either be created from scratch or by using some or all properties of an existing class.
Another feature related to inheritance and reusability of code is polymorphism, which permits the same method name to be used for different operations on different data types. Thus, C# supports code reusability by both features. wiki
Inheritance is one of the pillars of object-orientation. It is the mechanism of designing one class from another and is one of the ideas for code reusability, supporting the concept of hierarchical classification. C# programs consist of classes, where new classes can either be created from scratch or by using some or all properties of an existing class.
Another feature related to inheritance and reusability of code is polymorphism, which permits the same method name to be used for different operations on different data types. Thus, C# supports code reusability by both features. wiki
JavaScript is a bit confusing for developers experienced in class-based languages (like Java or C++), as it is dynamic and does not provide a class implementation per se (the class keyword is introduced in ES6, but is syntactical sugar, JavaScript remaining prototype-based).
When it comes to inheritance, JavaScript only has one construct: objects. Each object has an internal link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. null, by definition, has no prototype, and acts as the final link in this prototype chain.
While this is often considered to be one of JavaScript's weaknesses, the prototypal inheritance model is in fact more powerful than the classic model. It is, for example, fairly trivial to build a classic model on top of a prototypal model, while the other way around is a far more difficult task. developer.mozilla
When it comes to inheritance, JavaScript only has one construct: objects. Each object has an internal link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. null, by definition, has no prototype, and acts as the final link in this prototype chain.
While this is often considered to be one of JavaScript's weaknesses, the prototypal inheritance model is in fact more powerful than the classic model. It is, for example, fairly trivial to build a classic model on top of a prototypal model, while the other way around is a far more difficult task. developer.mozilla
let's see example in how to apply inheritance in JavaScript.
Creating Prototypal Inheritance Chains
//use this as a base function
function
Person(firstName, lastName) {
this.FirstName = firstName,
this.LastName = lastName,
this.FullName = function () {
return this.FirstName + ' ' + this.LastName
}
}
//and this is a derived function that inherited from Person function
above
function
employee(firstName, lastName, department, salary) {
//Call Person
Person.call(this, firstName, lastName);
this.Department = department,
this.salay = salary,
this.showInfo = function () {
return 'Name: ' + this.FirstName + ' ' + this.LastName
+ '<br/>' + 'Department: ' + this.Department
+ '<br/>' + 'Salary: ' + this.salay
};
}
//inherit Person
employee.prototype = Object.create(Person.prototype);
//set employee constructor to itself
employee.prototype.constructor = employee;
document.write(new employee('Ahmed', 'Saad', 'HR', '5000').showInfo())
//output
//Name: Ahmed Saad
//Department: HR
//Salary: 5000
