NỘI DUNG BÀI VIẾT
1. Giới thiệu
Arrow function
là một trong những tính năng mới rất hay của ES6. Việc sử dụng đúng cách arrow function giúp code trở nên ngắn gọn và dễ hiểu hơn. Vì vậy, trong bài viết này mình sẽ giúp bạn hiểu rõ hơn về arrow function trong JavaScript, cũng như biết cách sử dụng và những điều cần lưu ý khi sử dụng nó.
Arrow function
được định nghĩa là:
Arrow function – also called “fat arrow” function, from CoffeeScript (a transcompiled language) — are a more concise syntax for writing function expressions.
Nghĩa là: Hàm mũi tên – hay còn gọi là hàm “mũi tên béo”, từ CoffeeScript (một ngôn ngữ được biên dịch) – là một cú pháp ngắn gọn hơn để viết các biểu thức hàm.
2. Cách sử dụng Arrow Function
Cú pháp cơ bản với nhiều tham số
// ES5
var multiTestEs5 = function(a, b) {
return a * b;
};
// ES6
const multiTestEs6 = (a, b) => { return a * b };Code language: JavaScript (javascript)Cú pháp cơ bản với một tham số
// ES5
var phraseSplitterEs5 = function phraseSplitter(phrase) {
return phrase.split(' ');
};
// ES6
const phraseSplitterEs6 = phrase => phrase.split(" ");
console.log(phraseSplitterEs6("Coding Bootcamp")); // ["Coding ", "Bootcamp"]Code language: JavaScript (javascript)
Arrow function
đúng như những gì mà người ta nói về nó. Sử dụng
Arrow function
giải quyết bài toán với một tham số, code khá là gọn, đơn giản và dễ hiểu.
Không có tham số
// ES5
var docLogEs5 = function docLog() {
console.log(document);
};
// ES6
var docLogEs6 = () => { console.log(document); };
docLogEs6();Code language: JavaScript (javascript)Cú pháp Object literals
//ES5
var setNameIdsEs5 = function setNameIds(id, name) {
return {
id: id,
name: name
};
};
// ES6
var setNameIdsEs6 = (id, name) => ({ id: id, name: name });
console.log(setNameIdsEs6 (4, "Van Quy")); // Object {id: 4, name: "Van Quy"}Code language: JavaScript (javascript)Promise và Callback
// ES5
aAsync().then(function() {
returnbAsync();
}).then(function() {
returncAsync();
}).done(function() {
finish();
});
// ES6
aAsync().then(() => bAsync()).then(() => cAsync()).done(() => finish);Code language: JavaScript (javascript)Có thể thấy rõ với Promises and Callbacks khi sử dụng arrow function, thay vì phải viết quá nhiều
function()
giờ chỉ cần viết
() =>
là đủ rồi =))
3. Những điều cần chú ý khi sử dụng Arrow Function
Qua các cách sử dụng ở trên chúng ta thấy được
Arrow function
ngắn gọn, dễ hiểu. Tuy nhiên, không phải lúc nào cũng sử dụng tùy tiện được. Dưới đây là một vài trường hợp không nên sử dụng
Arrow function
.
Click handle
Đầu tiên. mình có một button lớn, có thể đặt tên cho nó là “push me”:
<button id="pushy">Push me</button>
<style>
button { font-size: 100px; }
.on { background: #ffc600; }
</style>Code language: HTML, XML (xml)Khi ai đó
click
vào nút, mình muốn nút này chuyển (thay đổi) class thành
on
và nút sẽ chuyển sang màu vàng.
const button = document.querySelector('#pushy');
button.addEventListener('click', () => {
this.classList.toggle('on');
});Code language: JavaScript (javascript)Nhưng nếu bạn
click
vào nút này thì bạn sẽ nhận được lỗi trả về là:
Uncaught TypeError: Cannot read property 'toggle' of undefinedCode language: JavaScript (javascript)Vậy điều này có nghĩa là gì?
this
trong trường hợp này, nó là thuộc tính
window
của trình duyệt. Bạn có thể sử dụng
console.log
để confirm nó.
const button = document.querySelector('#pushy');
button.addEventListener('click', () => {
console.log(this); // Window!
this.classList.toggle('on');
});Code language: JavaScript (javascript)Hãy nhớ rằng: Chúng ta đang nói về việc sử dụng
Arrow functions
, vậy nên
this
không bị ràng buộc bởi button này. Ngược lại, nếu chúng ta sử dụng function thông thường,
this
sẽ bị ràng buộc vào button mà bạn
click
vào đó.
const button = document.querySelector('#pushy');
button.addEventListener('click', function() {
console.log(this);
this.classList.toggle('on');
});Code language: JavaScript (javascript)Hiển nhiên khi
console.log(this)
kết quả trả về chính là button mà chúng ta vừa
click
, và button ban đầu sẽ chuyển sang màu vàng như ý muốn.
Object Methods
Kết thúc ví dụ về Click handle ở trên, tiếp đến chúng ta sẽ đi làm một ví dụ về object methods. Trước tiên, chúng ta cần một method để
bind
(ràng buộc) một object.
const person = {
points: 23,
score: () => {
this.points++;
}
}Code language: JavaScript (javascript)Giả sử chúng ta có một object là
person
. Chúng ta có một method được gọi là
score
và có thể gọi nó ra bằng
person.score
.
score
có sẽ tăng dần
points
tùy vào số lần nó được
run
và
points
hiện tại là 23.
Khi sử dụng arrow function dù có run
person.score
bao nhiêu lần đi chăng nữa,
points
vẫn chỉ dừng lại ở con số 23.
Tại sao vậy???
Khi sử dụng arrow function
this
không bị ràng buộc bởi thứ gì cả. Nó chỉ kế thừa từ phạm vi cha mà trong trường hợp này là
window
.
Và khi dùng function thông thường nếu chúng ta chạy
person.score();
, trong một vài lần,
points
sẽ có giá trị > 23.
Bởi vậy chúng ta không nên dùng arrow function trong trường hợp này:
const person = {
points: 23,
score: function() {
this.points++;
}
}Code language: JavaScript (javascript)Prototype Methods
Sau khi dừng lại 2 ví dụ ở trên, chắc rằng chúng ta cũng đã có thêm được những lưu ý cần thiết khi sử dụng arrow function rồi đúng không nhỉ! Tại ví dụ tiếp theo, hãy cùng tìm hiểu về
prototype methods
để có thêm cái nhìn rõ nét hơn.
class Car {
constructor(make, colour) {
this.make = make;
this.colour = colour;
}
}Code language: JavaScript (javascript)Ở ví dụ này, chúng ta khởi tạo một
class
là car. Và để thêm các
new Car
ta sử dụng:
const beemer = new Car('BMW', 'blue');
const subie = new Car('Subaru', 'white');Code language: JavaScript (javascript)Dễ dàng nhận thấy rằng đã có
subie
là một Car {make: “Subaru”, colour: “white”}, và beemer là một Car {make: “BMW”, colour: “blue”}. Sau đó thử thêm một prototype method:
Car.prototype.summarize = () => {
return `This car is a ${this.make} in the colour ${this.colour}`;
};Code language: JavaScript (javascript)Sau tất cả những gì chúng ta đã tạo ra, chúng ta có thể thêm được tất cả các methods vào tất cả chúng. Bởi vậy
Car.prototype.summarize
được thiết lập, vì vậy hãy viết vào console
subie.summarize
Trường hợp này khi sử dụng arrow function
this.car
trả về
undefined
và
this.colour
cũng trả về
undefined
.
Bạn phải sử dụng
this
trong một function thông thường:
Car.prototype.summarize = function() {
return `This car is a ${this.make} in the colour ${this.colour}`;
};Code language: JavaScript (javascript)Kết luận
-
Arrow functionvới cú pháp rút gọn, dễ hiểu là sự chọn lựa thông minh cho coder. -
Arrow functionkhông ràng buộcthis.
Tham khảo:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/
https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
