Các hàm mũi tên React ES6
Hàm mũi tên
Hàm mũi tên cho phép chúng ta viết cú pháp hàm ngắn hơn:
Trước:
hello = function() {
return "Hello World!";
}
Với chức năng mũi tên:
hello = () => {
return "Hello World!";
}
Nó trở nên ngắ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ể xóa dấu ngoặc và từ
returnkhóa:
Hàm mũi tên Trả lại giá trị theo mặc định:
hello = () => "Hello World!";
Lưu ý: Điều này chỉ hoạt động nếu hàm chỉ có một câu lệnh.
Nếu bạn có các tham số, bạn chuyển chúng vào bên trong dấu ngoặc đơn:
Hàm mũi tên với các tham số:
hello = (val) => "Hello " + val;
Trên thực tế, nếu bạn chỉ có một tham số, bạn cũng có thể bỏ qua dấu ngoặc đơn:
Được chứng nhận!
$ 95 GHI DANH
Về thiscái gì?
Việc xử lý các thishàm mũi tên cũng khác so với các hàm thông thường.
Trong ngắn hạn, với các chức năng mũi tên không có ràng buộc của
this.
Trong các hàm thông thường, thistừ khóa đại diện cho đối tượng được gọi là hàm, có thể là cửa sổ, tài liệu, nút hoặc bất cứ thứ gì.
Với các hàm mũi tên, thistừ khóa luôn đại diện cho đối tượng đã xác định hàm mũi tên.
Chúng ta hãy xem xét hai ví dụ để hiểu sự khác biệt.
Cả hai ví dụ đều gọi một phương thức hai lần, lần đầu tiên khi tải trang và một lần nữa khi người dùng nhấp vào một nút.
Ví dụ đầu tiên sử dụng một hàm thông thường và ví dụ thứ hai sử dụng một hàm mũi tên.
Kết quả cho thấy rằng ví dụ đầu tiên trả về hai đối tượng khác nhau (cửa sổ và nút), và ví dụ thứ hai trả về đối tượng Header hai lần.
Thí dụ
Với một hàm thông thường, thisđại diện cho đối tượng được gọi là hàm:
class Header {
constructor() {
this.color = "Red";
}
//Regular function:
changeColor = function() {
document.getElementById("demo").innerHTML += this;
}
}
const myheader = new Header();
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
Thí dụ
Với một hàm mũi tên, thisđại diện cho đối tượng Header bất kể ai đã gọi hàm:
class Header {
constructor() {
this.color = "Red";
}
//Arrow function:
changeColor = () => {
document.getElementById("demo").innerHTML += this;
}
}
const myheader = new Header();
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
Hãy nhớ những điểm khác biệt này khi bạn đang làm việc với các hàm. Đôi khi hành vi của các hàm thông thường là những gì bạn muốn, nếu không, hãy sử dụng các hàm mũi tên.