Sự khác nhau giữa function và arrow function

Trang chủ » Javascript » Javascript cơ bản » Sự khác biệt giữa Arrow Function và Function thông thường

Nội dung chính Show

Sơ lược về bài viết
Ví dụ cơ bản về bối cảnh (context)
Ví dụ bối cảnh khi dùng trong setTimeout kết hợp với jQuery
Một ví dụ khác khi kết hợp Arrow Function với Animation của jQuery
Arrow Function thường được dùng trên Class

Sơ lược về bài viết

Ở bài viết trước, chúng ta đã xem qua Tìm hiểu về một số cú pháp ES6 trong JavaScript . Trong bài viết này, chúng ta sẽ tìm hiểu về sự khác biệt giữa Arrow Function và Function thông thường khi sử dụng trên thực tế. Tuy Arrow Function và Function phần giống nhau về cách định nghĩa 1 hàm nhưng tham chiếu đến bối cảnh (context) hay môi trường xung quanh nó sẽ khác. Vậy tham chiếu đến bối cảnh hay môi trường xung quanh là như thế nào? Chúng ta sẽ cùng bắt đầu tìm hiểu.

Các chủ đề mà chúng ta sẽ tìm hiểu như sau:

Ví dụ cơ bản về bối cảnh (context)
Ví dụ bối cảnh khi dùng trong setTimeout kết hợp với jQuery
Một ví dụ khác khi kết hợp Arrow Function với Animation của jQuery
Arrow Function thường được dùng trên Class (ES6)

Ví dụ cơ bản về bối cảnh (context)

Vậy bối cảnh ở đây là gì? Thật khó để định nghĩa cho các bạn chính xác được nghĩa của nó ở ngữ cảnh tiếng Việt. Vì thế các bạn chỉ cần hiểu đơn giản là từ khóa this được sử dụng trong Function thông thường và Arrow Function sẽ tham chiếu đến những môi trường hay bối cảnh khác nhau. Để tránh khó hiểu thêm, các bạn hãy xem qua ví dụ bên dưới:

Ở ví dụ này các bạn cũng đã thấy từ khóa this của chúng ta có giá trị khác biệt, this ở function thường sẽ tham chiếu đến chính Object chứa nó, còn Arrow Function sẽ tham chiếu đến cha gần nhất của nó nên vì thế nó hiểu từ khóa this của function cha bao hàm nó.

Và khi các bạn có dùng thêm use strict để ràng buộc chặt chẽ hơn về phạm vi hoạt động của biến thì this trong Arrow Function có giá trị sẽ là undefined thay vì trả về cho các bạn đối tượng window. Nên các bạn hãy chú ý điều này.

Ví dụ bối cảnh khi dùng trong setTimeout kết hợp với jQuery

See the Pen Bối cảnh khi dùng trong setTimeout kết hợp với jQuery của Arrow Function by An Vu (@thienanblog) on CodePen.light

Như các bạn cũng thấy rằng ở Anonymous Function, chúng ta phải lưu tạm this của phương thức click vào biến btn để có thể truyền vào bên trong setTimeout. Trong đó, từ khóa this ở đối số của setTimeout được tham chiếu đến chính Anonymous Function của nó. Vì vậy, nó sẽ không hiểu this ở đây có ý nghĩa là btn chứ không phải là Anonymous Function đang được dùng.

Và khi các bạn dùng Arrow Function, chúng ta đã đơn giản hóa đi 1 bước khi dùng, giúp cho code của chúng ta dễ hiểu hơn là this này được tham chiếu đến chính Anonymous Function của phương thức click của jQuery chứ không phải chính nó nữa.

Một ví dụ khác khi kết hợp Arrow Function với Animation của jQuery

See the Pen Một ví dụ khác khi kết hợp Arrow Function với Animation của jQuery by An Vu (@thienanblog) on CodePen.light

Tương tự với ví dụ ở trên, trong ví dụ này tôi chủ yếu muốn cho các bạn thêm một số kinh nghiệm khi sử dụng trên thực tế như thế nào.

Arrow Function thường được dùng trên Class

Chuẩn ES6 cho phép chúng ta có thể viết class giống như những ngôn ngữ khác mà các bạn có thể đã từng biết qua, nếu chưa biết thì bây giờ các bạn biết, không sao cả. Tuy nhiên, class trong Javascript có những quy ước và cách khởi tạo thuộc tính khác biệt so với các ngôn ngữ từng được biết. Thông qua ví dụ này, phần nào các bạn cũng sẽ thích thú viết class hơn là viết function thông thường.

Khi chạy ví dụ này, các bạn cũng sẽ thấy rằng việc chúng ta sử dụng Function thông thường trên Class sẽ khiến từ khóa this của chúng ta có giá trị undefined ngay. Nên Arrow Function cũng thường rất được dùng trên Class thay vì Function thông thường. Chỉ là thường dùng thôi nhé, vì một số trường hợp chúng ta vẫn phải sử dụng Function thông thường để tham chiếu đến this của chính nó. Thường là các callback được gọi từ các sự kiện của thư viện bên ngoài mà chúng ta sử dụng.

Nếu bạn vẫn còn hứng thú thì hãy xem qua sự kiện onSet trong thư viện Pickadate để hiểu rõ hơn tôi nói cái gì. Nếu như chúng ta dùng Arrow Function trong trường hợp đó thì chắc chắn sẽ nhận sai giá trị ngay. Vì vậy, hãy đón xem ở 1 bài viết khác về thư viện Pickadate này mà tôi sẽ viết sắp tới các bạn nhé.

Qua bài viết này, chúng ta cũng đã tìm hiểu xong sự khác biệt giữa Arrow Function và Function thông thường như thế nào rồi. Cám ơn các bạn đọc giả đã ủng hộ Website.

(Visited 7,513 times, 1 visits today)

1. Arrow Function là gì?

Arrow Function (hay còn gọi là hàm mũi tên) là một trong số những tính năng mới và rất hay của ES6. Nó thừa hưởng cách viết ngắn gọn bằng cú pháp ES6. Tuy Arrow Function và Function đều là function, nhưng cách viết và cách tham chiếu tới bối cảnh (context) khác nhau.

2. Sự khác nhau ở cú pháp

Arrow Function dùng kí tự =>

Bạn đang xem: arrow function la gi

hello = () => sentayho.com.vn(‘hello’) // hello()

còn Function thông thường thì :

function hello() sentayho.com.vn(‘hello’) // hello()

Với TH có tham số :

hello = name => sentayho.com.vn(‘hello ‘, name)

Ta khả năng giản lược được dấu () với trường hợp có 1 tham số truyền vào.

mặt khác, với arrow function ta khả năng bỏ qua từ khoá return

double = x => x * 2

còn với function thì :

function double(x) return x * 2

mặt khác, ta còn dùng được arrow function trong trường hợp: map, filter, forEach,…

Ví dụ:

const numbers = [1,2,3,4] const newArray = sentayho.com.vn(item => item * 2 ) // sentayho.com.vn(newArray)

Xem thêm: Drop Shipping là gì? Lợi ích và Giảm của Drop shipping – Blog của Mr. Logistics Việt Nam

Trông có vẻ tối giản code so với:

const numbers = [1,2,3,4] const newArray = sentayho.com.vn(function(item) return item => item * 2 ) // sentayho.com.vn(newArray) 3. tìm hiểu thông tin về ‘this’ trong javascript

Để hiểu được phần bối cảnh (context) vừa được giới thiệu trên thì ta phải hiểu qua chút về ‘this’ trong javascript đã.
This là một từ khoá khá quen thuộc trong khá nhiều ngôn ngữ, nó dùng để trỏ tới chính object gọi hàm đó và javasrcipt cũng thế.

const person = name_person:’hue’, getNamePerson: function() return sentayho.com.vn sentayho.com.vnamePerson() // hue

Trong một trường hợp khác

const name_person = ‘hue’ // bien nay nam trong object window function getNamePerson() return sentayho.com.vn_person sentayho.com.vnamePerson() // hue -> trỏ tới object window getNamePerson() // hue -> trỏ tới object window

mặc khác, nếu cứ thế thì đã dễ hiểu biết bao, nhưng sự khó chịu sẽ dần hiện ra nếu ta dùng nó….

Ví dụ 1: Khi nhấn button thì hiện tên

const person = name_person:’hue’, getNamePerson: function() sentayho.com.vn(this.name_person); ; //Ở đây this sẽ là object person sentayho.com.vnamePerson(); $(‘button’).click(person.getNamePerson); //getNamePerson truyền vào như callback

Lúc này, ta sẽ giật mình vì hàm chạy không được như mong muốn.Kiểm tra kĩ, thì lúc này, this không phải là trỏ tới person mà là button mà ta click vào, vì thế nó k có name_person.

Để giải quyết vấn đề này, chúng ta cần dùng tới bind

$(‘button’).click(person.getNamePerson.bind(person));

Ta sẽ gặp nhiều vấn đề này hơn trong trường hợp, hàm truyền vào như một callback như setInterval chẳng hạn.

Ví dụ 2:

const person = name:’hue’, getName: function() return sentayho.com.vn sentayho.com.vname() // ‘hue’ const getNamePerson = sentayho.com.vname() getNamePerson() // sai -> not function -> this trỏ tới object window

Cách giải quyết nó :

const getNamePerson = sentayho.com.vn(person) // hue

Lúc này, sau khi dùng bind thì con trỏ this sẽ trỏ tới person.

Xem thêm: Bitum là gì? Phân biệt nhựa bitum có những loại nào trên thị trường

Để tránh tình trạng lỗi như trên, trong một vài trường hợp “mập mờ context” như trên, giải pháp sử lí đó là ‘bind’.

XEM NGAY: Đánh giá về hợp số là gì

Khác với function thông thường, arrow function không có bind vì thế, không định nghĩa lại this. vì thế, this sẽ tương ứng với ngữ cảnh gần nhất của nó.

Và cũng chính bởi nó không định nghĩa this, nên arrow function không phù hợp làm method của object, vì thế nếu định nghĩa method của object, function vẫn là sự lựa chọn đúng đắn.

Trong bài chia sẻ phần trước, thì ta cũng nhớ đừng nên dùng arrow function bừa bãi ở mọi nơi, mà cũng nên bind trước rồi gọi function sẽ tránh được việc khi render lại tạo function mới.

4. Kết luận

Trên đây là những điểm mình đúc kết lại trong thời gian tiếp xúc với javascript về function và arrow function. Mình xin tóm tắt lại như sau:

Về định nghĩa, arrow function và function đều là function mặc khác:

Arrow Function:

Arrow function là một tính năng mới của ES6, giúp viết code ngắn gọn hơn.
Arrow function dùng khá ok trong các TH dùng: map, filter, reducer,…
Arrow function không có bind.
Arrow function không phù hợp là method của object.

Function:

Cần chú ý thêm về con trỏ được trỏ tới để định nghĩa lại this bằng ‘bind’.

Tùy vào từng mục đích dùng, mà nên lựa chọn function hay arrow function, chứ trước mắt arrow funtion không thể thay thế function được

Cám ơn các bạn đã đọc!

Tham khảo thêm: Nhận định Chiết khấu là gì? Cách tính giá chiết khấu và ví dụ chi tiết

Team Mạng Rao Vặt mà chi tiết là Thùy Dương đã biên soạn bài viết dựa trên tư liệu sẵn có và kiến thức từ Internet. Dĩ nhiên tụi mình biết có nhiều câu hỏi và nội dung chưa thỏa mãn được bắt buộc của các bạn.

Thế nhưng với tinh thần tiếp thu và nâng cao hơn, Mình luôn đón nhận tất cả các ý kiến khen chê từ các bạn & Quý đọc giả cho bài viêt Sự khác biệt giữa Arrow Function và Function trong Javascript

Nếu có bắt kỳ câu hỏi thắc mắt nào vê Sự khác biệt giữa Arrow Function và Function trong Javascript hãy cho chúng mình biết nha, mõi thắt mắt hay góp ý của các bạn sẽ giúp mình nâng cao hơn hơn trong các bài sau nha <3>

Các từ khóa tìm kiếm cho bài viết #Sự #khác #biệt #giữa #Arrow #Function #và #Function #trong #Javascript