Chức năng thẻ javascript

Arrow Function JavaScript là một trong những tính năng được giới thiệu trong phiên bản JavaScript ES6. Nó cho phép chúng ta tạo ra các chức năng một cách gọn gàng hơn so với các chức năng thông thường. Cùng tìm hiểu về nó thông qua bài viết này nhé

Hàm mũi tên JavaScript

Để hiểu rõ hơn về JavaScript Arrow Function mình sẽ tạo một ví dụ như sau

Ở trên là một biểu thức hàm chúng ta thường tạo. It could not be write back as after

Các bạn thấy khi sử dụng arrow function thì code của chúng ta trở nên rất ngắn gọn đúng không 😁. Bây giờ chúng ta cùng tìm hiểu về cú pháp của arrow function nhé

Cú pháp hàm mũi tên

Cú pháp của Arrow Function as after

in which

1. myFunction is name of function
2. arg1, arg2,. argN is các đối số của hàm

Nếu thân hàm chỉ có một câu lệnh hoặc biểu thức, chúng ta có thể viết gọn lại như sau

Ví dụ Chức năng mũi tên

Nếu hàm không nhận được bất kỳ đối số nào, thì chúng ta sử dụng dấu trích đơn

function Person() {
    this.name = 'Trinh',
    this.age = 22,
    this.sayMyName = function () {

        console.log(this.name);
        let innerFunc = () => {
            console.log(this.name);
        }

        innerFunc();
    }
}

const x = new Person();
x.sayMyName();

0 trống

Với hàm có 1 đối số thì ta có thể viết gọn như sau

let greet = x => console.log(x);
greet('Xin chào! đây là blog homiedev.com');

Như các bạn đã thấy, chúng ta có thể bỏ qua các đơn đặt hàng như ở trên khi hàm có 1 đối số

Chúng ta có thể sử dụng Arrow Function trong một biểu thức

Nếu thân hàm có nhiều câu lệnh, chúng ta cần đặt chúng bên trong dấu ngoặc kép

function Person() {
    this.name = 'Trinh',
    this.age = 22,
    this.sayMyName = function () {

        console.log(this.name);
        let innerFunc = () => {
            console.log(this.name);
        }

        innerFunc();
    }
}

const x = new Person();
x.sayMyName();

1

Bên trong một hàm thông thường, từ khóa

function Person() {
    this.name = 'Trinh',
    this.age = 22,
    this.sayMyName = function () {

        console.log(this.name);
        let innerFunc = () => {
            console.log(this.name);
        }

        innerFunc();
    }
}

const x = new Person();
x.sayMyName();

2 sẽ thay đổi theo cách mà hàm đó được gọi

1. Thường gọi hàm kiểu thông thường.

   function Person() {
       this.name = 'Trinh',
       this.age = 22,
       this.sayMyName = function () {
   
           console.log(this.name);
           let innerFunc = () => {
               console.log(this.name);
           }
   
           innerFunc();
       }
   }
   
   const x = new Person();
   x.sayMyName();

   2 sẽ là đối tượng toàn cầu hoặc có thể không xác định nếu bạn đang sử dụng chế độ nghiêm ngặt
2. method method name.

   function Person() {
       this.name = 'Trinh',
       this.age = 22,
       this.sayMyName = function () {
   
           console.log(this.name);
           let innerFunc = () => {
               console.log(this.name);
           }
   
           innerFunc();
       }
   }
   
   const x = new Person();
   x.sayMyName();

   2 sẽ tương đương với đối tượng sở hữu phương thức đó
3. Constructor type.

   function Person() {
       this.name = 'Trinh',
       this.age = 22,
       this.sayMyName = function () {
   
           console.log(this.name);
           let innerFunc = () => {
               console.log(this.name);
           }
   
           innerFunc();
       }
   }
   
   const x = new Person();
   x.sayMyName();

   2 sẽ tương đương với các đối tượng mới được tạo ra

Tuy nhiên, điều này lại không giống với Arrow Function. Bất kể khi nào chúng ta sử dụng

function Person() {
    this.name = 'Trinh',
    this.age = 22,
    this.sayMyName = function () {

        console.log(this.name);
        let innerFunc = () => {
            console.log(this.name);
        }

        innerFunc();
    }
}

const x = new Person();
x.sayMyName();

2 trong Arrow Function, nó đề cập đến phạm vi bên ngoài, bao gồm nó (phạm vi chính). Giá trị

function Person() {
    this.name = 'Trinh',
    this.age = 22,
    this.sayMyName = function () {

        console.log(this.name);
        let innerFunc = () => {
            console.log(this.name);
        }

        innerFunc();
    }
}

const x = new Person();
x.sayMyName();

2 bên trong của một Hàm mũi tên luôn bằng với giá trị

function Person() {
    this.name = 'Trinh',
    this.age = 22,
    this.sayMyName = function () {

        console.log(this.name);
        let innerFunc = () => {
            console.log(this.name);
        }

        innerFunc();
    }
}

const x = new Person();
x.sayMyName();

2 của hàm chứa nó

Đối chiếu với thông thường hàm

Ở ví dụ trên,

function Person() {
    this.name = 'Trinh',
    this.age = 22,
    this.sayMyName = function () {

        console.log(this.name);
        let innerFunc = () => {
            console.log(this.name);
        }

        innerFunc();
    }
}

const x = new Person();
x.sayMyName();

1 bên trong

function Person() {
    this.name = 'Trinh',
    this.age = 22,
    this.sayMyName = function () {

        console.log(this.name);
        let innerFunc = () => {
            console.log(this.name);
        }

        innerFunc();
    }
}

const x = new Person();
x.sayMyName();

2 có thể truy xuất được vì

function Person() {
    this.name = 'Trinh',
    this.age = 22,
    this.sayMyName = function () {

        console.log(this.name);
        let innerFunc = () => {
            console.log(this.name);
        }

        innerFunc();
    }
}

const x = new Person();
x.sayMyName();

2 là phương thức của một đối tượng

Tuy nhiên,

function Person() {
    this.name = 'Trinh',
    this.age = 22,
    this.sayMyName = function () {

        console.log(this.name);
        let innerFunc = () => {
            console.log(this.name);
        }

        innerFunc();
    }
}

const x = new Person();
x.sayMyName();

4 là một hàm thông thường cho nên

function Person() {
    this.name = 'Trinh',
    this.age = 22,
    this.sayMyName = function () {

        console.log(this.name);
        let innerFunc = () => {
            console.log(this.name);
        }

        innerFunc();
    }
}

const x = new Person();
x.sayMyName();

1 sẽ không thể truy xuất được vì lúc này

function Person() {
    this.name = 'Trinh',
    this.age = 22,
    this.sayMyName = function () {

        console.log(this.name);
        let innerFunc = () => {
            console.log(this.name);
        }

        innerFunc();
    }
}

const x = new Person();
x.sayMyName();

2 là đối tượng toàn cục (Đối tượng cửa sổ). Do that,

function Person() {
    this.name = 'Trinh',
    this.age = 22,
    this.sayMyName = function () {

        console.log(this.name);
        let innerFunc = () => {
            console.log(this.name);
        }

        innerFunc();
    }
}

const x = new Person();
x.sayMyName();

1 side in the function

function Person() {
    this.name = 'Trinh',
    this.age = 22,
    this.sayMyName = function () {

        console.log(this.name);
        let innerFunc = () => {
            console.log(this.name);
        }

        innerFunc();
    }
}

const x = new Person();
x.sayMyName();

4 for value undefined

Kết quả của ví dụ trên sẽ là

Đối với Arrow Function sẽ có một chút khác biệt như sau

function Person() {
    this.name = 'Trinh',
    this.age = 22,
    this.sayMyName = function () {

        console.log(this.name);
        let innerFunc = () => {
            console.log(this.name);
        }

        innerFunc();
    }
}

const x = new Person();
x.sayMyName();

Kết quả sẽ là

At ví dụ trên, hàm

function Person() {
    this.name = 'Trinh',
    this.age = 22,
    this.sayMyName = function () {

        console.log(this.name);
        let innerFunc = () => {
            console.log(this.name);
        }

        innerFunc();
    }
}

const x = new Person();
x.sayMyName();

4 được định nghĩa bằng cách sử dụng Arrow Function. Và bên trong hàm,

function Person() {
    this.name = 'Trinh',
    this.age = 22,
    this.sayMyName = function () {

        console.log(this.name);
        let innerFunc = () => {
            console.log(this.name);
        }

        innerFunc();
    }
}

const x = new Person();
x.sayMyName();

2 sẽ trỏ đến phạm vi bên ngoài chứa nó. Làm đó, cái này. name for results as on

Bạn có thể đọc thêm các bài viết liên quan đến phạm vi nhé

Ràng buộc đối số

Các hàm thông thường có ràng buộc đối số (đối số ràng buộc). Đây chính là lý do tại sao khi chúng ta truyền các đối số cho một hàm thông thường, thì chúng ta có thể truy cập chúng bằng cách sử dụng từ khóa

function Person() {
    this.name = 'Trinh',
    this.age = 22,
    this.sayMyName = function () {

        console.log(this.name);
        let innerFunc = () => {
            console.log(this.name);
        }

        innerFunc();
    }
}

const x = new Person();
x.sayMyName();

01

Ví dụ

Reverse, with Arrow Function will not have Arguments Binding

Khi chúng tôi thử sử dụng từ khóa

function Person() {
    this.name = 'Trinh',
    this.age = 22,
    this.sayMyName = function () {

        console.log(this.name);
        let innerFunc = () => {
            console.log(this.name);
        }

        innerFunc();
    }
}

const x = new Person();
x.sayMyName();

01, nó sẽ thông báo lỗi

Ví dụ

Khi sử dụng Hàm mũi tên, bạn muốn lấy các đối số đã truyền dưới dạng một mảng thì chúng ta sẽ sử dụng cú pháp trải rộng như sau

Bài viết liên quan đến cú pháp lan truyền các bạn có thể tham khảo tại

Promises và Callbacks sử dụng Arrow Function

Chúng ta có thể viết các Promise và Callback trong JavaScript bằng cách sử dụng Arrow Function vì cú pháp của nó được rút gọn hơn

Ví dụ

Ví dụ trên chúng ta có thể viết như sau

Các bạn có thể thấy mã đã thu gọn hơn nhiều rồi đúng không ^^

Trường hợp tránh sử dụng Arrow Functions

Trong trường hợp dưới đây chúng ta nên tránh sử dụng Arrow Function nhé ^^

1. Không nên sử dụng Arrow Functions để tạo các phương thức bên trong các đối tượng

1. Chúng ta không thể sử dụng Arrow Functions làm constructor

---

Như vậy là chúng ta đã tìm hiểu xong Arrow Function trong JavaScript. Hi vọng bài viết có ích cho các bạn

Nếu có thắc mắc hay góp ý thì chúng ta cùng nhau thảo luận bên dưới phần bình luận của bài viết nhé 😁. Chúc các bạn học tốt