Techmaster Việt Nam - Học là có việc

Các phần trước:

Ở phần đầu của series chúng ta đã tìm hiểu một nội dung như, function không có tham số, function có tham số, function gọi chính nó... phần tiếp theo của series chúng ta tiếp tục tìm hiểu các nội dung tiếp theo sau dưới đây:

Immediately Invoked Function Expression (được gọi là IIFE)

IIFE (Immediately Invoked Function Expression) là một loại Function của JavaScript nó sẽ chạy ngay khi được định nghĩa

Bây giờ chúng ta hãy hiểu về IIFE và nó sẽ giải quyết được những vấn đề gì.

Trước tiên hãy xem anonymous function là gì.

Một anonymous function là một function không có một cái tên nào. Ví dụ:

function () {
  let message = "I don't have a name";
  console.log(message);
}

Nếu function không có một cái tên, làm thế nào bạn có thể gọi nó?

Câu trả lời là không thể, trừ khi nó là callback function được đảm nhiệm như là một phần của tham số truyền vào một function nào đó.

Bây giờ hãy xem anonymous function được thực thi như thế nào:

(function () {
   let message = "I don't have a name";
   console.log(message);
})();

Bao quanh toàn bộ function bằng dấu ngoặc đơn (điều này làm cho nó trở thành một biểu thức) và gọi nó bằng cách sử dụng một cặp dấu ngoặc đơn đóng mở ().

Điều tuyệt vời của IIFE là nó chỉ có thể được gọi một lần

IIFE được sử dụng ở đâu?

Nó có thể được sử dụng ở trong những kịch bản nơi mà bạn cần function chạy chỉ một lần, như nạp một số dữ liệu ban đầu, cài đặt cấu hình một số giá trị, kiểm tra trạng thái khởi động của hệ thống...

Object và Function (call, apply and bind)

Chúng ta hãy xem các object và các Function cùng tồn tại với nhau như thế nào. Mỗi function có thể sử dụng 3 phương thức sau đây:

call
apply
bind

Chúng ta hãy sử dụng các phương thức phía trên với một ví dụ. Hãy xem cách hoạt động của đối tượng sau đây:

let user = {
  userName: "haophan",
  displayName: "HaoPhan",
  sendMessage: function (message) {
    console.log(`Sending ${message} to ${this.displayName}`);
  }
}
let student = {
  displayName: "rohan"
}

Đoạn mã phía trên tạo ra hai biến đại diện cho user và student object. Người đọc tính ý có thể thấy được object user có thêm một số thuộc tính và phương thức trong khi object student thì chỉ có một thuộc tính.

Chúng ta hãy xem làm thế nào để gửi một thông điệp cho user. Nó rất dễ dàng như đoạn mã dưới đây.

user.sendMessage("Hello...");

Và thông điệp "Sending Hello... to HaoPhan" sẽ được log ra màn hình console.

Lưu ý rằng "this" trong function sendMessage() tham chiếu tới object của function được gọi, trong trường hợp này là đối tượng user.

Bây giờ, làm thế nào bạn có thể gọi sendMessage() trên đối tượng student (một kịch bản lạ nhưng rất hữu ích trong thực tế).

Đây là nơi call, apply và bind đi vào hoạt động.

Sử dụng phương thức call() để gọi phương thức trên đối tượng khác

user.sendMessage.call(student, “Hello from HaoPhan”);

Tham số đầu tiên của phương thức call là một new context(ngữ cảnh mới), ở trường hợp này là student và những tham số tiếp theo là . các đối số cho sendMessage trong trường hợp này là đoạn text "Hello from HaoPhan";

Nó sẽ in ra "Hello from HaoPhan to rohan". Trong phương thức sendMessage, this sẽ trỏ đến đối tượng student thay vì đối tượng user.

Sử dụng phương thức apply() để gọi phương thức trên đối tượng khác

user.sendMessage.apply(student, [“Hello from HaoPhan”]);

Tham số đầu tiên của phương thức apply là new context, trong trường hợp này là student, và các tham số tiếp theo là các đối số của sendMessage trong trường hợp này là đoạn text "Hello from HaoPhan".

Trong phương thức apply() các đối số truyền vào như một mảng. Đây là điều khác biệt giữa call() và apply()

Kết quả được in ra màn hình console là Sending Hello from HaoPhan to rohan

Sử dụng phương thức Bind()

Phương thức bind() trả về một phương thức với ngữ cảnh mới. Ví dụ, hãy tạo một biến mới trỏ đến phương thức sendMessage() nhưng với ngữ cảnh mới.

let sendMessageToStudent = user.sendMessage.bind(student);

Đoạn mã trên sẽ tạo một biến mới sendMessageToStudent thực ra nó là function chúng ta có thể gọi nó. Nhưng this ở đây sẽ trỏ đến đối tượng student chứ không phải đối tượng use.

Bạn gọi function ở trên theo đoạn code sau đây:

sendMessageToStudent("Yet another message");

Output là đoạn text ‘Sending Yet another message.. to rohan”.

Qua những ví dụ trên, hi vọng mọi người có thể hiểu rõ ràng về bind(), call() và apply().

Ở phần tiếp theo chúng ta sẽ tìm hiểu về Constructor Function, closure trong function

Bài viết được dịch từ codeburst.io

Đăng ký thực tập Web front-end tại: http://bit.ly/2GTgkky

Tất cả về Function - JavaScript (p2)