Khái niệm Design Pattern đã quá quen thuộc với các lập trình viên, bài viết sẽ tìm hiểu về một số design pattern và các implement chúng trong javascript
1. Constructor pattern
Đây là pattern dùng khi khởi tạo đối tượng trong javascript cùng với các method và thuộc tính. Đây là một pattern không phải xa lạ bởi nó được sử dụng khá nhiều. Hãy cùng xem xét ví dụ
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 | <span class="token comment">// Cách khởi tạo bằng function</span> <span class="token keyword">function</span> <span class="token function">Hero</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> specialAbility<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>specialAbility <span class="token operator">=</span> specialAbility<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">getDetails</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">' can '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>specialAbility<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Implement bằng ES6</span> <span class="token keyword">class</span> <span class="token class-name">Hero</span> <span class="token punctuation">{</span> <span class="token function">constructor</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> specialAbility<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_name <span class="token operator">=</span> name<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_specialAbility <span class="token operator">=</span> specialAbility<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">getDetails</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>_name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> can </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>_specialAbility<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// tạo một đối tượng</span> <span class="token keyword">const</span> IronMan <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Hero</span><span class="token punctuation">(</span><span class="token string">'Iron Man'</span><span class="token punctuation">,</span> <span class="token string">'fly'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>IronMan<span class="token punctuation">.</span><span class="token function">getDetails</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Iron Man can fly</span> |
2. Factory pattern
Factory pattern là một pattern khác dùng để khởi tạo. Trong ví dụ dưới đây ta sẽ tạo một factory class là BallFactory nó sẽ có một method nhận params, tùy thuộc vào các params này, object khi khởi tạo sẽ tương ứng với các class.
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 44 | <span class="token keyword">class</span> <span class="token class-name">BallFactory</span> <span class="token punctuation">{</span> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">createBall</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> ball<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'football'</span> <span class="token operator">||</span> type <span class="token operator">===</span> <span class="token string">'soccer'</span><span class="token punctuation">)</span> ball <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Football</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'basketball'</span><span class="token punctuation">)</span> ball <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Basketball</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> ball<span class="token punctuation">.</span><span class="token function-variable function">roll</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token template-string"><span class="token string">`The </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>_type<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> is rolling.`</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">return</span> ball<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">class</span> <span class="token class-name">Football</span> <span class="token punctuation">{</span> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_type <span class="token operator">=</span> <span class="token string">'football'</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">kick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">'You kicked the football.'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">class</span> <span class="token class-name">Basketball</span> <span class="token punctuation">{</span> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_type <span class="token operator">=</span> <span class="token string">'basketball'</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">bounce</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">'You bounced the basketball.'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// khởi tạo object</span> <span class="token keyword">const</span> factory <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BallFactory</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> myFootball <span class="token operator">=</span> factory<span class="token punctuation">.</span><span class="token function">createBall</span><span class="token punctuation">(</span><span class="token string">'football'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> myBasketball <span class="token operator">=</span> factory<span class="token punctuation">.</span><span class="token function">createBall</span><span class="token punctuation">(</span><span class="token string">'basketball'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>myFootball<span class="token punctuation">.</span><span class="token function">roll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// The football is rolling.</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>myBasketball<span class="token punctuation">.</span><span class="token function">roll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// The basketball is rolling.</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>myFootball<span class="token punctuation">.</span><span class="token function">kick</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// You kicked the football.</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>myBasketball<span class="token punctuation">.</span><span class="token function">bounce</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// You bounced the basketball</span> |
3. Prototype pattern
Trong pattern này, ta sẽ sử dụng một object sẵn có để khởi tạo một object mới. Pattern này rất hữu ích trong javascript bởi nó tận dụng kế thừa prototype thay vì kế thừa bằng class. Hãy cùng xem ví dụ bên dưới
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token comment">// sử dụng Object.create </span> <span class="token keyword">const</span> car <span class="token operator">=</span> <span class="token punctuation">{</span> noOfWheels<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">'started'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">'stopped'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// Object.create(proto[, propertiesObject])</span> <span class="token keyword">const</span> myCar <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>car<span class="token punctuation">,</span> <span class="token punctuation">{</span> owner<span class="token punctuation">:</span> <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">'John'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>myCar<span class="token punctuation">.</span>__proto__ <span class="token operator">===</span> car<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span> |
4. Singleton pattern
Pattern này cũng rất phổ biến được sử dụng để khởi tạo đối tượng. Ví dụ
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 | <span class="token keyword">class</span> <span class="token class-name">Database</span> <span class="token punctuation">{</span> <span class="token function">constructor</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>Database<span class="token punctuation">.</span>exists<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> Database<span class="token punctuation">.</span>instance<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_data <span class="token operator">=</span> data<span class="token punctuation">;</span> Database<span class="token punctuation">.</span>instance <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span> Database<span class="token punctuation">.</span>exists <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">getData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_data<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">setData</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_data <span class="token operator">=</span> data<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// Sử dụng khi khởi tạo</span> <span class="token keyword">const</span> mongo <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Database</span><span class="token punctuation">(</span><span class="token string">'mongo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mongo<span class="token punctuation">.</span><span class="token function">getData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// mongo</span> <span class="token keyword">const</span> mysql <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Database</span><span class="token punctuation">(</span><span class="token string">'mysql'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mysql<span class="token punctuation">.</span><span class="token function">getData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// mongo</span> |
5. Adapter pattern
Pattern này thường được sử dụng khi muốn tạo một “adapter trung gian” để kết nối giữa phần code mới refactor và phần code cũ, để có thể sử dụng một cách bình thường. Ví dụ
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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <span class="token comment">// Ví dụ class cũ về tính toán</span> <span class="token keyword">class</span> <span class="token class-name">OldCalculator</span> <span class="token punctuation">{</span> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">operations</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>term1<span class="token punctuation">,</span> term2<span class="token punctuation">,</span> operation<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">switch</span> <span class="token punctuation">(</span>operation<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">case</span> <span class="token string">'add'</span><span class="token punctuation">:</span> <span class="token keyword">return</span> term1 <span class="token operator">+</span> term2<span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token string">'sub'</span><span class="token punctuation">:</span> <span class="token keyword">return</span> term1 <span class="token operator">-</span> term2<span class="token punctuation">;</span> <span class="token keyword">default</span><span class="token punctuation">:</span> <span class="token keyword">return</span> <span class="token number">NaN</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// Implment một class mới</span> <span class="token keyword">class</span> <span class="token class-name">NewCalculator</span> <span class="token punctuation">{</span> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">add</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>term1<span class="token punctuation">,</span> term2<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> term1 <span class="token operator">+</span> term2<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">sub</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>term1<span class="token punctuation">,</span> term2<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> term1 <span class="token operator">-</span> term2<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// Adapter Class giúp sử dụng class mới từ class cũ</span> <span class="token keyword">class</span> <span class="token class-name">CalcAdapter</span> <span class="token punctuation">{</span> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> newCalc <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">NewCalculator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">operations</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>term1<span class="token punctuation">,</span> term2<span class="token punctuation">,</span> operation<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">switch</span> <span class="token punctuation">(</span>operation<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">case</span> <span class="token string">'add'</span><span class="token punctuation">:</span> <span class="token comment">// using the new implementation under the hood</span> <span class="token keyword">return</span> newCalc<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>term1<span class="token punctuation">,</span> term2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token string">'sub'</span><span class="token punctuation">:</span> <span class="token keyword">return</span> newCalc<span class="token punctuation">.</span><span class="token function">sub</span><span class="token punctuation">(</span>term1<span class="token punctuation">,</span> term2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">default</span><span class="token punctuation">:</span> <span class="token keyword">return</span> <span class="token number">NaN</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// Sử dụng class mới như class cũ</span> <span class="token keyword">const</span> oldCalc <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">OldCalculator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>oldCalc<span class="token punctuation">.</span><span class="token function">operations</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token string">'add'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 15</span> <span class="token keyword">const</span> newCalc <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">NewCalculator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newCalc<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 15</span> <span class="token keyword">const</span> adaptedCalc <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">CalcAdapter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>adaptedCalc<span class="token punctuation">.</span><span class="token function">operations</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token string">'add'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 15;</span> |
6. Decorator pattern
Pattern này sử dụng khi muốn thêm các hành vi hoặc chức năng vào một class. Ví dụ
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 | <span class="token keyword">class</span> <span class="token class-name">Book</span> <span class="token punctuation">{</span> <span class="token function">constructor</span><span class="token punctuation">(</span>title<span class="token punctuation">,</span> author<span class="token punctuation">,</span> price<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_title <span class="token operator">=</span> title<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_author <span class="token operator">=</span> author<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>price <span class="token operator">=</span> price<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">getDetails</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>_title<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> by </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>_author<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// decorator 1</span> <span class="token keyword">function</span> <span class="token function">giftWrap</span><span class="token punctuation">(</span>book<span class="token punctuation">)</span> <span class="token punctuation">{</span> book<span class="token punctuation">.</span>isGiftWrapped <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> book<span class="token punctuation">.</span><span class="token function-variable function">unwrap</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token template-string"><span class="token string">`Unwrapped </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>book<span class="token punctuation">.</span><span class="token function">getDetails</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">return</span> book<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// decorator 2</span> <span class="token keyword">function</span> <span class="token function">hardbindBook</span><span class="token punctuation">(</span>book<span class="token punctuation">)</span> <span class="token punctuation">{</span> book<span class="token punctuation">.</span>isHardbound <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> book<span class="token punctuation">.</span>price <span class="token operator">+=</span> <span class="token number">5</span><span class="token punctuation">;</span> <span class="token keyword">return</span> book<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Sử dụng</span> <span class="token keyword">const</span> alchemist <span class="token operator">=</span> <span class="token function">giftWrap</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Book</span><span class="token punctuation">(</span><span class="token string">'Book1'</span><span class="token punctuation">,</span> <span class="token string">'Author1'</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>alchemist<span class="token punctuation">.</span>isGiftWrapped<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>alchemist<span class="token punctuation">.</span><span class="token function">unwrap</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'Unwrapped Book1 by Author1'</span> <span class="token keyword">const</span> inferno <span class="token operator">=</span> <span class="token function">hardbindBook</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Book</span><span class="token punctuation">(</span><span class="token string">'Book2'</span><span class="token punctuation">,</span> <span class="token string">'Author2'</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>inferno<span class="token punctuation">.</span>isHardbound<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>inferno<span class="token punctuation">.</span>price<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 20</span> |
Trên đây là những pattern sử dụng khá phổ biến trong javascript khi khởi tạo đối tượng trong javascript. Hi vọng bài viết giúp ích cho mọi người
Reference
https://www.toptal.com/javascript/comprehensive-guide-javascript-design-patterns
https://addyosmani.com/resources/essentialjsdesignpatterns/book/
https://medium.com/better-programming/javascript-design-patterns-25f0faaaa15