This content originally appeared on DEV Community and was authored by Hiep Le
Creational Pattern - Prototype Pattern.
This is the second part in my series (23 GoF Design Patterns). My series will help you understand about design patterns by building real projects. For this reason, you can see the places in which each pattern could be applied. I want to focus on learning by doing instead of talking too much about theories.
I'm Hiep. I work as a full-time software engineer. Most of my open-source projects are focused on one thing - to help people learn ?.
I created a git repository that help you understand about design patterns by building real projects.
Github link:
https://github.com/hieptl/javascript-dessign-patterns
If the repository is useful, please help me share the post and give me a Github's star. It will make me feel motivation to work even harder. I will try to make many open sources and share to the community ❤️.
I created a post to share about learning React by building Netflix, I hope that it is useful for you.
Table of Contents
| No. | Topics |
|---|---|
| 1 | Definition. |
| 2 | Scenarios. |
| 3 | Building Post Cloner. |
| 4 | Result. |
Table of Images.
| No. | Topics |
|---|---|
| 1 | Figure 1: Prototype Pattern - Result. |
1. Definition.
Prototype pattern will help you to create an object from an existing object.
In order to clone an object in Javascript, we have several ways such as Object.assign(), spread operator, libraries and so on.
However, we should build by ourselves to understand about the core concepts. Therefore, we will feel more interested in programming and increase logical thinking.
2. Scenarios.
We can imagine that dev.to provides a feature that allows the authors clone their existing posts.
As mentioned before, there are several ways that help us to clone an object in Javascript. However, we will create the solution by ourselves by using Prototype pattern.
3. Building Post Cloner.
I want to use Javascript class to implement the idea because in the case you are using object-oriented programming languages or you have to use those languages in the future, you can still implement design patterns by using different languages. In my opinion, design patterns are mindset and approaches and not depend on programming languages.
Our Post class will be looked like this:
class Post {
constructor(title, content) {
this.title = title;
this.content = content;
}
clone() {
return new Post(this.title, this.content);
}
}
const firstPost = new Post('Post Title', 'Post Content');
const secondPost = firstPost.clone();
console.log('The first post: ');
console.log(firstPost);
console.log('The second post: ');
console.log(secondPost);
In the constructor, we accept title and content as parameters. It means that when the author wants to create a new post, the author needs to input title and content for the post.
The most important part is about the clone method. The method will help us to create a new object from an existing object. this keyword is used to refer to the properties of the current instance (the existing object).
4. Result.
Figure 1. Prototype Pattern - Result.
The above image describes that the content of the first post and the content of the second post are the same after running the code. We implemented the idea by using Prototype pattern.
By using design patterns, we can understand the core concepts and make our code become more readable and cleaner. I hope that the post can help you understand about Prototype pattern.
Thanks and Best Regards,
Hiep.
This content originally appeared on DEV Community and was authored by Hiep Le
Hiep Le | Sciencx (2021-06-03T11:47:13+00:00) Master Design Patterns By Building Real Projects – Prototype Pattern – Javascript. Retrieved from https://www.scien.cx/2021/06/03/master-design-patterns-by-building-real-projects-prototype-pattern-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.