Triển khai chức năng liên kết trong JavaScript
Chúng tôi tiếp tục với loạt bài của mình để giúp bạn chuẩn bị tốt nhất có thể cho các cuộc phỏng vấn trong Javascript. Chúng tôi sẽ xem xét một câu hỏi khác mà tôi đã được đưa ra trong một cuộc phỏng vấn cho vị trí nhà phát triển front-end cấp cao trong một công ty khởi nghiệp Show
triển khai chức năng liên kết của riêng bạn trong vanilla javascriptĐiều cần thiết là phải hiểu câu hỏi trước khi vội vàng trả lời. Tôi thực sự khuyên bạn nên đọc bài đăng này về quá trình phỏng vấn Vui lòng viết một hàm liên kết trả về một hàm mới như định nghĩa sau
Chúng ta sẽ cần thực hiện các bước sau để viết chức năng của mình
Xác thực đầu vàoChúng tôi sẽ sử dụng hàm typeof để xác thực rằng đầu vào thực tế là một hàm
Bây giờ chúng ta nên trả về một chức năng mới
Tiếp theo, chúng ta nên gọi hàm được yêu cầu với các đối số của nó
Chức năng mới bây giờ sẽ được gọi khi được yêu cầu nhưng vẫn không có ràng buộc thực sự Đối số Javascript
“Đối số” là một đối tượng giống như mảng, nghĩa là nó không phải là một mảng nên chúng ta sẽ ép nó thành một
Áp dụng Javascript
Chơi lô tô. Bằng cách kết hợp Áp dụng và truyền đối số cho một mảng, giờ đây chúng ta có thể hoàn thiện hàm liên kết của riêng mình
Cuộc gọi thông báo cũng là một cách thay thế để áp dụng nhưng nó nhận từng đối số một thay vì một mảng sẽ thuận tiện hơn trong trường hợp này. Nếu bạn chọn sử dụng chức năng gọi thì bạn sẽ cần trải rộng các đối số Trong bài viết này, tôi sẽ giải thích cách sử dụng lệnh gọi, áp dụng và liên kết trong JavaScript bằng các ví dụ đơn giản Chúng tôi cũng sẽ triển khai một ví dụ minh họa cách bạn có thể tạo chức năng bản đồ của riêng mình bằng chức năng áp dụng Không chần chừ thêm nữa, chúng ta hãy bắt đầu Mục lụcđiều kiện tiên quyếtDưới đây là một số điều bạn nên hiểu để tận dụng tối đa bài viết này
Định nghĩaHãy xem xét các hàm mà chúng ta sẽ nghiên cứu ở đây kỹ hơn một chút để hiểu chức năng của chúng Gọi là một chức năng giúp bạn thay đổi ngữ cảnh của chức năng gọi. Theo thuật ngữ của giáo dân, nó giúp bạn thay thế giá trị của 7 bên trong một hàm bằng bất kỳ giá trị nào bạn muốnÁp dụng rất giống với chức năng 8. Sự khác biệt duy nhất là trong 9 bạn có thể truyền một mảng dưới dạng danh sách đối sốBind là một chức năng giúp bạn tạo một chức năng khác mà bạn có thể thực thi sau này với bối cảnh mới là 7 được cung cấpBây giờ chúng ta sẽ xem xét một số ví dụ cơ bản về các hàm gọi, áp dụng và liên kết. Sau đó, chúng ta sẽ xem xét một ví dụ mà chúng ta sẽ xây dựng chức năng của riêng mình tương tự như chức năng bản đồ Cách sử dụng hàm gọi trong JavaScript 8 là một hàm mà bạn sử dụng để thay đổi giá trị của 7 bên trong một hàm và thực thi nó với các đối số được cung cấpĐây là cú pháp của hàm 8
Ở đâu,
Lưu ý rằng nếu bạn gọi một hàm mà không có bất kỳ đối số 8 nào, thì JavaScript sẽ coi thuộc tính này là một đối tượng toàn cụcBây giờ chúng ta đã có một số ngữ cảnh xung quanh hàm 8 là gì, hãy bắt đầu bằng cách hiểu nó chi tiết hơn với một số ví dụCách gọi một hàm với các ngữ cảnh khác nhau trong JSXem xét ví dụ dưới đây. Nó bao gồm 3 lớp – 0, 1 và 2
Nếu để ý kỹ, bạn có thể thấy rằng chúng ta sử dụng hàm 8 để gọi hàm 0 trong hai trường hợp. Đầu tiên, trong hàm 5 và sau đó trong hàm 6Trong cả hai hàm này, chúng ta gọi hàm 0 với đối tượng 7 đại diện cho chính các hàm tương ứng. Ví dụ, bên trong 5, chúng ta gọi hàm 0 với đối tượng 7 thuộc ngữ cảnh của nó. Trường hợp tương tự đối với 6Cách gọi một hàm không có đối số trong JSXem xét ví dụ dưới đây
Trong ví dụ này, chúng tôi đã gọi hàm 3 mà không có đối số 8. Trong những trường hợp như vậy, JavaScript đề cập đến đối tượng toàn cầuCách sử dụng chức năng Áp dụng trong JavaScriptHàm 5 rất giống với hàm 6. Sự khác biệt duy nhất giữa 8 và 9 là sự khác biệt trong cách truyền đối sốTrong 9, các đối số bạn có thể truyền đối số dưới dạng một mảng ký tự hoặc một đối tượng mảng mớiĐây là cú pháp của hàm 9
Ở đâu,
Như bạn có thể thấy ở trên, hàm 9 có các loại cú pháp khác nhauCú pháp đầu tiên là một cú pháp đơn giản. Bạn có thể chuyển vào một mảng các đối số như bên dưới
Cú pháp thứ hai là nơi chúng ta có thể truyền vào đối tượng mảng mới cho nó
Cú pháp thứ ba là nơi chúng ta có thể chuyển vào từ khóa đối số
đối số là một đối tượng đặc biệt có sẵn bên trong một chức năng. Nó chứa các giá trị của các đối số được truyền cho một hàm. Bạn có thể sử dụng từ khóa này với hàm 9 để lấy bất kỳ số lượng đối số tùy ý nàoPhần hay nhất về 9 là chúng ta không cần quan tâm đến số lượng đối số được truyền cho hàm gọi. Do tính chất năng động và linh hoạt của nó, bạn có thể sử dụng nó trong các tình huống phức tạpHãy xem ví dụ tương tự như trên, nhưng lần này chúng ta sẽ sử dụng hàm 9
Và đây là một ví dụ giới thiệu cách bạn sử dụng từ khóa 8
Cách sử dụng chức năng liên kết trong JavaScriptHàm 9 tạo một bản sao của hàm có giá trị mới cho ____6_______7 hiện diện bên trong hàm gọiĐây là cú pháp của hàm 9
Ở đâu,
Hàm 9 sau đó trả về một hàm mới bao gồm ngữ cảnh mới cho biến 7 có bên trong hàm gọi 0Bây giờ chức năng này 6 có thể được thực thi sau với các đối sốHãy xem một ví dụ kinh điển về cách sử dụng hàm 9 với sự trợ giúp của thành phần React dựa trên lớp 1Xem xét thành phần Ứng dụng ở trên. Nó cấu thành những điều sau đây
Nếu chúng tôi nhấp vào nút 4 thì chúng tôi sẽ nhận được thông báo lỗi. 5Bạn đã bao giờ tự hỏi tại sao vấn đề này xảy ra? Bạn có thể mong đợi rằng chúng ta có thể truy cập trạng thái của lớp vì 3 là một phương thức của lớp. Nhưng đây là bắt
Chúng ta có thể khắc phục điều này bằng cách cung cấp ngữ cảnh phù hợp của 7 bên trong phương thức 3. Bạn có thể làm điều này với phương pháp 9 2 9 sẽ tạo một hàm mới và lưu trữ nó bên trong đối tượng 7 với một thuộc tính mới là 3. 6 sẽ đảm bảo rằng ngữ cảnh 7 của lớp được áp dụng cho hiện tại của 7 bên trong hàm 3Cách tạo Hàm function Car(type, fuelType){ this.type = type; this.fuelType = fuelType; } function setBrand(brand){ Car.call(this, "convertible", "petrol"); this.brand = brand; console.log(`Car details = `, this); } function definePrice(price){ Car.call(this, "convertible", "diesel"); this.price = price; console.log(`Car details = `, this); } const newBrand = new setBrand('Brand1'); const newCarPrice = new definePrice(100000);00 của riêng bạnBây giờ chúng ta đã có tất cả những thứ cần thiết, hãy bắt đầu bằng cách tạo chức năng bản đồ 01 của chúng ta. Trước tiên hãy hiểu những thứ mà chúng ta sẽ cần để xây dựng chức năng bản đồ 01 của mìnhĐây là cú pháp của hàm 00 3Ở đâu,
Chức năng cơ bản của hàm 00 rất đơn giảnĐó là một hàm đi qua từng phần tử của một mảng và áp dụng hàm được truyền dưới dạng đối số. Kiểu trả về của bản đồ lại là một mảng với 6 được áp dụng cho mỗi phần tửBây giờ chúng ta đã hiểu các yêu cầu, vì vậy chúng ta có thể chuyển sang tạo hàm 00 của riêng mình. Đây là mã của chức năng 00 mới của chúng tôi 4Hãy hiểu chức năng trên từng chút một
Bây giờ hãy xem cách chúng ta sẽ thực thi hàm 17. Cách tiếp cận dưới đây để thêm một phương thức mới vào kiểu dữ liệu nguyên thủy hiện có không được khuyến nghị nhưng chúng tôi vẫn sẽ làm điều đó vì mục đích của bài viết nàyGHI CHÚ. không làm theo cách tiếp cận dưới đây trong mã sản xuất của bạn. Điều này có thể gây ra thiệt hại cho mã hiện có 5 18 chúng tôi tạo một thuộc tính mới bên trong 19Khi điều này được thực hiện, chúng ta có thể bắt đầu thực hiện chức năng bản đồ mới của mình trên một mảng 6Tóm lượcBài viết này đã cho bạn thấy chức năng gọi, áp dụng và liên kết có thể thực hiện thông qua các ví dụ Vì vậy, để nói về các chức năng này một cách ngắn gọn
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 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 nguồn mở của freeCodeCamp đã giúp hơn 40.000 người 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 để tạo hàm liên kết trong JavaScript?Phương thức bind() JavaScript . fn. . hãy để người = { tên. 'John Doe', getName. hàm () { bảng điều khiển. nhật ký (cái này. Tên); . getName, 1000);. chưa xác định. . setTimeout(người. getName, 1000);. đặt f = người. getName; . . setTimeout(function() { người. getName(); Làm cách nào để gọi() apply() và bind() trong JavaScript?Sử dụng. gọi() hoặc. apply() khi bạn muốn gọi hàm ngay lập tức và sửa đổi ngữ cảnh. Gọi/áp dụng gọi hàm ngay lập tức, trong khi liên kết trả về một hàm mà khi được thực thi sau đó, sẽ có ngữ cảnh chính xác được đặt để gọi hàm ban đầu .
Liên kết hoạt động như thế nào trong JavaScript?bind là một phương thức trên nguyên mẫu của tất cả các hàm trong JavaScript. Nó cho phép bạn tạo một hàm mới từ một hàm hiện có, thay đổi this context của hàm mới và cung cấp bất kỳ đối số nào mà bạn muốn hàm mới được gọi.
Làm cách nào để liên kết dữ liệu trong JavaScript?Ràng buộc dữ liệu trong khái niệm khá đơn giản. Một mặt, bạn có mô hình dữ liệu và mặt khác, bạn có giao diện, thường được gọi là dạng xem. Ý tưởng là bạn muốn "liên kết" một số phần dữ liệu với thứ gì đó trên dạng xem để khi dữ liệu thay đổi, dạng xem sẽ thay đổi. Đây là điển hình cho dữ liệu chỉ đọc |