Original article: anonystick.com
In OOP object-oriented programming, there are many contents and concepts such as class, prototype, proto , prototype chain, constructor, inheritance, etc.It is also related to patterns such as factory pattern, constructor pattern, prototype pattern. What are the relationships between these concepts ?, what are the relationships between the models ?, how do they develop and how do they work? The writer himself is dizzy, not to mention what you are new to JS.
First I want to say to understand OOP, like other articles written briefly in one article, I guarantee will not be enough time for you to understand. You see right away the title is just what you have to understand, that is enough to prove the words I said are true.
In this article, I will explain step by step about OOP in JS through the process of understanding OOP. This is probably one of the articles about the nature of OOP, and hopefully through the construction of this series of articles, everyone can fully understand OOP in JS and can use OOP successfully. more proficient. And I also hope that I have enough patience and knowledge to be able to write a complete series of object-oriented programming in javascript.
And the first article I want to show to explain to you about Prototype one of the concepts related to OOP. Hope you also try to follow what I have presented, if there is anything wrong, you can comment here, instead of criticizing each other. Stop spending time focusing instead of rambling like other articles.
What is a prototype?
First find out what the prototype is? Then I’ll give you a funny visualization through an example where every foolish girl gets involved, including me. If you do not get involved in this, you can leave it. Kakaka xD, concentrate!
Prototype example: When a guy takes his girlfriend to buy clothes, but his girlfriend doesn’t have the money but he can still buy it, so that means he pays (foolish). That means that child takes advantage of this guy’s wallet. We use code to describe this action of the above example
1 2 3 4 5 6 7 8 9 10 11 12 | var bangai = { name: 'dao thi mo' } var thangdaigai = { name: 'thang dai gai', pay: function() { console.log('Da mua boi tien cua bo me'); } }; Object.setPrototypeOf(bangai, thangdaigai); bangai.pay(); //Da mua boi tien cua bo me |
You see, through an example above can see how “knife thi mo” it takes advantage of that already. And through this, what is a prototype? What does the above example show us? The program shows that bangai’s prototype is thangdaigai, bangai doesn’t have method pay () but it took advantage of thangdaigai’s method. So in front of us, we understand that the prototype is a delegate relationship and you also have the right to understand that it is a succession! Wait, don’t hurry … The example above will be rewritten in another way for you to visualize more
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var bangai = { name: 'dao thi mo', pay: function() { thangdaigai.pay(); } }; var thangdaigai = { name: 'thang dai gai', pay: function() { console.log('Da mua boi tien cua bo me'); } }; bangai.pay(); //Da mua boi tien cua bo me |
That is what Prototype means? That’s the way it is. At this point, whoever you understand, leave wait for the second article about “What is prototype chain?” If you do not understand any more, then stay, listen to it. Now I have another example that has nothing to do with thangdaigai. Example: I have a function like this.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | function Cat(name, color){ this.name = name; this.color = color; this.type = "dongvat"; this.eat = function(){ console.log(' an ca') } } Sau đó tôi dùng new để tạo hai Object. var cat1 = new Cat('Sen', 'pink') console.log(cat1.eat()) // an ca console.log(cat1.type) // dongvat var cat2 = new Cat('Boss', 'black'); console.log(cat2.eat()) // an ca console.log(cat2.type) // dongvat |
On the surface, if you don’t understand the prototype, it doesn’t seem to be a problem, but in reality, there’s a big drawback. That is, for each instance instance, the type and the eat () methods are exactly the same. Each time an instance is created, it must be repeating content and taking up more memory. This is not friendly with the OOP model. To prove it, I will show you this.
console.log(cat1.eat === cat2.eat); //false
Because of this, the new prototype has the effect that all the properties and methods of this object will be inherited by the constructor’s instance. This means that we can define those invariant properties and methods directly on the object prototype. I could rewrite the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | function Cat(name, color){ this.name = name; this.color = color; } Cat.prototype.type = 'dongvat'; Cat.prototype.eat = function() { console.log('an ca') } Sau đó tôi dùng new để tạo hai Object. var cat1 = new Cat('Sen', 'pink') console.log(cat1.eat()) // an ca console.log(cat1.type) // dongvat var cat2 = new Cat('Boss', 'black'); console.log(cat2.eat()) // an ca console.log(cat2.type) // dongvat |
At this point, the type and eat () properties of all cases are actually the same memory address, pointing to the prototype of the object, thus improving performance. Check it out
console.log(cat1.eat === cat2.eat); //true
That’s enough, if you still do not understand, I really will give up! This is one of the articles to help you better understand the concept of prototype in javascript. I will try to update the next concept in the next article. The post was posted from: anonystick.com Thank for reading!