HomeLập trìnhJavaScriptCách sử dụng...

Cách sử dụng các phương thức apply(?), call(?) và bind(➰) trong JavaScript


bởi Ashay Mandwarya ?️??

--O2-evEw9GenfrN-p9Tvj6uXwFgSmQTTgq1
Ảnh của Pankaj Patel trên Bapt

Trong bài viết này, chúng ta sẽ nói về các phương thức áp dụng, gọi và liên kết của chuỗi nguyên mẫu hàm. Chúng là một số khái niệm quan trọng nhất và thường được sử dụng trong JavaScript và có liên quan rất chặt chẽ với cái này từ khóa.

Vì vậy, để nắm bắt được những thông tin trong bài viết này, trước tiên bạn phải làm quen với khái niệm và cách sử dụng của cái này từ khóa. Nếu bạn đã quen thuộc với nó thì bạn có thể tiếp tục — nếu không, bạn có thể tham khảo bài viết này tại đây và sau đó quay lại đây.

Để tìm hiểu về áp dụng|gọi|ràng buộc chúng ta cũng cần biết về các hàm trong JavaScript, giả sử bạn đã quen thuộc với cái này.

Chức năng

EIxaDY6mTA74uZjnPlWuLJAIzhhTuxGEiVC9
Ảnh của The Roaming Platypus trên Bapt

Hàm tạo Hàm tạo một đối tượng Hàm mới. Gọi trực tiếp hàm tạo có thể tạo các hàm động, có thể được thực thi trong phạm vi toàn cầu.

Vì các hàm là các đối tượng trong JavaScript, nên việc gọi chúng được kiểm soát bởi áp dụng, gọi và ràng buộc các phương pháp.

Để kiểm tra xem một hàm có phải là một đối tượng Hàm hay không, chúng ta có thể sử dụng đoạn mã trong đoạn mã sau, đoạn mã này trả về true.

qOSEplK6rs2hhpbJBDkiBwASvpaAnd9XW3EX

Đối tượng Hàm toàn cục không có phương thức hoặc thuộc tính riêng. Tuy nhiên, vì bản thân nó là một hàm nên nó kế thừa một số phương thức và thuộc tính thông qua chuỗi nguyên mẫu từ Function.prototype. — MDN

Sau đây là các phương thức trong chuỗi nguyên mẫu chức năng:

  • Hàm.prototype.apply()
  • Hàm.prototype.bind()
  • Hàm.prototype.call()
  • Hàm.prototype.isGenerator()
  • Hàm.prototype.toSource()
  • Object.prototype.toSource
  • Hàm.prototype.toString()
  • Object.prototype.toString

Chúng tôi quan tâm đến ba điều đầu tiên, vì vậy hãy bắt đầu.

Áp dụng ?

2iPUdLujyCPb7mglSPBbmJNDoAUbrFmLcGlw
Ảnh của Julian O’hayon trên Bapt

Các áp dụng() phương thức là một phương thức quan trọng của nguyên mẫu hàm và được sử dụng để gọi các hàm khác với một hàm được cung cấp. cái này giá trị từ khóa và các đối số được cung cấp dưới dạng mảng hoặc một đối tượng giống như mảng.

Các đối tượng giống như mảng có thể tham chiếu đến NodeList hoặc đối tượng đối số bên trong một hàm.

Điều này có nghĩa là chúng ta có thể gọi bất kỳ chức năng nào và chỉ định rõ ràng những gì cái này nên tham chiếu trong hàm gọi.

Đọc thêm  Cách kiểm tra xem một đối tượng có trống không trong JavaScript – JS Java isEmpty Equivalent

cú pháp

F6MxVYBXV6R5cwxInuapX0vlxhhG8Hr5aRp6

Trở lại

Nó trả về kết quả của hàm được gọi bởi cái này.

Sự miêu tả

Các áp dụng phương thức được sử dụng để cho phép một hàm/đối tượng thuộc đối tượng x được gọi và gán cho đối tượng y.

ví dụ

1.

BwwKE0rDKIyFmfJbiLfV-6h-sYIXXrdeD3vL

Như đã thấy trong đoạn mã đã cho, chúng ta thấy rằng khi chúng ta đẩy một mảng vào bên trong một mảng khác, toàn bộ mảng được coi là một phần tử và được đẩy vào bên trong biến mảng.

Nhưng nếu chúng ta muốn các phần tử được đẩy riêng lẻ thay vì dưới dạng một mảng thì sao? Chắc chắn là có n cách để làm như vậy, nhưng khi chúng ta đang học cách áp dụng, hãy sử dụng nó:

NuH14RCGXQv2R0jiw7U34bJ2FeTonBfE3Yl8

Trong ví dụ đã cho, chúng ta có thể thấy việc sử dụng áp dụng trong việc nối hai mảng đã cho. Mảng đối số là mảng phần tử và cái này đối số trỏ đến biến mảng. Các phần tử của mảng phần tử được đẩy tới Object(mảng) mà cái này Chỉ trỏ. Chúng tôi nhận được kết quả là các phần tử riêng lẻ của mảng thứ hai được đẩy sang mảng mà cái này là nhọn.

2.

87MhVt1p1yejr-WnUHXElvuWx8qLgUFi4g4s

Hàm max trong JS được sử dụng để tìm phần tử có giá trị lớn nhất từ ​​một nhóm phần tử nhất định. Nhưng như chúng ta có thể thấy từ đoạn trích, nếu các giá trị ở dạng mảng, chúng ta sẽ nhận được kết quả là NaN. Chắc chắn chúng ta đang nói về JavaScript nên một lần nữa, có n cách để làm điều này, nhưng hãy sử dụng áp dụng.

yDD0VibWncT0LGNE09uj6V0JgkEHrDRNxvY8

Bây giờ khi chúng ta sử dụng apply và sử dụng hàm Math.max(), chúng ta sẽ nhận được kết quả. Như chúng ta đã biết, hàm apply sẽ lấy tất cả các giá trị bên trong mảng làm đối số riêng lẻ và sau đó hàm max sẽ được áp dụng cho chúng. Điều này sẽ cho chúng ta giá trị lớn nhất trong mảng.

Một điều thú vị cần chỉ ra ở đây là thay cho cái này chúng tôi đã sử dụng null. Vì đối số được cung cấp là mảng số, ngay cả khi cái này được giới thiệu, nó sẽ trỏ đến cùng một mảng và chúng ta sẽ nhận được kết quả tương tự. Do đó, trong những trường hợp như vậy, chúng ta có thể sử dụng null thay cho cái này. Điều này cho chúng ta thấy rằng cái này đối số trong hàm áp dụng là đối số tùy chọn.

Đọc thêm  Phạm vi từ vựng trong JavaScript – Hướng dẫn cho người mới bắt đầu

Cuộc gọi

6qS5RGWz35jfeQxoKPXtxee5EYrUX0HDqrMd
Ảnh của Eric Muhr trên Bapt

Các cuộc gọi() phương thức được sử dụng để gọi một hàm với một giá trị nhất định cái này và các đối số được cung cấp cho nó một cách riêng lẻ.

Điều này có nghĩa là chúng ta có thể gọi bất kỳ chức năng nào, chỉ định rõ ràng tham chiếu mà cái này nên tham chiếu trong hàm gọi.

Điều này rất giống với áp dụng, sự khác biệt duy nhất là áp dụng nhận các đối số ở dạng một mảng hoặc các đối tượng giống như mảng và ở đây các đối số được cung cấp riêng lẻ.

cú pháp

huZ9MJlBZBLQHOCJqKBJN0PxhY1DtvFV0Tqg

Trở lại

Kết quả của việc gọi hàm với chỉ định this giá trị và đối số.

Sự miêu tả

Các cuộc gọi phương thức được sử dụng để cho phép một hàm/đối tượng thuộc đối tượng x được gọi và gán cho đối tượng y.

ví dụ

1.

rMsi0io-O7iX5t5YqfljgTgYEC5mWTEJHXcz

Đây là một ví dụ về chuỗi xây dựng. Như chúng ta có thể thấy, trong mọi chức năng, hàm tạo của Sản phẩm được gọi và sử dụng cuộc gọi các thuộc tính của đối tượng Sản phẩm được xâu chuỗi tương ứng với các đối tượng Pizza và Đồ chơi.

Khi các phiên bản mới được tạo cho các đối tượng Pizza và Đồ chơi, các tham số được cung cấp như tên, giá và danh mục. Danh mục chỉ được áp dụng trong định nghĩa, nhưng tên và giá được áp dụng bằng cách sử dụng hàm tạo chuỗi của đối tượng Sản phẩm, khi chúng được xác định và áp dụng trong đối tượng Sản phẩm. Với một chút tinh chỉnh nữa, chúng ta có thể đạt được sự kế thừa.

2.

iVxMTwdWkE5H9tfzv-8xCm84IDJOruqEmGXS

Trong đoạn mã trên, chúng tôi đã định nghĩa một chức năng gọi là ngủ. Nó bao gồm một mảng trả lời bao gồm các phần tử giải quyết các thuộc tính bằng cách sử dụng cái này từ khóa. Chúng được định nghĩa trong một đối tượng riêng biệt bên ngoài chức năng.

Hàm ngủ được gọi với đối tượng đối tượng như một lý lẽ. Như chúng ta có thể thấy, các thuộc tính của đối tượng được thiết lập trong loài vật này this.sleepDuration, tương ứng, và chúng tôi nhận được câu đầy đủ như đầu ra.

Ràng buộc➰

DITA8UeL2muluoiEjqmiYAnHO9mWDYqIEr0G
Ảnh của Michael Held trên Bapt

Các trói buộc() phương thức tạo ra một chức năng mới, khi được gọi, nó có this từ khóa được đặt thành giá trị được cung cấp, với một chuỗi đối số nhất định trước bất kỳ đối số nào được cung cấp khi hàm mới được gọi. — MDN

cú pháp

CEVBSady5dOht7k7f-qex5gsTijBcqVQXobA

Trở lại

Trói buộc trả về một bản sao của chức năng với cung cấp cái này và các lập luận.

Đọc thêm  Trường hợp chuyển đổi JavaScript – Ví dụ về câu lệnh chuyển đổi JS

Sự miêu tả

Các trói buộc chức năng rất giống với cuộc gọi chức năng, với sự khác biệt chính là liên kết đó trả về một chức năng mới trong khi cuộc gọi thì không.

Theo thông số kỹ thuật của ECMAScript 5, hàm được trả về bởi trói buộc là một loại đối tượng chức năng kỳ lạ đặc biệt (như họ gọi nó) được gọi là chức năng giới hạn (BF). BF bao bọc đối tượng chức năng ban đầu. Gọi BF chạy chức năng được bao bọc trong đó.

ví dụ

1.

wxd-80Uzp6j4LGZ7nOnzt6jBrJJD2-g6MpFq
Ví dụ lấy từ MDN

Trong đoạn mã trên, chúng ta đã định nghĩa một biến x và một đối tượng có tên là module. Nó cũng chứa một thuộc tính gọi là x và một thuộc tính khác có giá trị tương ứng là một hàm trả về giá trị của x.

Khi chức năng getX được gọi là nó trả về các giá trị của x được định nghĩa bên trong đối tượng chứ không phải x trong phạm vi toàn cầu.

Một biến khác được khai báo trong phạm vi toàn cầu gọi getX chức năng từ mô-đun vật. Nhưng vì biến nằm trong phạm vi toàn cục nên cái này bên trong getX điểm đến toàn cầu x và do đó 9 được trả lại.

Một biến khác được xác định gọi hàm trước đó nhưng lần này liên kết hàm đã nói với mô-đun vật. Liên kết này trả về giá trị của x bên trong đối tượng. Do sự ràng buộc, các cái này trong hàm trỏ đến giá trị của x trong đối tượng chứ không phải toàn cầu x. Do đó, chúng tôi nhận được 81 là đầu ra

Phần kết luận

Bây giờ chúng ta đã tìm hiểu những điều cơ bản về các phương thức, bạn có thể vẫn còn một chút bối rối về lý do tại sao có 3 chức năng khác nhau thực hiện gần như cùng một việc. Để làm rõ khái niệm này, bạn phải thực hành với các tình huống và kịch bản khác nhau để bạn có thể tìm hiểu kỹ hơn về vị trí và cách chúng có thể được sử dụng. Họ chắc chắn sẽ làm cho mã của bạn sạch hơn và mạnh mẽ hơn.

Nếu bạn thích bài viết này, xin vui lòng vỗ tay? và làm theo? để biết thêm.

ueu4IJwqszzZov80yvEMaZi9e4RPClhf6sjx
Google



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status