React ES6 Arrow Functions là gì?

Ví dụ

Trước:

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

Tự mình thử »

Ví dụ

Với chức năng mũi tên:

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

Ví dụ

Arrow Function Giá trị trả về 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.

Ví dụ

Chức năng 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:

Ví dụ

Arrow Function không có dấu ngoặc đơn:

hello = val => "Hello " + val;

Vậy hàm this là gì?

Việc xử lý thiscác Arrow Function cũng khác với các hàm thông thường.

Nói tóm lại, với các chức năng mũi tên, không có ràng buộc nào về this.

Trong các chức năng thông thường, thistừ khóa đại diện cho đối tượng được gọi là chức năng, có thể là cửa sổ, tài liệu, nút hoặc bất kỳ thứ gì.

Với các chức năng mũi tên, thistừ khóa luôn đại diện cho đối tượng đã xác định chức năng 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 tải trang 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 Arrow Function.

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) và ví dụ thứ hai trả về đối tượng Tiêu đề hai lần.

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);

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 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 Arrow Function.

>>>>Tìm hiểu thêm: Khóa học lập trình react