Hàm arrow trong JavaScript

Hàm bắn tên được giới thiệu trong ES6.

Hàm bắn tên cho phép chúng ta viết các hàm ngắn hơn:

Cú pháp

let myFunction = (a, b) => a * b;

Thử ngay

Trước đó:

hello = function() {
  return "Hello World!";
}

Thử ngay

Sau khi sử dụng hàm bắn tên:

hello = () => {
  return "Hello World!";
}

Thử ngay

thực sự đã ngắn gọn hơn! Nếu hàm chỉ có một câu lệnh và câu lệnh đó trả về một giá trị, bạn có thể bỏ qua dấu ngoặc và return Từ khóa:

Giá trị trả về mặc định của hàm bắn tên:

hello = () => "Hello World!";

Thử ngay

Chú thích:Điều này chỉ có hiệu lực khi hàm chỉ có một câu lệnh.

Nếu bạn có tham số, hãy truyền chúng vào dấu ngoặc:

Hàm bắn tên có tham số:

hello = (val) => "Hello " + val;

Thử ngay

Thực tế, nếu chỉ có một tham số, bạn cũng có thể bỏ qua dấu ngoặc:

Hàm bắn tên không có dấu ngoặc кругл:

hello = val => "Hello " + val;

Thử ngay

this làm thế nào?

So với hàm thông thường, hàm bắn tên đối với this Xử lý cũng khác nhau.

Nói ngắn gọn, sử dụng hàm bắn tên không có xử lý nào khác. this sự gán trị.

Trong hàm thông thường, từ khóa this biểu thị đối tượng gọi hàm, có thể là cửa sổ, tài liệu, nút hoặc bất kỳ thứ gì khác.

Đối với hàm bắn tên,this Từ khóa luôn biểu thị đối tượng định nghĩa hàm bắn tên.

Hãy cùng xem hai ví dụ để hiểu rõ hơn về sự khác biệt.

Cả hai ví dụ này đều gọi phương pháp hai lần, lần đầu tiên là khi trang được tải, lần thứ hai là khi người dùng nhấn nút.

Ví dụ đầu tiên sử dụng hàm thông thường, ví dụ thứ hai sử dụng hàm bắn tên.

Kết quả hiển thị rằng ví dụ đầu tiên trả về hai đối tượng khác nhau (window và button), ví dụ thứ hai trả về hai lần đối tượng window, vì đối tượng window là chủ sở hữu của hàm.

mẫu

Đối với hàm thông thường, từ khóa this biểu thị đối tượng gọi hàm:

// hàm thông thường:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}
// Gọi hàm này bằng đối tượng window:
window.addEventListener("load", hello);
// Gọi hàm này bằng đối tượng button:
document.getElementById("btn").addEventListener("click", hello);

Thử ngay

mẫu

dùng hàm bắn tên this Biểu thị chủ sở hữu hàm:

// Hàm mũi tên:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}
// Gọi hàm này bằng đối tượng window:
window.addEventListener("load", hello);
// Gọi hàm này bằng đối tượng button:
document.getElementById("btn").addEventListener("click", hello);

Thử ngay

Hãy nhớ những khác biệt này khi sử dụng hàm. Đôi khi, hành vi của hàm thông thường chính là điều bạn muốn, nếu không, hãy sử dụng hàm mũi tên.

Hỗ trợ trình duyệt

Bảng dưới đây liệt kê các phiên bản trình duyệt hỗ trợ hoàn toàn các hàm mũi tên JavaScript đầu tiên:

Chrome IE Firefox Safari Opera
Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
Tháng 9 năm 2015 Tháng 7 năm 2015 Tháng 5 năm 2013 Tháng 9 năm 2016 Tháng 9 năm 2015