Hàm mũi tên JavaScript là gì?

Trong bài viết này, bạn sẽ tìm hiểu mọi thứ về JavaScript Arrow Functions. Các hàm mũi tên chúng tôi sử dụng để làm cho mã ngắn gọn hơn và có rất nhiều biến thể mà bạn có thể viết.

Javascript là một ngôn ngữ rất nặng về chức năng . Hàm trong javascript là một trong những khái niệm có giá trị nhất. Chúng tôi viết các chức năng, chúng tôi chuyển các chức năng, gọi lại và mã đồng bộ hóa mà chúng tôi có các chức năng. Nó chỉ là một phần cơ bản của JavaScript.

Từ lâu chúng ta đã viết từ khóa hàm để viết một hàm trong javascript. Dưới đây là một số ví dụ về hàm trong JavaScript. Bạn có thể thấy chúng tôi đang sử dụng một từ khóa chức năng ở đây.

(function () {
   //...
});

Không thể truy cập chức năng ẩn danh sau khi tạo lần đầu. Do đó, bạn thường cần gán nó cho một biến.

Ví dụ: phần sau hiển thị một chức năng ẩn danh hiển thị thông báo:

let show = function() {
    console.log('Anonymous function');
};

show();

Bởi vì chúng ta cần gọi hàm ẩn danh sau này, chúng ta gán hàm ẩn danh cho show biến.

Vì toàn bộ việc gán hàm ẩn danh cho biến show tạo thành một biểu thức hợp lệ, nên bạn không cần phải bao hàm ẩn danh bên trong dấu ngoặc đơn ().

Trong thực tế, bạn thường chuyển các hàm ẩn danh làm đối số cho các hàm khác. Ví dụ:

setTimeout(function() {
    console.log('Execute later after 1 second')
}, 1000);

Lưu ý rằng các chức năng là công dân hạng nhất trong JavaScript. Do đó, bạn có thể chuyển một hàm cho một hàm khác làm đối số.

Ở đây bạn có thể thấy mỗi khi chúng ta cần viết từ khóa hàm và định nghĩa hàm. Nhưng đây là lúc Chức năng Mũi tên xuất hiện. ES6 đã giới thiệu các biểu thức hàm mũi tên cung cấp cách viết tắt để khai báo các hàm ẩn danh. Một biểu thức hàm mũi tên là một thay thế nhỏ gọn cho một biểu thức hàm truyền thống , với một số khác biệt về ngữ nghĩa và những hạn chế có chủ ý trong việc sử dụng

Thông thường, các hàm Mũi tên ngắn hơn và đôi khi chúng hoạt động khác khi so sánh với các hàm javascript truyền thống.

Chức năng Mũi tên không được hỗ trợ cho Internet Explore .

Chúng tôi đang sử dụng các ký hiệu '= và >' khi chúng tôi xác định hàm mũi tên. Nó trông giống như một mũi tên, đó là lý do tại sao chúng tôi gọi các chức năng đó là chức năng mũi tên.

let show = () => console.log('Anonymous function');

Chúng ta có thể viết hàm bình thường dưới dạng hàm mũi tên như thế này.

let add = function (a, b) { // Normal Fucntion
    return a + b;
};
let add = (a, b) => a + b;  // Arrow Fucntion

• Nếu bạn có 2 đối số, bạn có thể sử dụng dấu ngoặc đơn như một hàm bình thường:

let add = function (a, b) { // Normal Fucntion
    return a + b;
};



let add = (a, b) => a + b;  // Arrow Fucntion

let square = function(x){ // Normal Fucntion
    return x * x;
}


let square = (x) => { // Arrow fucntion with parenthesis
    return x * x;
}

let square = x => { // You can modify it as like this
    return x * x;
}

let square = x => (  // Furthermore you can modify by removing return keyword
     x * x   // Replace {} with  ()
);

let square = x => x * x; // Furthermore you can modify

let test  = () => console.log('No Arguments');

Để loại bỏ vấn đề này, chúng ta cần đặt nó trong dấu ngoặc đơn .

Bây giờ javascript biết rằng đó là một giá trị trả về và nó không chỉ là một dấu ngoặc nhọn cho thân hàm.

Các hàm mũi tên không có ràng buộc riêng với this, arguments, hoặc supervà không được sử dụng làm phương thức

• Các biểu thức hàm mũi tên chỉ nên được sử dụng cho các hàm không có phương thức vì chúng không có tệp this.

const person ={
    name: "Kasun",
    action: function(){
        console.log(this.name, "says Hi");
    }
}

person.action();

Tôi đang gọi hành động trên một đối tượng người và giá trị của tên sẽ trả về cùng với chuỗi được nối. Bây giờ, hãy sử dụng các chức năng mũi tên thay vì các chức năng thông thường.

const person ={
    name: "Kasun",
    action: () => console.log(this.name, "says Hi")
}

person.action();

Bây giờ, chúng tôi chỉ nhận được đầu ra là “ says Hi ”. Điều gì đã xảy ra ở đây? Khi chúng ta sử dụng các chức năng mũi tên, giá trị của tên không được đặt như các chức năng bình thường hoạt động. Nó chỉ được đặt thành đối tượng cửa sổ khi chúng ta sử dụng đối tượng này trong các hàm mũi tên. Nó hoạt động giống như chức năng hành động là một chức năng độc lập.

Vì những lý do tương tự, các call()phương thức apply(), và bind()không hữu ích khi được gọi trên các hàm mũi tên, bởi vì các hàm mũi tên thiết lập thisdựa trên phạm vi mà hàm mũi tên được xác định bên trong và thisgiá trị không thay đổi dựa trên cách gọi hàm.

• Các hàm mũi tên không thể được sử dụng làm hàm tạo và sẽ gây ra lỗi khi được gọi bằng new. Họ cũng không có prototypetài sản.

const Foo = () => {};
const foo = new Foo(); // TypeError: Foo is not a constructor
console.log("prototype" in Foo); // false

Đây là tất cả về các hàm Mũi tên và tôi hy vọng bạn hiểu rõ về các hàm mũi tên. Hẹn gặp lại bạn trong một hướng dẫn khác.

Cảm ơn!