Tại sao self lại cần thiết thay vì this trong JavaScript?

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 this3, 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ư this4, ngữ cảnh của this là ngữ cảnh của this6

01. 46 Đoạn thứ ba ở đây là một đối tượng được gọi là this7. Đ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 self0, bạn viết self1. Gọi hàm this4 thực ra là một hình thức rút gọn để gọi self3 hoặc self4 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 (self6) trong câu lệnh gọi. Vì vậy, khi bạn gọi self1, đây là đối tượng this7

02. 26 Khi bạn gọi this4, điều đó thực sự có nghĩa là bạn đang gọi self3, và this là phần bên trái của dấu chấm, đó là ngữ cảnh của this6

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 self4 có một thuộc tính gọi là self5, là một mảng của self6, self7 và self8. Ngoài ra còn có một phương pháp gọi là self9

03. 06 Trong phương thức đó, ngữ cảnh của this chính là đối tượng self4. Cho đến nay, đối tượng này giống như đối tượng this7 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 self9, tôi muốn lặp qua các loại trái cây khác nhau trong mảng self5

03. 23 Một cách thuận tiện để làm điều này là sử dụng phương thức this5 trên mảng. Phương thức this5 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 self4, mà với ngữ cảnh this6

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 this6. Hậu quả là từ khóa this của bạn không còn trỏ đến đối tượng self4. 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 self4 ở đâ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 self8 này. this đầu tiên là đối tượng self4, vì đây là bên trong hàm thành viên self8. Sự khác biệt giữa phương thức self9 và phương thức self8 là cách tôi gọi phương thức this5

04. 50 Lần này tôi đang sử dụng chức năng mũi tên bên trong this5. 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 self8, là đối tượng self4

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 this2, 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à this9—trong phạm vi của các hàm ẩn danh lồng nhau

06. 16 Giá trị của this9 sẽ vẫn có sẵn trong đối tượng ban đầu. Một số hàm, như this5 trên mảng, nhận tham số cho phép bạn đặt ngữ cảnh. Khi sử dụng this5, bạn có thể chuyển ngữ cảnh hiện tại của this và this5 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 this5, 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à x6. Sử dụng tên của hàm bạn sẽ gọi và sau đó gọi x6 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 x8 hoàn toàn giống như tích hợp sẵn x6, 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 this0 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. this0 khá mạnh, nhưng nó có thể tạo ra một số mã khó theo dõi

07. 28 Nếu this0 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

Tại sao lại sử dụng self trong JavaScript?

Cái này và bản thân có giống nhau không?

Bản thân trong JavaScript là gì?

Hàm nào không bao giờ được sử dụng để chạy JS?