🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Hãy xem lại các hàm mũi tên, tiếp theo phần trước, bài này sẽ nâng cao hơn

Các hàm của mũi tên không chỉ là một tốc ký để viết những thứ nhỏ nhặt. Họ có một số tính năng rất cụ thể và hữu ích.

JavaScript chứa đầy các tình huống trong đó chúng ta cần viết một hàm nhỏ được thực thi ở một nơi khác.

Ví dụ:

  • arr.forEach(func)– funcđược thực hiện bởi forEachcho mọi mục của mảng.
  • setTimeout(func)– funcđược thực hiện bởi bộ lập lịch tích hợp.
  • …nhiều thức khác.

Đó là tinh thần của JavaScript để tạo ra một hàm và chuyển nó đi đâu đó.

Và trong các hàm như vậy, chúng ta thường không muốn rời khỏi bối cảnh hiện tại. Đó là nơi các hàm mũi tên có ích.

1. Các chức năng mũi tên không có “This”

Như chúng ta nhớ từ chương Phương thức đối tượng, “this” , các hàm mũi tên không có this. Nếu thisđược truy cập, nó được lấy từ bên ngoài.

Chẳng hạn, chúng ta có thể sử dụng nó để lặp lại bên trong một phương thức đối tượng:

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/



let group = {
  title: "Our Group",
  students: ["John", "Pete", "Alice"],

  showList() {
    this.students.forEach(
      student => alert(this.title + ': ' + student)
    );
  }
};

group.showList();

Ở đây forEach, hàm mũi tên được sử dụng, vì vậy this.titletrong nó hoàn toàn giống như trong phương thức bên ngoài showList. Đó là : group.title.

Nếu chúng ta sử dụng một hàm thường xuyên của người dùng, thì sẽ xảy ra lỗi:

let group = {
  title: "Our Group",
  students: ["John", "Pete", "Alice"],

  showList() {
    this.students.forEach(function(student) {
      // Error: Cannot read property 'title' of undefined
      alert(this.title + ': ' + student)
    });
  }
};

group.showList();

Lỗi xảy ra do forEachchạy các hàm this=undefinedtheo mặc định, do đó, nỗ lực truy cập undefined.titleđược thực hiện.

Điều đó không ảnh hưởng đến các hàm mũi tên, vì chúng không có this.

Các hàm mũi tên không thể chạy với new

Không có thistự nhiên có nghĩa là một giới hạn khác: các hàm mũi tên không thể được sử dụng như các hàm tạo.

Họ không thể được gọi với new.

Hàm mũi tên VS liên kết

Có một sự khác biệt tinh tế giữa một hàm mũi tên =>và một hàm thông thường được gọi là .bind(this):

  • .bind(this) tạo ra một phiên bản ràng buộc của người khác.
  • Mũi tên =>không tạo ra bất kỳ ràng buộc. Các hàm đơn giản là không có this. Việc tra cứu thisđược thực hiện chính xác giống như tìm kiếm biến thông thường: trong môi trường từ vựng bên ngoài.

2. Hàm Mũi tên không có đối số

Hàm mũi tên cũng không có biếnarguments.

Điều đó thật tuyệt vời cho các nhà trang trí, khi chúng ta cần chuyển tiếp một cuộc gọi với hiện tại thisvà arguments.

Chẳng hạn, defer(f, ms)lấy một hàm và trả về một trình bao bọc xung quanh nó làm trì hoãn cuộc gọi theo msmili giây:

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

function defer(f, ms) {
  return function() {
    setTimeout(() => f.apply(this, arguments), ms)
  };
}

function sayHi(who) {
  alert('Hello, ' + who);
}

let sayHiDeferred = defer(sayHi, 2000);
sayHiDeferred("John"); // Hello, John after 2 seconds

Giống như không có hàm mũi tên sẽ như sau:

function defer(f, ms) {
  return function(...args) {
    let ctx = this;
    setTimeout(function() {
      return f.apply(ctx, args);
    }, ms);
  };
}

Ở đây chúng ta phải tạo thêm các biến argsvà ctxđể hàm bên trong setTimeoutcó thể lấy chúng.

3. Tóm lược

Hàm mũi tên:

  • Không có this
  • Không có arguments
  • Không thể được gọi với new
  • Họ cũng không có super, nhưng chúng ta chưa nghiên cứu về nó. Chúng ta sẽ về chương kế thừa lớp

Đó là bởi vì chúng có nghĩa là cho các đoạn code ngắn không có bối cảnh của riêng nó, mà là hoạt động trong code hiện tại. Và họ thực sự hữu ích trong trường hợp sử dụng đó.

Full series tự học Javascript từ cơ bản tới nâng cao tại đây nha.

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM