Arrow Function và This

Với Arrow Function là một tính năng mới của JavaScript được giới thiệu trong phiên bản ES6 (ECMAScript 2015), giúp tạo ra các hàm ngắn gọn và đơn giản hơn bằng cú pháp ngắn hơn so với các hàm thông thường. Nó cũng giúp cho việc xác định giá trị của this trong các hàm trở nên đơn giản và dễ hiểu hơn.

Trong bài viết này, chúng ta sẽ cùng tìm hiểu về Arrow Function và cách sử dụng nó để tạo ra các hàm mạnh mẽ và dễ đọc hơn. Ngoài ra, chúng ta cũng sẽ tìm hiểu về cách hoạt động của this trong Arrow Function, giúp cho việc sử dụng this trở nên dễ dàng và chính xác hơn. Nếu bạn đang muốn tìm hiểu về Arrow Function và sử dụng this trong JavaScript, thì bài viết này chắc chắn sẽ hữu ích cho bạn.

I. Arrow Function là gì và tại sao nó hữu ích trong lập trình JavaScript?

Arrow Function là một cú pháp mới được giới thiệu trong ES6 (ECMAScript 6), giúp viết hàm một cách ngắn gọn và dễ đọc hơn. Cú pháp của Arrow Function sử dụng ký tự mũi tên (=>) để khai báo và trả về giá trị của hàm.

Ví dụ: 

				
					// Hàm thông thường
function multiply(a, b) {
  return a * b;
}

// Arrow Function tương đương
const multiply = (a, b) => a * b;

				
			

Arrow Function có nhiều ưu điểm, như

  • Cú pháp ngắn gọn, giúp code dễ đọc hơn.
  • Tự động gán giá trị của this từ scope bên ngoài vào hàm, giúp giảm thiểu sự nhầm lẫn và tránh việc sử dụng .bind() hoặc .call() để gán giá trị của this.

II. This trong Arrow Function

Trong JavaScript, giá trị của this thường được xác định bởi cách mà một hàm được gọi. Và đối với Arrow Function, giá trị của this sẽ được lấy từ scope bên ngoài của hàm, thay vì được gán giá trị mới như trong hàm thông thường.

Ví dụ: 

				
					const person = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  },
  sayHelloArrow: () => {
    console.log(`Hello, my name is ${this.name}`);
  }
}

person.sayHello(); // Output: "Hello, my name is John"
person.sayHelloArrow(); // Output: "Hello, my name is undefined"

				
			

Ở ví dụ trên, hàm sayHello sử dụng cách định nghĩa hàm thông thường và giá trị của this được gán bởi đối tượng person, trong khi đó hàm sayHelloArrow sử dụng Arrow Function và giá trị của this sẽ được lấy từ scope bên ngoài của hàm, là giá trị của window, nên kết quả trả về là undefined.

Với Arrow Function, việc sử dụng this cần phải được chú ý và hiểu rõ, đặc biệt là khi làm việc với các đối tượng và các hàm có sử dụng this.

III. Kết luận và bài viết có liên quan

Với Arrow Function, chúng ta có thể viết các hàm ngắn gọn và dễ đọc hơn, đồng thời tránh được sự nhầm lẫn trong việc xác định giá trị của this. Tuy nhiên, để sử dụng Arrow Function hiệu quả, chúng ta cần phải hiểu rõ về cú pháp và cách hoạt động của nó.
Hy vọng bài viết này đã giúp bạn hiểu thêm về Arrow Function và cách sử dụng this trong JavaScript. Nếu bạn có bất kỳ thắc mắc hay ý kiến gì về chủ đề này, hãy để lại comment để chúng ta có thể trao đổi và học hỏi thêm. Cảm ơn bạn đã đọc bài viết này!

Leave a Reply

Your email address will not be published. Required fields are marked *