00. 00 Trong ba bài học trước, tôi đã đề cập đến nhiều điều kỳ quặc và rắc rối khác nhau của ngôn ngữ JavaScript. Đây là bài học cuối cùng dành cho những điều kỳ quặc, và toàn bộ bài học được dành cho một điều duy nhất. bối cảnh cuộc gọi của các chức năng và từ khóa this
00. 15 Trong các bài học trước, tôi đã sử dụng từ khóa this
trong ngữ cảnh của các hàm bên trong đối tượng. Khái niệm này tương tự như việc sử dụng self
bên trong Python
00. 25 Nếu bạn đã từng có suy nghĩ “Tại sao mình phải định nghĩa rõ ràng về self
?
00. 35 Vấn đề với this
là cách nó được thiết lập một cách kỳ diệu. Không giống như self
của Python được truyền rõ ràng vào một phương thức đối tượng, giá trị của this
dựa trên cách hàm mà nó chứa bên trong được gọi
00. 50 Nó trở nên phức tạp khi bạn bắt đầu nhận các hàm bên trong các hàm và JavaScript thường làm điều này. Để làm phức tạp thêm mọi thứ, chức năng mũi tên hoạt động khác. Nó thực sự gọn gàng hơn nhiều nhưng việc trộn và kết hợp nó trong mã có thể gây ra kết quả đáng ngạc nhiên
01. 07 Trên slide này, bạn sẽ thấy từ khóa this
được sử dụng trong ba tình huống khác nhau. Trước hết, tôi đã gán nó cho biến toàn cục x
01. 16 Điều này nhấn mạnh cách this
khác với self
trong Python. self
luôn nằm trong ngữ cảnh của một đối tượng. Trong JavaScript, bối cảnh dựa trên chức năng gọi. Nếu không có chức năng gọi, thì this
có nghĩa là bối cảnh toàn cầu. Bên trong trình duyệt, đây là bối cảnh this
3, nhưng ý tưởng tương tự
01. 39 Trong một chức năng mức toàn cầu chẳng hạn như this
4, ngữ cảnh của this
là ngữ cảnh của this
6
01. 46 Đoạn thứ ba ở đây là một đối tượng được gọi là this
7. Điều này tương tự như cách bạn đã thấy tôi sử dụng this
trước đây. Trong bối cảnh này, giá trị của this
là đối tượng chứa
01. 58 Có thể hữu ích khi nghĩ về ba ngữ cảnh khác nhau này bằng cách xem xét cái gì đang gọi hàm. Để gọi phương thức self
0, bạn viết self
1. Gọi hàm this
4 thực ra là một hình thức rút gọn để gọi self
3 hoặc self
4 trong trình duyệt
02. 16 Bối cảnh của this
là những gì ở bên trái của dấu chấm [self
6] trong câu lệnh gọi. Vì vậy, khi bạn gọi self
1, đây là đối tượng this
7
02. 26 Khi bạn gọi this
4, điều đó thực sự có nghĩa là bạn đang gọi self
3, và this
là phần bên trái của dấu chấm, đó là ngữ cảnh của this
6
02. 35 Điều này rất quan trọng để hiểu trước khi tôi làm cho nó phức tạp hơn. Trong Python, self
là đối tượng. Trong JavaScript, ngữ cảnh dựa trên cách gọi hàm
02. 46 Điều này dẫn đến hậu quả với các hàm ẩn danh và lồng nhau
02. 52 Hãy xem ngữ cảnh bên trong một đối tượng phức tạp hơn. Đối tượng self
4 có một thuộc tính gọi là self
5, là một mảng của self
6, self
7 và self
8. Ngoài ra còn có một phương pháp gọi là self
9
03. 06 Trong phương thức đó, ngữ cảnh của this
chính là đối tượng self
4. Cho đến nay, đối tượng này giống như đối tượng this
7 trên trang trình bày trước, nhưng đây là nơi nó trở nên lộn xộn hơn một chút. Trong phương thức self
9, tôi muốn lặp qua các loại trái cây khác nhau trong mảng self
5
03. 23 Một cách thuận tiện để làm điều này là sử dụng phương thức this
5 trên mảng. Phương thức this
5 nhận một hàm ẩn danh, nó gọi cho từng mục khi nó được truy cập trong mảng
03. 36 Trong ngữ cảnh của hàm ẩn danh này, từ khóa this
không còn bị ràng buộc với đối tượng self
4, mà với ngữ cảnh this
6
03. 45 Hãy nghĩ lại câu hỏi “Nó được gọi như thế nào?” . Cái gì ở bên trái của dấu chấm gọi của một chức năng ẩn danh?
03. 58 Hàm ẩn danh kết thúc trong ngữ cảnh this
6. Hậu quả là từ khóa this
của bạn không còn trỏ đến đối tượng self
4. Trên thực tế, nếu không thực hiện các bước bổ sung, bạn hoàn toàn không có cách nào hiểu được ngữ cảnh self
4 ở đây
04. 16 Trong bài học trước, tôi đã giới thiệu với các bạn hàm mũi tên. Tôi đã giải thích nó như một lối tắt để xác định chức năng. Vâng, nó có một khía cạnh quan trọng khác. Nó xử lý từ khóa this
theo cách khác
04. 27 Trên thực tế, nó không sử dụng nó. Trong ngữ cảnh của hàm mũi tên, this
không thay đổi. Nó có thể được truy cập, mặc dù. Hãy xem xét phương pháp self
8 này. this
đầu tiên là đối tượng self
4, vì đây là bên trong hàm thành viên self
8. Sự khác biệt giữa phương thức self
9 và phương thức self
8 là cách tôi gọi phương thức this
5
04. 50 Lần này tôi đang sử dụng chức năng mũi tên bên trong this
5. Vì hàm mũi tên không liên kết lại giá trị this
, nên nó sẽ vẫn là bất kỳ giá trị nào trước đó, đó là ngữ cảnh của this
bên trong hàm self
8, là đối tượng self
4
05. 07 Đây là một lý do thực sự tốt để sử dụng các hàm mũi tên bên trong các phương thức đối tượng. Nó làm cho this
hoạt động giống như self
trong Python
05. 17 Tuy nhiên, một lời cảnh báo. Việc thiếu ngữ cảnh trong hàm mũi tên có thể là một vấn đề cũng như một giải pháp. Hãy xem xét đoạn mã cuối cùng này. Bằng cách sử dụng phím tắt để xác định phương thức this
2, bạn sẽ không nhận được giá trị của this
05. 32 Nếu bạn dừng mã tại thời điểm này và kiểm tra giá trị của this
, bạn sẽ thấy đó là một đối tượng trống. Khi tôi lần đầu tiên bắt gặp chức năng mũi tên, tôi đã không nhận ra sự khác biệt này
05. 43 Thực ra lúc đó tôi nghĩ từ khóa this
giống như từ khóa self
trong Python. Một buổi chiều rất bực bội, sau đó là cuộc trò chuyện với một người bạn của tôi đã giải quyết được một loạt vấn đề này. Nếu, giống như tôi, mô hình suy nghĩ của bạn về this
dựa trên các ngôn ngữ khác, thì bạn có thể nhận được một số bất ngờ, và không phải kiểu chúc mừng sinh nhật mà giống kiểu vé đỗ xe hơn
06. 03 Có nhiều giải pháp khác cho vấn đề ngữ cảnh ngoài chức năng mũi tên. Một cách giải quyết phổ biến là lưu trữ giá trị của this
trong một biến khác—tên phổ biến của nó là this
9—trong phạm vi của các hàm ẩn danh lồng nhau
06. 16 Giá trị của this
9 sẽ vẫn có sẵn trong đối tượng ban đầu. Một số hàm, như this
5 trên mảng, nhận tham số cho phép bạn đặt ngữ cảnh. Khi sử dụng this
5, bạn có thể chuyển ngữ cảnh hiện tại của this
và this
5 sẽ đặt ngữ cảnh đó bên trong hàm ẩn danh
06. 35 Tính năng này rất tiện dụng nhưng không phải chức năng nào cũng có. Nhưng nếu bạn đang sử dụng this
5, bạn có thể tận dụng nó
06. 42 JavaScript cung cấp ba hàm dựng sẵn cho phép bạn thiết lập rõ ràng ngữ cảnh cho một hàm gọi. Đầu tiên là x
6. Sử dụng tên của hàm bạn sẽ gọi và sau đó gọi x
6 trên tên hàm đó để thay thế
06. 57 Bạn có thể truyền ngữ cảnh và đối số cho hàm được đặt tên. Tích hợp sẵn x
8 hoàn toàn giống như tích hợp sẵn x
6, nhưng thay vì lấy một mảng đối số, nó sử dụng cú pháp nhiều đối số
07. 11 Và cuối cùng, tích hợp sẵn this
0 nhận chức năng đã đặt tên, liên kết ngữ cảnh đã cho và trả về một chức năng mới. Sau đó, bạn có thể gọi chức năng mới từ bất kỳ đâu và chức năng này sẽ được đặt phù hợp cho dù bạn ở đâu. this
0 khá mạnh, nhưng nó có thể tạo ra một số mã khó theo dõi
07. 28 Nếu this
0 xảy ra trong một tệp khác hoặc trong hàng trăm dòng ở trên, bạn rất dễ quên rằng ngữ cảnh đã bị thay đổi và không hiểu đúng giá trị của this
khi bạn đang đọc mã
07. 40 Mọi thứ trên trang trình bày này giờ đây có cảm giác hơi khó hiểu khi các chức năng mũi tên tồn tại và ý tôi không phải là hơi khó hiểu khi nói “Tôi tự hào về giải pháp thay thế mà tôi đã tìm thấy, điều này thật tuyệt phải không?”
07. 54 Chà, bây giờ. Đó là một hành trình dài. Trong bài học cuối cùng, tôi sẽ kết thúc và tóm tắt mọi thứ đã được đề cập