Làm cách nào để gọi một hàm lớp trong JavaScript?
Trong bài đăng trên blog này, tôi sẽ hướng dẫn bạn một ví dụ thực tế sử dụng khái niệm lớp trong Javascript Show
Tôi nghĩ sẽ hữu ích khi làm việc với trường hợp sử dụng thực tế vì việc hiểu các khái niệm sẽ đơn giản hơn nhiều khi bạn có thể liên hệ chúng với cuộc sống thực Vì vậy, trong hướng dẫn này, bạn sẽ tìm hiểu về các lớp trong JavaScript, tính kế thừa, hàm trừu tượng, cách sử dụng các từ khóa như 4 và 5, từ khóa tĩnh và các thành viên riêng của lớpHãy đi sâu vào Mục lụcđiều kiện tiên quyếtTrước khi bạn bắt đầu đọc bài đăng trên blog này, bạn nên có hiểu biết cơ bản về các chủ đề sau
Các lớp trong JavaScript là gì?Các lớp đã được giới thiệu trong EcmaScript 2015 (ES6) để cung cấp một cách rõ ràng hơn để tuân theo các mẫu lập trình hướng đối tượng JavaScript vẫn theo mô hình kế thừa dựa trên nguyên mẫu. Các lớp trong JavaScript là đường cú pháp trên mô hình kế thừa dựa trên nguyên mẫu mà chúng tôi sử dụng để triển khai các khái niệm OOP Do đó, việc giới thiệu các lớp trong JS giúp các nhà phát triển xây dựng phần mềm xung quanh các khái niệm OOP dễ dàng hơn. Nó cũng mang những điểm tương đồng với các ngôn ngữ lập trình dựa trên OOP khác như C ++ và Java Trước các lớp học, chúng tôi đã sử dụng các hàm xây dựng để thực hiện OOP trong JavaScript. Hãy xem ví dụ dưới đây Chức năng xây dựng bútĐoạn mã trên hiển thị một hàm tạo 6 có các thuộc tính tên, màu và giá. Chúng tôi đang sử dụng từ khóa 7 với hàm tạo 6 để tạo một đối tượng 9. Bây giờ, giả sử chúng ta muốn thêm một hàm mới vào hàm tạo 6. Để làm điều này, chúng ta cần thêm hàm vào thuộc tính nguyên mẫu của 6. Hãy xem hàm 2 bên dưới Thêm chức năng trong hàm tạoNếu những khái niệm này không có ý nghĩa với bạn, thì tôi khuyên bạn nên trau dồi kiến thức cơ bản/JS của mình thông qua các bài viết được đề cập trong phần Điều kiện tiên quyết. Đặc biệt, hãy xem bài viết về Prototype và hàm Constructor Nhìn vào đoạn mã trên, chúng ta có thể nói rằng chúng ta đã làm được những gì chúng ta muốn làm – đó là thêm một hàm 2 vào hàm tạo 6. Nhưng bạn có thể thấy rằng nó không dễ đọc như vậy so với các khái niệm OOP mà chúng tôi triển khai trong C++ hoặc JavaChúng ta có thể tạo lại ví dụ trên với sự trợ giúp của từ khóa 5. Hãy nhìn vào đoạn mã dưới đây Sử dụng từ khóa Class trong JSNhận thấy sự khác biệt. Chúng tôi đã đạt được kết quả tương tự nhưng với cú pháp rõ ràng hơn nhiều. Việc thêm một hàm thành viên mới như 2 dễ dàng hơn nhiều so với việc thêm một hàm trực tiếp vào nguyên mẫu của hàm tạoHãy đi sâu hơn vào các lớp trong JS bằng cách sử dụng một trường hợp sử dụng ví dụ. Với trường hợp sử dụng này, chúng ta sẽ xem những khái niệm này có thể hữu ích như thế nào để giải quyết một số vấn đề thực tế Mô tả trường hợp sử dụngChỉ cần một lưu ý nhanh chóng. các sơ đồ Ngữ cảnh, Vùng chứa và Lớp được vẽ trong bài đăng trên blog này không tuân theo chính xác các quy ước của các sơ đồ trên. Tôi đã tính gần đúng các sơ đồ để giúp bạn hiểu các khái niệm nói chung Trước khi bắt đầu, tôi khuyên bạn nên đọc các mô hình c4, sơ đồ bộ chứa và sơ đồ ngữ cảnh nếu bạn cần xem lại. Bạn có thể tìm thấy chúng trong phần điều kiện tiên quyết Chúng ta sẽ giải bài toán sau. giúp người bán hàng phân loại ghế trong kho của họ và hiển thị chúng trên màn hình Trường hợp sử dụng đơn giản và khá dễ hiểu. Hãy xem sơ đồ bên dưới thể hiện toàn bộ hệ thống được đề xuất Như bạn có thể thấy từ sơ đồ trên, có 3 thành phần chính
Bây giờ chúng ta đã hiểu trường hợp sử dụng, hãy bắt đầu với hệ thống mục tiêu mà chúng ta sẽ tập trung vào trong bài đăng trên blog này. Đó là hệ thống quản lý ghế Chúng tôi sẽ bắt đầu bằng cách tạo một số thành phần chính trong Hệ thống quản lý ghế của chúng tôi. Các thành phần của chúng tôi trong hệ thống này chỉ là các lớp khác nhau sẽ giúp tạo điều kiện thuận lợi cho các nhu cầu khác nhau của chủ cửa hàng Hãy thêm một thành phần có tên là 7. Vì là class nên nó sẽ có các thuộc tính (properties) và hành vi (method) riêngHãy nhìn vào sơ đồ trên. Chúng tôi có thể thấy điều đó
Chúng tôi sẽ làm theo cách trình bày ở trên cho tất cả các thành phần mà chúng tôi sẽ tạo trong suốt bài viết này Thành phần 7 sẽ là thành phần cơ sở của chúng tôi. Điều này có nghĩa là tất cả các loại ghế khác như ghế văn phòng, ghế ăn, v.v. sẽ thuộc loại/thành phần nàyHãy bắt đầu bằng cách tạo lớp ghế cơ sở của chúng ta trong JS. Hãy nhìn vào đoạn mã dưới đây 8Ghế Lớp cơ bảnLớp chủ nhiệm có các thành viên sau
Ở cuối đoạn mã, chúng tôi có hai câu lệnh nhật ký giao diện điều khiển. Cái đầu tiên sẽ in ra định nghĩa của lớp 7. Đối tượng thứ hai sẽ in phiên bản 83Nếu bạn nhìn vào đầu ra đầu tiên, nó sẽ in ra lớp 7. Chúng ta hãy xem nội dung của nó
0Đầu ra nhật ký bảng điều khiển thứ haiCâu lệnh nhật ký thứ hai in ra thông tin của đối tượng ghế. Nó sẽ bao gồm tất cả các thuộc tính của lớp Chair. Nếu để ý kỹ, bạn có thể thấy rằng nguyên mẫu của trường hợp này tương tự như nguyên mẫu của thuộc tính 85 của lớp ghế. Điều này xảy ra do kế thừa nguyên mẫuBây giờ, hãy xem cách chúng ta có thể sử dụng khái niệm này bằng cách thêm một thành phần/lớp mới vào Hệ thống quản lý ghế của chúng ta Chức năng trừu tượng và tính kế thừa trong hệ thống quản lý ghếHàm trừu tượng chỉ là một chữ ký hàm trong một lớp mà không có bất kỳ triển khai nào. Nó giúp chúng tôi tổng quát hóa mã để các lớp con có thể sử dụng chúng và thêm phần triển khai của riêng chúng vào đó Để chứng minh điều này trong trường hợp sử dụng của chúng tôi, hãy thêm một thành phần nữa vào Hệ thống quản lý ghế của chúng tôi Tôi đã sửa đổi lớp ghế để bây giờ nó bao gồm các giá trị mặc định. Các giá trị mặc định này sẽ được sử dụng bởi tất cả các phiên bản. Sau này lớp con có thể sửa đổi nó. Chúng ta sẽ thấy ngay làm thế nào chúng ta có thể đạt được điều này. Hãy xem lớp 7 mới bên dưới 3Chair lớp với giá trị mặc địnhBây giờ, hãy thêm một thành phần/lớp mới có tên là 02. Điều này sẽ kế thừa các thuộc tính và phương thức từ lớp 7. Sơ đồ lớp sửa đổi mới sẽ trông như thế nàyLưu ý rằng lớp mới 02 chỉ bao gồm các phương thức chứ không phải các thuộc tính. Ở đây chúng ta giả sử rằng tất cả các thuộc tính sẽ được kế thừa từ lớp 7. Đối với lớp 02, chúng tôi đã triển khai các phương thức trừu tượng có trong lớp 7Hãy xem đoạn mã dưới đây cho lớp 02 1Triển khai lớp OfficeChairĐây là lớp kế thừa các chức năng và thuộc tính từ lớp cha 09. Nó sử dụng từ khóa 30 để cho phép lớp 02 thực hiện kế thừaTừ khóa 30 có cú pháp như sau 6Tiếp theo, chúng ta có hàm tạo và triển khai một số hàm từ lớp cha. Lưu ý rằng chúng tôi đang sử dụng từ khóa 4 trong hàm tạoChúng ta sử dụng từ khóa 4 để gọi phương thức khởi tạo của lớp cha. Chúng ta cũng có thể sử dụng nó để gọi các hàm và thuộc tính của lớp chaMột lời cảnh báo khi bạn đang sử dụng từ khóa 4
Bạn có thể đọc thêm về 4 trong tài liệu MDNCuối cùng, nếu bạn để ý, chúng tôi đã thêm phần triển khai cho các hàm trừu tượng. Các chức năng như sau
Lưu ý rằng chúng tôi cũng đã khởi tạo lại một số thuộc tính của lớp 7, chẳng hạn như 18. Chúng tôi sẽ xác định rõ ràng thuộc tính 18 cho mỗi phân lớp. Điều này sẽ giúp chúng tôi phân loại những chiếc ghế có trong kho bằng cách chỉ định các lớp này cho từng chiếcBây giờ bạn sẽ có một ý tưởng về các hàm trừu tượng là gì và chúng có thể hữu ích như thế nào. Một số lợi thế của việc có chức năng trừu tượng
Từ khóa tĩnh trong JavascriptTừ khóa 60 trong JavaScript giúp bạn định nghĩa các hàm và thuộc tính trong lớp mà thể hiện của đối tượng không thể gọi được. Chúng chỉ có thể được gọi bởi chính lớp bao gồm các hàm và thuộc tính tĩnh nàyNói chung, chúng tôi sử dụng các phương thức 60 trong các lớp cho các mục đích tiện ích như in ra tất cả các thuộc tính của lớp, tạo một đối tượng mới, xóa các đối tượng khác của lớp, v.v. Ưu điểm của việc sử dụng các hàm hoặc thuộc tính của 60 trong một lớp là
Bây giờ hãy xem cách chúng ta có thể triển khai khái niệm này trong lớp 7 của chúng ta. Chúng tôi cũng sẽ xem xét một số trường hợp sử dụng mà chúng tôi có thể sử dụng từ khóa 60Dưới đây là các tình huống mà bạn có thể sử dụng từ khóa 60
Để biết thêm thông tin về các tình huống trên, vui lòng truy cập tài liệu MDN Chúng ta sẽ xem tất cả các biến thể của lớp 7 thông qua các tình huống nàyCách sử dụng từ khóa function Pen(name, color, price) { this.name = name; this.color = color; this.price = price; } const pen1 = new Pen("Marker", "Blue", "$3"); Pen.prototype.showPrice = function(){ console.log(`Price of ${this.name} is ${this.price}`); } pen1.showPrice();60 trong lớp họcGiống như bất kỳ ngôn ngữ lập trình nào khác, đây là một trong những cách thân thiện với người mới bắt đầu nhất để sử dụng từ khóa tĩnh. Hãy định nghĩa một số phương thức và thuộc tính của các lớp là 60 và quan sát hành viHãy nhìn vào đoạn mã dưới đây 3Dưới đây là đầu ra của mã trên Như bạn có thể thấy ở trên, các phương thức tĩnh chỉ có thể truy cập thông qua chính lớp đó. Nó không thể được truy cập bởi các thể hiện của lớp 7. Các thể hiện của lớp không có các thuộc tính tĩnhNhư bạn có thể thấy ở trên, thể hiện 30 của lớp 7 không có phương thức hoặc thuộc tính tĩnh có trong định nghĩa của nóNếu bạn cố gắng truy cập một phương thức tĩnh hoặc một thuộc tính bằng cách sử dụng một thể hiện của lớp thì nó sẽ đưa ra lỗi tham chiếu hoặc đơn giản là trả về không xác định Cách sử dụng từ khóa function Pen(name, color, price) { this.name = name; this.color = color; this.price = price; } const pen1 = new Pen("Marker", "Blue", "$3"); Pen.prototype.showPrice = function(){ console.log(`Price of ${this.name} is ${this.price}`); } pen1.showPrice();60 trong một hàm tĩnh khácCó thể xảy ra trường hợp bạn cần sử dụng các thuộc tính hoặc hàm tĩnh bên trong một hàm tĩnh khác. Bạn có thể làm điều này bằng cách tham khảo thuộc tính/hàm khác của mình bằng cách sử dụng từ khóa này bên trong hàm tĩnh Hãy sửa đổi lớp 7 của chúng ta để cho thấy nó hoạt động như thế nào 9Tĩnh trong triển khai tĩnhNhư bạn có thể thấy hàm 34 có quyền truy cập vào các thuộc tính tĩnh 35 và 36Cách gọi các thuộc tính/hàm tĩnh từ một hàm tạoTương tự như những gì chúng ta đã thấy ở trên, bạn cũng có thể truy cập các thuộc tính/hàm tĩnh này trong hàm tạo. Để làm điều này, mọi thứ ở đây hơi khác một chút Trong một hàm tạo để gọi một thuộc tính/hàm tĩnh, bạn cần sử dụng 37 hoặc 38. Điều này xảy ra vì từ khóa 39 không có quyền truy cập trực tiếp vào các thành viên tĩnh. Điều này không chỉ đúng với hàm tạo mà bất kỳ hàm không tĩnh nàoHãy cố gắng hiểu điều này bằng cách sửa đổi lớp 7 0Trong đoạn mã trên, dòng cuối cùng 91 giới thiệu cách chúng ta có thể sử dụng phương thức tĩnh bên trong hàm tạoCác thành viên riêng của các lớp trong JavascriptThành viên riêng là thành viên của lớp chỉ có thể được sử dụng nội bộ bởi chính lớp đó. Chúng không thể được truy cập bên ngoài lớp. Ngay cả các thể hiện của lớp cũng không thể truy cập các thành viên riêng tư này Tất cả các thành viên private được khai báo bằng cú pháp 92. Chúng thường được gọi là tên bămHãy xem một ví dụ dựa trên trường hợp sử dụng của chúng tôi Chúng ta sẽ định nghĩa một số thuộc tính mới bên trong lớp 02. Giả sử chúng tôi muốn thêm thông tin thanh toán mặc định cho tất cả các ghế văn phòng. Chúng tôi cũng muốn những thứ này chỉ có thể truy cập được đối với lớp 02 để các hàm tiện ích khác có thể sử dụng các biến nàyChúng tôi không muốn các lớp khác can thiệp vào thông tin thanh toán của các lớp khác. Để xử lý việc này, chúng ta có thể sử dụng các trường riêng tư Xem xét việc bổ sung các trường sau
Lưu ý rằng chúng ta có thể biểu diễn các trường riêng tư trong sơ đồ lớp bằng dấu gạch ngang, như thế này. 95Hãy xem mã bên dưới để minh họa cách chúng tôi đã thêm các trường này vào lớp 02 1Cách sử dụng của thành viên PrivateKhi bạn chạy đoạn mã trên trong bảng điều khiển, bạn sẽ thấy đầu ra sau Như bạn có thể thấy từ đầu ra ở trên, chúng ta đã thực thi hàm 97. Hàm này truy cập các trường riêng và hàm trong lớp để tạo thông tin thanh toánCác biến riêng tư này sẽ chỉ có thể truy cập được trong chính lớp đó. Nếu bạn cố gắng tham chiếu bất kỳ thành viên riêng tư nào của lớp thì nó sẽ đưa ra lỗi cú pháp như bên dưới 2Hãy để tôi chứng minh nó trông như thế nào nếu một lớp con cố gắng truy cập các biến riêng tư của lớp cơ sở 3Đoạn mã trên sẽ đưa ra một lỗi cú pháp vì bạn đang cố truy cập vào thuộc tính riêng của một lớp khác Các biến riêng tĩnh nằm ngoài phạm vi của bài đăng trên blog này, vì vậy chúng tôi sẽ không thảo luận thêm về chúng. Nhưng bạn có thể đọc về chúng ở đây Tóm lượcĐây là một số cách chúng ta có thể tận dụng các lớp trong JavaScript để triển khai các khái niệm lập trình hướng đối tượng trong một ví dụ thực tế Bạn có thể đọc thêm về các khái niệm hướng đối tượng nâng cao bên dưới
Cảm ơn bạn đã đọc Theo dõi tôi trên Twitter, GitHub và LinkedIn QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO Nhà phát triển front-end👨💻; Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu Làm cách nào để gọi một hàm của một lớp trong JavaScript?Phương thức call() là một phương thức JavaScript được xác định trước. Nó có thể được sử dụng để gọi (gọi) một phương thức với đối tượng chủ sở hữu làm đối số (tham số). Với call() , một đối tượng có thể sử dụng một phương thức thuộc đối tượng khác.
Làm cách nào để gọi một hàm bên trong một lớp trong JavaScript từ html?var test = new MyObject(); và sau đó làm điều này. kiểm tra. myMethod();
Làm cách nào để gọi một hàm trong hàm JavaScript?Lệnh gọi Hàm Javascript() Phương thức call() Hàm JavaScript gọi một hàm với giá trị this đã cho và các đối số được cung cấp riêng lẻ . Phương thức call() gọi một hàm bằng cách truyền this và các giá trị được chỉ định làm đối số.
Làm cách nào để gọi lớp CSS trong JS?Để làm điều đó, trước tiên chúng ta tạo một lớp và gán nó cho các phần tử HTML mà chúng ta muốn áp dụng thuộc tính CSS trên đó. Chúng ta có thể sử dụng thuộc tính className và classList trong JavaScript . Tiếp cận. Thuộc tính className được sử dụng để thêm một lớp trong JavaScript. |