--> ForSharing.Info, [Keep Better In The Life] | [ForSharing
picture

Blog

Khi nào và tại sao bạn nên sử dụng Arrow Functions trong ES6. Và không nên dùng khi nào?



Arrow function chắc chắn là một trong những tính năng phổ biến hơn của ES6. Đã được giới thiệu là cách để viết function một cách gắn gọn.

Ex: 1 function được viết trên ES5

function timesTwo(params) {

  return params * 2

}

timesTwo(4);  // 8

Và đây là một arrow function:

var hello = params => params*2

hello(4); // 8

Bạn có thể thấy, function được viết gắn gọn hơn rất nhiều. Chúng ta đã bỏ qua được các dấu ngoặc nhọn.  Điều quan trọng bạn phải hiểu là chức năng của arrow function hoạt động khác so với function ES5 thông thường.

Variations

Một điều bạn sẽ nhanh chóng nhận thấy là sự đa dạng của các cú pháp có sẵn trong các arrow  functions. Hãy xem qua một số thông tin phổ biến sau:

1. No parameters

Nếu không có tham số, bạn có thể đặt dấu ngoặc đơn trống trước =>.

() => 25

Trong thực tế, bạn thậm chí không cần các dấu ngoặc đơn!

_ => 25

2. Single parameter

Với các hàm này, dấu ngoặc đơn là tùy chọn:

x=> 25 || (x) => 25

3. Multiple parameters

Các dấu ngoặc đơn được yêu cầu cho các hàm này:

(x,y) => 25

4. Statements (as opposed to expressions)

Trong dạng cơ bản nhất của nó, một biểu thức hàm tạo ra một giá trị, trong khi một câu lệnh hàm thực hiện một hành động.

Với arrow function, điều quan trọng cần nhớ là các câu lệnh cần có các dấu ngoặc nhọn. Khi có các dấu ngoặc nhọn, bạn luôn cần phải viết trả lại.

Example:

var feedTheCat = (cat) => {

  if (cat === 'hungry') {

    return 'Feed the cat';

  } else {

    return 'Do not feed the cat';

  }

}

5. “Block body”

Nếu hàm của bạn nằm trong một khối, bạn cũng phải sử dụng câu lệnh return rõ ràng:

var addValues = (x, y) => {

  return x + y

}

6. Object literals

Nếu bạn đang trả về một đối tượng theo nghĩa đen, nó cần phải được bọc trong dấu ngoặc đơn. Điều này buộc trình thông dịch đánh giá nội dung bên trong dấu ngoặc đơn và đối tượng được trả về.

x =>({ y: x })

Syntactically anonymous

Điều quan trọng cần lưu ý là các arrow functions là vô danh, có nghĩa là chúng không được đặt tên.

Ẩn danh này tạo ra một số vấn đề:

1. Harder to debug

Khi bạn gặp lỗi, bạn sẽ không thể theo dõi tên của hàm hoặc số dòng chính xác nơi nó xảy ra.

2. No self-referencing

Nếu hàm của bạn cần có tham chiếu tự tại bất kỳ thời điểm nào (ví dụ: đệ quy, trình xử lý sự kiện cần hủy liên kết), hàm sẽ không hoạt động.

Main benefit: No binding of ‘this’

rong các biểu thức hàm cổ điển, từ khóa “this” được ràng buộc với các giá trị khác nhau dựa trên ngữ cảnh mà nó được gọi. Tuy nhiên, với các arrow functions, điều này bị ràng buộc từ từ. Khi được sử dụng “this” sẽ đại diện cho đoạn code chứa arrow function.

Ví dụ, hãy xem hàm setTimeout bên dưới:

// ES5

var obj = {

  id: 42,

  counter: function counter() {

    setTimeout(function() {

      console.log(this.id);

    }.bind(this), 1000);

  }

};

Trong ví dụ ES5, .bind (this) được yêu cầu để giúp chuyển ngữ cảnh này vào hàm. Nếu không, theo mặc định, điều này sẽ không được xác định.

// ES6

var obj = {

  id: 42,

  counter: function counter() {

    setTimeout(() => {

      console.log(this.id);

    }, 1000);

  }

};

Các hàm mũi tên ES6 không thể bị ràng buộc với từ khóa “this”, do đó, nó sẽ lexically đi lên một phạm vi, và sử dụng giá trị của điều này trong phạm vi mà nó đã được xác định.

 

Khi nào bạn không nên sử dụng Arrow functions.

Dưới đây là một số trường hợp bạn không nên sử dụng arrow functions

1. Object methods

Khi bạn gọi cat.jumps, số lượng cuộc sống không giảm. Đó là bởi vì điều này không bị ràng buộc với bất cứ điều gì, và sẽ kế thừa giá trị này từ phạm vi cha mẹ của nó.

var cat = {

  lives: 9,

  jumps: () => {

    this.lives--;

  }

}

2. Callback functions with dynamic context

var button = document.getElementById('press');

button.addEventListener('click', () => {

  this.classList.toggle('on');

});

Nếu chúng ta nhấn vào nút, chúng ta sẽ nhận được một TypeError. Đó là bởi vì điều này không bị ràng buộc với nút, nhưng thay vào đó bị ràng buộc với phạm vi cha mẹ của nó.

3. When it makes your code less readable (Khi arrow function làm cho code của bạn khó đọc)

Với các chức năng thông thường, mọi người nhìn vào sẽ biết những gì sẽ diễn ra. Với các arrow function, có thể khó hiểu khi nhìn vào.

 

Xin hết!


Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *


« »

WP2Social Auto Publish Powered By : XYZScripts.com