Vì vậy, bài viết này sẽ giúp bạn phân biệt arrow function và function trong JavaScript. Qua đó, bạn biết cách sử dụng chúng sao cho phù hợp nhất với từng hoàn cảnh.
Nội dung chính
- 1 Giống nhau
- 2 Khác nhau cơ bản
- 2.1 Cú pháp
- 2.2 Arrow function thường ngắn gọn hơn function
- 2.3 Arrow function không bind this
- 2.4 Arrow function không bind arguments
- 2.5 Arrow function không phù hợp làm phương thức cho object
- 2.6 Arrow function không thể sử dụng làm hàm constructor
- 2.7 Arrow function không có thuộc tính prototype
- 2.8 Arrow function không được hoisted
- 3 Tổng kết
Giống nhau
Arrow function và function đều là function .
Khác nhau cơ bản
Cú pháp
Arrow function sử dụng kí tự =>:
Bạn đang đọc: Phân biệt arrow function và function trong JavaScript
let sayHi = () => {
console.log(" Hi ");
};
sayHi();
Function sử dụng từ khoá function:
let sayHi = function () {
console.log(" Hi ");
};
sayHi();
Arrow function thường ngắn gọn hơn function
Với hàm có 1 tham số, arrow function hoàn toàn có thể bỏ lỡ cặp dấu ngoặc đơn .
// Sử dụng arrow function
let greeting = name => {
console.log(`Hello, my name is ${name}`);
};
greeting("Lam");
// Hello, my name is LamTương đương với function :
let greeting = function (name) {
console.log(`Hello, my name is
USD {name}
`);
};
greeting(" Lam ");
Ngoài ra, arrow function cũng có thể bỏ qua từ khoá return.
let double = (x) => x * 2;
double(1); Tương đương với function :
let double = function (x) {
return x * 2;
};
double(1); Ví dụ sử dụng arrow function với những higher-order functions như : forEach, map, filter, …
► Sử dụng map với function:
let arr = [1, 2, 3, 4];
let square1 = arr.map(function (e) {
return e * e;
});
console.log(square1); ► Sử dụng map với arrow function:
let arr = [1, 2, 3, 4];
let square2 = arr.map((e) => e * e);
console.log(square2); Arrow function không bind this
Arrow function không định nghĩa giá trị this của riêng nó giống như function.
Ví dụ sử dụng function :
var x = 0;
function DelayPrint(x, timeout
) {
this.x = x;
setTimeout(function print() {
console.log(`The value is
USD {this.x}
.`);
}, timeout);
}
let p = new DelayPrint(1, 1000);
Trong chế độ none-strict, function print định nghĩa this chính là đối tượng global (đối với trình duyệt thì đó là window). Do đó, this.x tương đương với window.x và bằng 0.
Để đoạn code trên hoạt động giải trí theo đúng mong ước thì bạn phải sửa lại như sau :
var x = 0;
function DelayPrint(x, timeout
) {
this.x = x;
let self = this;
setTimeout(function print() {
console.log(`The value is
USD {self.x}
.`);
}, timeout);
}
let p = new DelayPrint(1, 1000);
Ví dụ sử dụng arrow function :
var x = 0;
function DelayPrint(x, timeout
) {
this.x = x;
setTimeout(() => {
console.log(`The value is
USD {this.x}
.`);
}, timeout);
}
let p = new DelayPrint(1, 1000);
Ngược lại với function, arrow function không định nghĩa lại this.
Do đó, giá trị của this sẽ ứng với ngữ cảnh gần nhất của nó. Vì vậy, trong đoạn code trên this.x tương ứng với giá trị x được truyền vào và bằng 1.
Arrow function không bind arguments
Tương tự như đối với this, arrow function cũng không định nghĩa giá trị arguments của riêng nó.
Đối tượng arguments đặc biệt hữu ích đối với những function không xác định trước số lượng tham số.
Ví dụ hàm tính tổng toàn bộ giá trị những tham số truyền vào :
function sum(
) {
return Array.from(arguments).reduce(
(accumulator, currentValue
) => accumulator + currentValue
);
}
console.log(sum(1, 2));
console.log(sum(1, 2, 3));
console.log(sum(1, 2, 3, 4)); Đối với arrow function, việc sử dụng arguments sẽ lỗi vì biến này không được định nghĩa ở arrow function.
let sum = () => {
return Array.from(arguments).reduce(
(accumulator, currentValue
) => accumulator + currentValue
);
};
console.log(sum(1, 2));
Tuy nhiên, bạn vẫn có thể sử dụng rest parameters để thay thế cho arguments.
let sum = (...args
) => {
return Array.from(args).reduce(
(accumulator, currentValue
) => accumulator + currentValue
);
};
console.log(sum(1, 2));
console.log(sum(1, 2, 3));
console.log(sum(1, 2, 3, 4)); Arrow function không phù hợp làm phương thức cho object
Chính vì arrow function không định nghĩa giá trị this của riêng nó, nên arrow function không phù hợp làm phương thức cho object.
let obj = {
a: 1,
b: () => console.log(this.a, this),
c: function () {
console.log(this.a, this);
},
};
obj.b();
obj.c(); Vì vậy, nếu muốn định nghĩa phương thức cho object thì bạn nên sử dụng function.
Arrow function không thể sử dụng làm hàm constructor
Trước khi ES6 sinh ra, bạn hoàn toàn có thể sử dụng function làm hàm khởi tạo cho object .
function Dog(name, color
) {
this.name = name;
this.color = color;
}
let myDog = new Dog(" Nick ", " White ");
console.log(myDog.name, myDog.color);
Nếu thay đoạn code trên bằng arrow function, bạn sẽ bị lỗi: TypeError: Dog is not a constructor.
let Dog = (name, color
) => {
this.name = name;
this.color = color;
};
let myDog = new Dog(" Nick ", " White ");
console.log(myDog.name, myDog.color);
Arrow function không có thuộc tính prototype
Mọi đối tượng trong JavaScript đều có thuộc tính prototype và kế thừa cũng theo prototype.
Tuy nhiên, nếu arrow function đã không hề làm constructor cho object thì điều này cũng trọn vẹn hài hòa và hợp lý .
let Foo = () => {};
console.log(Foo.prototype); Arrow function không được hoisted
Để hiểu thêm về hoisting bạn có thể tham khảo thêm tại bài viết: Understanding Hoisting in JavaScript.
Về cơ bản, hoisting được hiểu là biến và hàm được đưa lên đầu của phạm vi biến, hàm trước khi đoạn code đó được thực hiện.
Arrow function không được hoisted. Nghĩa là bạn phải định nghĩa arrow function trước khi sử dụng nó.
let myFunc1 = () => {};
myFunc1();
myFunc2();
let myFunc2 = () => {};Ngược lại, function declaration được hoisted nên bạn có thể gọi hàm trước khi định nghĩa nó.
myFunc();
function myFunc() {
}Tổng kết
Trên đây là một số ít điểm giúp bạn phân biệt arrow function và function trong JavaScript. Để tiện theo dõi, mình tóm tắt lại những đặc thù khác nhau của chúng như sau :
- Cú pháp
- Arrow function thường ngắn gọn hơn function
- Arrow function không bind
this - Arrow function không bind
arguments - Arrow function không phù hợp làm phương thức cho object
- Arrow function không thể sử dụng làm hàm khởi tạo
- Arrow function không có thuộc tính
prototype - Arrow function không được hoisted
Tham khảo :
Source: http://139.180.218.5
Category: Thuật ngữ đời thường