Prototypes enable us to define attributes and functions of a class that can be shared across its object instances. Let us look at how we could start using prototypes in our Javascript classes.
See how to start with a Javascript class if you are new to Javascript classes.
Class in Javascript is built internally using prototypes - in fact that was the way some of us were reaching OOP nirvana in Javascript back in the day. ESXX standards have changed all that and now we have classes and all the goodness therein.
Classes and its objects have limited usage by themselves. Consider this example -
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
class User {
users = [];
user = {
name: "",
type: "",
};
setUser({ name, type }) {
this.user.name = name;
this.user.type = type;
}
addUser() {
this.users.push(this.user);
}
}
|
We will write some quick code to use this class.
1
2
3
4
5
|
user1 = new User();
user1.setUser({ name: "Rama", type: "Teacher" });
user1.addUser();
console.log(user1.users); // [ { name: 'Rama', type: 'Teacher' } ]
|
The code uses the User class to define a user and add to an array.
Now we go ahead and introduce the next user.
1
2
3
4
5
6
|
user2 = new User();
user2.setUser({ name: "Kris", type: "Student" });
user2.addUser();
console.log(user2.users); // [ { name: 'Kris', type: 'Student' } ]
console.log(user1.users); // // [ { name: 'Rama', type: 'Teacher' } ]
|
Although the classes work, they have their own data. This is expected, but not useful in the real world.
Let us make the users array shared and available from every object.
Instead of making users part of the instance, we will define it as a prototype - User.prototype.users = [];.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
User.prototype.users = [];
class User {
user = {
name: "",
type: "",
};
setUser({ name, type }) {
this.user.name = name;
this.user.type = type;
}
addUser() {
this.users.push(this.user);
}
}
User.prototype.users = [];
user1 = new User();
user1.setUser({ name: "Rama", type: "Teacher" });
user1.addUser();
console.log(user1.users); // [ { name: 'Rama', type: 'Teacher' } ]
user2 = new User();
user2.setUser({ name: "Kris", type: "Student" });
user2.addUser();
console.log(user2.users);
/* output
[
{ name: 'Rama', type: 'Teacher' },
{ name: 'Kris', type: 'Student' }
]
*/
console.log(user1.users); // // [ { name: 'Rama', type: 'Teacher' } ]
/* output
[
{ name: 'Rama', type: 'Teacher' },
{ name: 'Kris', type: 'Student' }
]
*/
|
Using prototypes in classes enables us to get nearer to the way we write real-world code. You can use a similar arrangement to declare whole functions. But the more popular way to achieve shared functions in a class is using static functions.
