Chức năng mũi tên phản ứng ES6
Chức năng 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:
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ừ khóa return
:
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ó tham số, bạn chuyển chúng vào trong dấu ngoặc đơn:
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 ĐĂNG KÝ
Cái this
thì sao ?
Việc xử lý this
cũng khác ở các hàm mũi tên so với các hàm thông thường.
Nói tóm lại, với các hàm mũi tên không có ràng buộc nào về this
.
Trong các hàm thông thường, từ khóa this
đạ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 kỳ thứ gì.
Với các hàm mũi tên, từ khóa this
luôn đại diện cho đối tượng xác định hàm mũi tên.
Chúng ta hãy xem 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 trang tải và một lần nữa khi người dùng nhấp vào nút.
Ví dụ đầu tiên sử dụng hàm thông thường và ví dụ thứ hai sử dụng hàm mũi tên.
Kết quả cho thấy ví dụ đầu tiên trả về hai đối tượng khác nhau (cửa sổ và nút), còn ví dụ thứ hai trả về đối tượng Header hai lần.
Ví 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);
Ví dụ
Với 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 khác biệt này khi bạn 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à điều bạn muốn, nếu không, hãy sử dụng các hàm mũi tên.