Xin chào các bạn đến với series JavaScript căn bản cho Beginner ^^
Hôm nay chúng ta sẽ tiếp tục tìm hiểu về this và sự khác nhau giữa call, apply, bind trong JavaScript
What is this ?
Con trỏ this
có lẽ là một khái niệm không mấy xa lạ trong lập trình hướng đối tượng, nó thể hiện cho đối tượng đang chứa nó, để mình lấy ví dụ cho các bạn dễ hình dung:
A có bài thực hành môn lập trình Java vào sáng mai, nhưng hiện tại A vẫn ngồi chơi game
A có bài thực hành môn lập trình Java vào sáng mai, nhưng hiện tại anh ấy vẫn ngồi chơi game
Có thể thấy 2 câu trên hoàn toàn đồng nghĩa với nhau nhưng trong văn nói cũng như văn viết chúng ta thường dùng cách thứ 2 đúng không ^^
Vậy this ở đây là gì? Theo như câu nói trên ta có thể thấy this được sử dụng như là một đại từ nhân xưng để thay thế cho đối tượng cụ thể trước đó.
Sử dụng This như nào? Và khi nào thì sử dụng this?
Trước khi bắt đầu mình sẽ đá qua từ khóa this trong lập trình hướng đối tượng của PHP nhé ?:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <span class="token keyword">class</span> <span class="token class-name">Student</span> <span class="token punctuation">{</span> <span class="token keyword">private</span> <span class="token variable">$name</span><span class="token punctuation">;</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">__construct</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">name</span> <span class="token operator">=</span> <span class="token variable">$name</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">__get</span><span class="token punctuation">(</span><span class="token variable">$property</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">name</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token variable">$student</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Student</span><span class="token punctuation">(</span><span class="token double-quoted-string string">"Vỹ"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$student</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">name</span><span class="token punctuation">;</span> |
Như chúng ta đã biết thì trong mỗi đối tượng thì sẽ có những thuộc tính, phương thức riêng của chính nó đúng không nào ?.
Trong đoạn code bên trên ta có thể thấy this chính là con trỏ, trỏ thẳng đến đối tượng bao nó và đại diện cho đối tượng đó luôn nên khi ta gọi $this->name chính là chỉ định tới thuộc tính name của đối tượng Student
Cũng giống như đại từ nhân xưng trong ngôn ngữ nói, this
đại diện cho đối tượng ( Object ) ở trong một ngữ cảnh ( context ) được nhắc đến trước đó.
This trong JavaScript
Trước khi đi vào tìm hiểu this trong JavaScript ta sẽ nói qua 1 chút về function nhé, như ta đã biết trong JS thì một hàm (Function) cũng được coi như là 1 đối tượng (Object) và tất nhiên như mình đã nói bên trên thì đối tượng sẽ có những thuộc tính riêng của nó. Trong JS, khi một hàm được gọi, thì nó sẽ có một thuộc tính là this
, và thuộc tính this
này chứa giá trị về một đối tượng đang gọi tới hàm này.
Trong JS this được sử dụng như sau :
- Trong một phương thức, this được refer đến chính đối tượng chứa nó
- Nếu đứng một mình this refer đến Global Object ( Window )
- Trong một hàm this refer đến Global Object ( Window )
- Trong một hàm ( strict mode ) this không được định nghĩa
- Trong một sự kiện, this được refer đến chính element nhận sự kiện đó
1. This trong một phương thức
1 2 3 4 5 6 7 8 | <span class="token keyword">let</span> student <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">"Vỹ"</span><span class="token punctuation">,</span> getName<span class="token punctuation">:</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 punctuation">;</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>student<span class="token punctuation">.</span><span class="token function">getName</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">// Vỹ</span> |
2. This khi đứng một mình
1 2 | console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [object Window]</span> |
3. This khi nằm trong một hàm
1 2 3 4 5 6 | <span class="token keyword">function</span> <span class="token function">whoAmI</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><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">whoAmI</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [object Window]</span> |
4. This khi nằm trong một hàm với strict mode
1 2 3 4 5 6 7 8 | <span class="token string">"use strict"</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">whoAmI</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><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">whoAmI</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// undefined</span> |
5. This trong một sự kiện
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">data-id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>btn<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>alert(this.getAttribute(<span class="token punctuation">'</span>data-id<span class="token punctuation">'</span>))<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Click me<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> |
Ngoài ra this còn có thể sử dụng trong callback function, closure, borrowing methods và trong trường hợp được gán cho một biến khác. Nhưng trước khi đi vào tìm hiểu cách sử dụng, chúng ta sẽ lướt qua call, apply và bind ?.
call(), apply(), bind() là gì? Tại sao chúng ta cần đến nó?
Ba hàm call, apply và bind là các prototype của Function. Nên chỉ có Function mới có thể gọi được 3 hàm này. Sở dĩ, một Function có thể gọi function khác vì trong JavaScript, Function cũng là một loại Object, mà đã là Object thì sẽ có prototype hay nói cách khác là gọi được phương thức của nó.
Call
1 2 | <span class="token keyword">function</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>thisArg<span class="token punctuation">,</span> arg1<span class="token punctuation">,</span> arg2<span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">)</span> |
Trong đó :
- function là hàm chúng ta cần gọi ra để xử lý
- call là 1 function prototype
- thisArg là object key value
- arg1, arg2… là các tham số truyền vào được cách nhau bởi dấu ,
Ví dụ :
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token keyword">let</span> user <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">"Vỹ"</span><span class="token punctuation">,</span> phone<span class="token punctuation">:</span> <span class="token number">123456</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">getUser</span><span class="token punctuation">(</span>level<span class="token punctuation">,</span> address<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"> - </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>phone<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> - </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>level<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> - </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>address<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></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>getUser<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>user<span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token string">"Viet Nam"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Vỹ - 123456 - 10 - Viet Nam</span> |
Apply
1 2 | <span class="token keyword">function</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>thisArg<span class="token punctuation">,</span> <span class="token punctuation">[</span>arg1<span class="token punctuation">,</span> arg2<span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token punctuation">]</span><span class="token punctuation">)</span> |
Khác với call thì apply cho phép bạn truyền 1 object và các tham số thông qua mảng
Ví dụ :
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token keyword">let</span> user <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">"Vỹ"</span><span class="token punctuation">,</span> phone<span class="token punctuation">:</span> <span class="token number">123456</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">getUser</span><span class="token punctuation">(</span>level<span class="token punctuation">,</span> address<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"> - </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>phone<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> - </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>level<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> - </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>address<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></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>getUser<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>user<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token string">"Viet Nam"</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">// Vỹ - 123456 - 10 - Viet Nam</span> |
Bind
1 2 | <span class="token keyword">function</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>thisArg<span class="token punctuation">,</span> arg1<span class="token punctuation">,</span> arg2<span class="token punctuation">)</span> |
Bind cũng gần giống với call, tuy nhiên hàm này không thể gọi hàm trực tiếp mà nó sẽ trả về cho chúng ta một hàm mới
Ví dụ :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token keyword">let</span> user <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">"Vỹ"</span><span class="token punctuation">,</span> phone<span class="token punctuation">:</span> <span class="token number">123456</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">getUser</span><span class="token punctuation">(</span>level<span class="token punctuation">,</span> address<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"> - </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>phone<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> - </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>level<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> - </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>address<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></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>getUser<span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>user<span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token string">"Viet Name"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Không trả về dữ liệu</span> <span class="token keyword">let</span> helloUser <span class="token operator">=</span> getUser<span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>user<span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token string">"Viet Name"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">helloUser</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Vỹ - 123456 - 10 - Viet Nam</span> |
Các bạn có thể thấy mặc dù trong hàm getUser() mình không hề define biến name và phone mà khi chúng ta console.log ra thì kết quả lại được set?. Rõ ràng bên trên mình có nói khi this đứng trong một function nó sẽ có giá trị trả về là một [ Window Object ], vậy điều gì xảy ra nếu như mình khai báo một biến name? This sẽ trỏ đến biến name đó hay là name ở trong object kia?
Có một lưu ý nhỏ là :
Methods like
call()
, andapply()
can referthis
to any object.
Do đó thi ta sử dụng call, apply, bind. This sẽ được trỏ thẳng đến object được gói đó ^^ kể cả khi việc bạn có define một biến cùng tên đi chăng nữa thì this cũng sẽ chỉ trỏ đến object đó mà thôi ?
Vừa rồi mình đã giới thiệu qua cách sử dụng cũng như sự khác nhau giữa ba hàm call, apply và bind.
Chém gió xong xuôi rồi chúng ta chuyển qua cách sử dụng this trong callback function, closure .
This trong callback function
Trước khi nói về this trong callback function ta sẽ định nghĩa lại xem callback function là gì nhé
Có thể nói nôm na hàm callback là việc chúng ta truyền 1 hàm với vai trò như một tham số vào một hàm khác để có thể kích hoạt hàm đó sau này. Xét ví dụ sau:
Ví dụ :
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">function</span> <span class="token function">calcu</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> callback<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">callback</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">multiple</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> a <span class="token operator">*</span> b<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><span class="token function">calcu</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> multiple<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 10</span> |
Sử dụng this trong callback như thế nào?
Giả sử bạn có một event function như sau :
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">let</span> Student <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">"Vỹ"</span><span class="token punctuation">,</span> getName<span class="token punctuation">:</span> <span class="token keyword">function</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><span class="token keyword">this</span><span class="token punctuation">.</span>name<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> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'btn'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> Student<span class="token punctuation">.</span>getName<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// undefined</span> |
Con trỏ this
đang tham chiếu tới document.getElementById('btn')
chứ không phải đối tượng Student
, dẫn tới việc gọi this.name
là vô nghĩa.
Để đoạn code trên chạy đúng như mong muốn – in ra được name của Student – thì ta phải đảm bảo được context
của hàm callback Student.getName
là chính đối tượng Student
lúc hàm này được gọi. Cụ thể trong trường hợp này chúng ta có thể dùng hàm Bind()
để gắn context vào hàm callback đó.
1 2 | document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'btn'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> Student<span class="token punctuation">.</span>getName<span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>Student<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Vỹ</span> |
This trong closure
Nói một cách ngắn gọn thì closure
là một hàm con (inner function) nằm bên trong 1 hàm khác (outer function). Ta đã biết rằng closure
thì không thể truy cập tới con trỏ this
của hàm cha (outer function), do đó sẽ có thể xuất hiện trường hợp như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <span class="token keyword">let</span> Square <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">"square"</span><span class="token punctuation">,</span> points<span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> x<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">12</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> x<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> drawPoints<span class="token punctuation">:</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 comment">// Có thể gọi this</span> <span class="token keyword">this</span><span class="token punctuation">.</span>points<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// this không còn tham chiếu đến Square nữa</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</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"> is on </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>x<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> - </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>y<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 punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> Square<span class="token punctuation">.</span><span class="token function">drawPoints</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// undefined is on 10 - 12</span> <span class="token comment">// undefined is on 5 - 2</span> |
Cách khắc phục
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 | <span class="token keyword">let</span> Square <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">"square"</span><span class="token punctuation">,</span> points<span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> x<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">12</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> x<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> drawPoints<span class="token punctuation">:</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">const</span> self <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>points<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// this không còn tham chiếu đến Square nữa</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>self<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> is on </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>x<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> - </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>y<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 punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> Square<span class="token punctuation">.</span><span class="token function">drawPoints</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "square is on 10 - 12"</span> <span class="token comment">// "square is on 5 - 2"</span> |
Qua vài chia sẻ trên đây, hi vọng mọi người có thể hiểu rõ hơn về con trỏ this
trong lập trình Javascript. Chúng ta có trong tay các công cụ là các hàm như apply(), bind(), call()
để kiểm soát con trỏ this
trong nhiều tình huống khác nhau
Quy tắc cốt lõi cần nhớ khi làm việc với con trỏ this
là: luôn chú tới context của con trỏ this khi hàm được gọi, đảm bảo chúng ta đang sử dụng đúng context
của hàm như ý muốn.
Xin chân thành cảm ơn