Sự khác biệt giữa Arrow Function và Function trong Javascript

Bài viết Sự khác biệt giữa Arrow Function và Function trong Javascript thuộc chủ đề về Hỏi đáp thắc mắt đang được rất nhiều bạn lưu tâm đúng không nào !! Hôm nay, Hãy cùng sotaythongthai.vn tìm hiểu Sự khác biệt giữa Arrow Function và Function trong Javascript trong bài viết hôm nay nha !
Các bạn đang xem nội dung : “Sự khác biệt giữa Arrow Function và Function trong Javascript”


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)

Tham khảo thêm: Nhận xét chuyển phát nhanh tiếng anh là gì

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: Tạo ấn tượng với Nghệ thuật nói chuyện phiếm

Để 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’.

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!

Xem thêm: Walmart là gì? Hé lộ những điều bạn chưa biết về thương hiệu này

Bạn thấy bài viết thế nào?

Các câu hỏi về Sự khác biệt giữa Arrow Function và Function trong Javascript

Team Sổ Tay Thông Thái mà chi tiết là Mỹ Chi đã 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 Chốt lại nhen <3 Bài viết Sự khác biệt giữa Arrow Function và Function trong Javascript ! được mình và team xem xét cũng như tổng hợp từ nhiều nguồn. Nếu thấy bài viết Sự khác biệt giữa Arrow Function và Function trong Javascript Cực hay ! Hay thì hãy ủng hộ team Like hoặc share. Nếu thấy bài viết Sự khác biệt giữa Arrow Function và Function trong Javascript rât hay ! chưa hay, hoặc cần bổ sung. Bạn góp ý giúp mình nha!!

Các Hình Ảnh Về Sự khác biệt giữa Arrow Function và Function trong Javascript

Sự khác biệt giữa Arrow Function và Function trong Javascript

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

Tra cứu báo cáo về Sự khác biệt giữa Arrow Function và Function trong Javascript tại WikiPedia

Bạn khả năng xem nội dung về Sự khác biệt giữa Arrow Function và Function trong Javascript từ web Wikipedia tiếng Việt.◄

Tham Gia Cộng Đồng Tại

💝 Nguồn Tin tại: https://sotaythongthai.vn/

💝 Xem Thêm Giải Đáp Thắc Mắt tại : https://mangraovat.edu.vn/hoi-dap/

Related Posts

About The Author

Add Comment