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
- myFunction is name of function
- 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ốngVớ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[];
1Bê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- Thường gọi hàm kiểu thông thường.
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ặtfunction 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[];
- method method name.
2 sẽ tương đương với đối tượng sở hữu phương thức đó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[];
- Constructor type.
2 sẽ tương đương với các đối tượng mới được tạo rafunction 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[];
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ượngTuy 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 undefinedKế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 onBạ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[];
01Ví 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ỗiVí 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é ^^
- 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
- 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