[ad_1]
Trong bài viết này, bạn sẽ tìm hiểu về các hàm mũi tên, cú pháp, tham số, dấu ngoặc đơn và dấu ngoặc nhọn và khi bạn có thể bỏ qua chúng. Bạn cũng sẽ tìm hiểu về trả lại ngầm và rõ ràng, ngay lập tức gọi các hàm mũi tên và sự khác biệt chính giữa các chức năng và chức năng của mũi tên.
Giới thiệu
Các hàm mũi tên là một trong những tính năng đáng chú ý nhất đối với JavaScript được thêm vào với đặc tả ES6. Chúng cũng là một trong những tính năng được thảo luận nhiều nhất trong ES6, cùng với các lớp. Vì vậy, hãy để Lôi xem các chức năng của mũi tên là gì, cách chúng hoạt động và cách sử dụng chúng.
Cú pháp của các hàm mũi tên
Đặc điểm đáng chú ý nhất của chức năng mũi tên là Mũi tên béo mập ( => ). Đó cũng là do chức năng mũi tên mập mập này có tên của họ, và cũng có biệt danh là mũi tên béo mập. Mũi tên béo mập này đứng giữa các dấu ngoặc đơn cho các tham số, khởi động chức năng mũi tên và thân hàm với một số mã để thực thi, kết thúc chức năng mũi tên.
// Cú pháp hàm mũi tên
hãy để myArrowFunc = () => // thân hàm hàm ngắn gọn với một số mã
// Hoặc là
hãy để myArrowFunc = () => {/ * thân khối chức năng với một số mã * /}
// Gọi myArrowFunc
myArrowFunc ()
Nếu bạn so sánh cú pháp của các hàm mũi tên với các hàm, bạn sẽ thấy cú pháp của hai hàm này rất giống nhau. Vì lý do này, các hàm mũi tên được coi là một thay thế cho biểu thức chức năng.
// Hàm mũi tên
const myArrowFunc = () => {/ * thân hàm với một số mã * /}
// Biểu thức hàm
const myArrowFunc = function () {}
Điều đó nói rằng, don Hãy để sự giống nhau này đánh lừa bạn. Mặc dù các chức năng mũi tên có thể trông tương tự như các chức năng, có một số khác biệt quan trọng và rất quan trọng. Chúng tôi sẽ nói về tất cả những sự khác biệt này sớm.
Tham số và dấu ngoặc đơn (tùy chọn)
Các hàm mũi tên thường bắt đầu bằng dấu ngoặc đơn. Tuy nhiên, điều này không hoàn toàn cần thiết. Các dấu ngoặc đơn này là tùy chọn và bạn có thể bỏ qua chúng, trong một điều kiện cụ thể. Điều duy nhất quan trọng là nếu chức năng mũi tên cụ thể chấp nhận bất kỳ tham số nào. Nếu nó không chấp nhận bất kỳ bạn phải sử dụng dấu ngoặc đơn trống ( () ).
Điều tương tự áp dụng cho các hàm mũi tên chấp nhận hai hoặc nhiều tham số. Trong trường hợp này, bạn phải bọc các tham số này bằng dấu ngoặc đơn ( () ). Và, cũng đảm bảo tách từng tham số bằng một trạng thái hôn mê. Bây giờ, điều này cho chúng ta một kịch bản có thể xảy ra trong đó dấu ngoặc đơn là tùy chọn.
Khi chức năng mũi tên chỉ chấp nhận một tham số. Sau đó, bạn có thể sử dụng hoặc bỏ qua dấu ngoặc đơn. Hãy nhớ rằng nếu bạn thích sử dụng dấu ngoặc đơn thì không có gì ngăn cản bạn làm như vậy. Bạn có thể sử dụng dấu ngoặc đơn mọi lúc, bất kể có bao nhiêu tham số và các hàm mũi tên sẽ hoạt động. Mặt khác, hãy nhớ quy tắc của một.
// Hàm mũi tên có 0 tham số
// Dấu ngoặc được yêu cầu ở đây
const myArrowFunc = () => // một số mã
// Hàm mũi tên với 1 tham số
// Dấu ngoặc là tùy chọn ở đây
const myArrowFunc = paramOne => // một số mã
// Điều này cũng sẽ làm việc
const myArrowFunc = (paramOne) => // một số mã
const myArrowFunc = (paramOne) => console.log (paramOne)
// Gọi myArrowFunc
myArrowFunc ('Cái gì đó')
// Hàm mũi tên với hơn 2 tham số
// Dấu ngoặc được yêu cầu ở đây
const myArrowFunc = (paramOne, paramTwo) => // một số mã
const myArrowFunc = (paramOne, paramTwo) => paramOne + paramTwo
// Gọi myArrowFunc
myArrowFunc (13, 46)
// 59
Dấu ngoặc nhọn tùy chọn
Một điều nữa là tùy chọn trong trường hợp các hàm mũi tên là dấu ngoặc nhọn. Ở đây, điều kiện thậm chí còn dễ dàng hơn trong trường hợp dấu ngoặc đơn. Đó là một điều quan trọng là nếu chức năng mũi tên là một lót hay không. Nếu chức năng mũi tên là một lớp lót, bạn có thể bỏ qua dấu ngoặc nhọn và chức năng đó vẫn sẽ hoạt động như mong đợi.
Mặt khác, nếu thân hàm chứa mã kéo dài hơn một dòng, dấu ngoặc nhọn là bắt buộc và bạn phải sử dụng chúng. Hàm mũi tên không có dấu ngoặc nhọn được gọi là hàm mũi tên có thân hình ngắn gọn. Chức năng mũi tên với dấu ngoặc nhọn được gọi là chức năng mũi tên với thân hình khối hình chữ nhật.
Giống như với dấu ngoặc đơn, nếu bạn muốn sử dụng dấu ngoặc nhọn, bạn có thể sử dụng chúng mọi lúc và nó sẽ hoạt động. Nếu bạn muốn bỏ qua chúng, hãy nhớ rằng chỉ an toàn khi làm điều đó trong trường hợp các chức năng mũi tên một dòng.
// Hàm mũi tên một dòng
// Hàm mũi tên với thân ngắn gọn
// Dấu ngoặc nhọn là tùy chọn ở đây
const myArrowFunc = () => // một số mã
const myArrowFunc = () => console.log ('Xin chào!')
// Điều này cũng sẽ làm việc
() => {/ * một số mã * /}
const myArrowFunc = () => {/ * một số mã * /}
const myArrowFunc = () => {console.log ('Xin chào!')}
// Gọi myArrowFunc
myArrowFunc ()
// Xin chào!
// Hàm mũi tên nhiều dòng
// Hàm mũi tên có thân khối
// Dấu ngoặc nhọn được yêu cầu ở đây
const myArrowFunc = () => {
// một số mã
}
const myArrowFunc = () => {
console.log ('Đây là chức năng mũi tên nhiều dòng.')
}
// Gọi myArrowFunc
myArrowFunc ()
// 'Đây là một hàm mũi tên nhiều dòng.'
Khi bạn nghĩ về nó, nó có ý nghĩa. Trong trường hợp một lớp lót, JavaScript có thể dễ dàng đoán được phần thân của các hàm mũi tên bắt đầu và vị trí của chúng. Đây không phải là trường hợp với cơ thể chức năng trải dài trên nhiều dòng. Trong trường hợp này, JavaScript không biết ranh giới của thân hàm nằm ở đâu.
Hãy nhớ rằng JavaScript không quan tâm đến khoảng trắng và vết lõm. Ví dụ, trong Python, bạn có thể chỉ định nơi thân hàm bắt đầu và kết thúc bằng cách thụt vào khối mã đó. Điều này sẽ không hoạt động trong JavaScript. Trong JavaScript, bạn có thể thụt mã của mình theo ý muốn và JavaScript sẽ chỉ mỉm cười và bỏ qua nó.
// Điều này sẽ không hoạt động - bỏ qua dấu ngoặc nhọn
// Hàm mũi tên với thân ngắn gọn
// trong các hàm mũi tên đa dòng
() =>
// một số mã
const myArrowFunc = () =>
// một số mã
Hoàn trả rõ ràng và rõ ràng
Một điều thú vị về chức năng mũi tên là chúng có lợi nhuận ngầm. Có nghĩa là, hàm mũi tên trả về giá trị tự động. Bạn không cần phải sử dụng từ khóa return . Điều đó nói rằng, điều này hoạt động trong hai tình huống cụ thể. Đầu tiên là khi chức năng mũi tên là một lớp lót.
Khi đó là chức năng mũi tên một lớp sẽ tự động trả về bất kỳ mã nào trong thân hàm. Nếu chức năng mũi tên không phải là một lớp lót, bạn phải sử dụng câu lệnh return .
// Hàm mũi tên một dòng
// Không cần tuyên bố trả lại
() => // một số mã
const myArrowFunc = () => // một số mã
// Gọi myArrowFunc
myArrowFunc ()
// Hàm mũi tên nhiều dòng
// Tuyên bố trả lại rõ ràng là cần thiết
() => {
trả lại / * một số mã * /
}
const myArrowFunc = () => {
trả lại / * một số mã * /
}
// Gọi myArrowFunc
myArrowFunc ()
Tình huống thứ hai mà bạn phải sử dụng câu lệnh return là khi hàm mũi tên sử dụng thân khối, tức là thân hàm có dấu ngoặc nhọn. Đây là một điều khác bạn phải xem xét khi quyết định bạn muốn sử dụng cú pháp nào. Cho dù bạn muốn sử dụng cơ thể khối khối cứng và dấu ngoặc nhọn hay thân hình ngắn gọn mà không có khung cong.
Nếu là cơ thể ngắn gọn hơn, bạn không phải sử dụng câu lệnh return . Nếu trước đây, khối cơ thể, hãy đảm bảo sử dụng câu lệnh return .
// Hàm mũi tên với thân ngắn gọn
// Không cần tuyên bố trả lại
() => // một số mã (đây là phần thân)
const myArrowFunc = () => // một số mã (đây là phần thân ngắn gọn)
// Gọi myArrowFunc
myArrowFunc ()
// Hàm mũi tên có thân khối
// Tuyên bố trả lại rõ ràng là cần thiết
() => {/ * một số mã (đây là khối thân) * /}
const myArrowFunc = () => {/ * một số mã (đây là khối thân) * /}
// Gọi myArrowFunc
myArrowFunc ()
Chức năng mũi tên được gọi ngay lập tức
Một điều JavaScript cho phép bạn là khai báo và gọi các hàm cùng một lúc. Các hàm này được gọi là các hàm được gọi ngay lập tức. Một cách để tạo loại hàm này là bằng cách gói hàm với dấu ngoặc đơn và thêm cặp dấu ngoặc đơn sau dấu ngoặc đơn.
Cách thứ hai cũng là về cách gói hàm với dấu ngoặc đơn và thêm cặp dấu ngoặc đơn sau dấu ngoặc nhọn, vẫn nằm trong dấu ngoặc đơn. Cách thứ ba là bỏ qua các dấu ngoặc đơn và đặt toán tử NOT (! ) ở đầu dòng, trước từ khóa .
Cách thứ tư tương tự như trước đây, ngoại trừ việc bạn thay thế toán tử NOT bằng toán tử đơn nguyên + .
// Hàm được gọi ngay lập tức số 1:
// gọi dấu ngoặc đơn bên ngoài dấu ngoặc đơn
(chức năng() {
// một số mã
}) ()
// Hàm được gọi ngay lập tức số 2:
// gọi dấu ngoặc đơn bên trong dấu ngoặc đơn
(chức năng() {
// một số mã
} ())
// Hàm được gọi ngay lập tức số 3:
// sử dụng! (KHÔNG phải nhà điều hành)
!chức năng() {
// một số mã
} ()
// Hàm được gọi ngay lập tức số 4:
// Sử dụng + (toán tử đơn nguyên)
+ hàm () {
// một số mã
} ()
Bạn cũng có thể làm điều tương tự với các hàm mũi tên, tạo các hàm mũi tên được gọi ngay lập tức. Điều quan trọng là, trong trường hợp các hàm mũi tên, bạn chỉ có thể sử dụng cách đầu tiên. Ba người khác sẽ thất bại. Vì vậy, hãy bọc hàm mũi tên bằng dấu ngoặc đơn và thêm cặp dấu ngoặc đơn sau dấu ngoặc đơn.
// Gọi ngay chức năng mũi tên một dòng
// Cái này sẽ hoạt động
// Hàm hàm mũi tên với dấu ngoặc đơn
// thêm bộ dấu ngoặc đơn bổ sung
// bên ngoài dấu ngoặc đơn
(() => / * một số mã * /) ()
// Gọi ngay hàm mũi tên nhiều dòng
// Cái này sẽ hoạt động
(() => {
/ * một số mã * /
}) ()
// Điều này sẽ không hoạt động
(() => {
// một số mã
} ())
// Điều này cũng sẽ không hoạt động
! () => {
// một số mã
} ()
// Điều này cũng sẽ không hoạt động
+ () => {
// một số mã
trở lại 'foo'
} ()
Hãy nhớ rằng tất cả các quy tắc về dấu ngoặc đơn tùy chọn và dấu ngoặc nhọn vẫn được áp dụng. Có nghĩa là, nếu hàm mũi tên không có hoặc hai hoặc tham số, bạn phải bao gồm dấu ngoặc đơn. Nếu là nhiều dòng, bạn phải sử dụng dấu ngoặc nhọn và câu lệnh return . Nếu nó là một dòng, nhưng sử dụng thân khối, bạn cũng phải sử dụng câu lệnh return .
// Thân ngắn gọn với sự trở lại ngầm
(() => / * một số mã * /) ()
// Chặn cơ thể với lợi nhuận rõ ràng
(() => {return / * một số mã * /}) ()
// Hoặc là
(() => {
trả lại / * một số mã * /
}) ()
Sự khác biệt giữa chức năng và chức năng mũi tên
Chức năng và chức năng mũi tên là tương tự nhau. Tuy nhiên, có ít nhất hai sự khác biệt quan trọng. Hãy cùng xem xét từng điểm khác biệt. Điều này sẽ giúp bạn quyết định khi nào nên sử dụng các chức năng mũi tên và khi nào các chức năng.
Không có đối số đối số
Khi bạn làm việc với các hàm, bạn luôn có thể truy cập đối tượng đối số. Đối tượng này chứa tất cả các giá trị được truyền cho hàm khi nó được gọi. Trong trường hợp các hàm mũi tên, không có một đối tượng như vậy. Ngay cả khi bạn chuyển một số đối số cho các hàm mũi tên, JavaScript vẫn sẽ xuất hiện lỗi tham chiếu khi bạn cố truy cập vào đối tượng .
// Chức năng
const myFunction = function (param) {
trả về đối số
}
myFactor ('Cái gì đó')
// {'0': 'Cái gì đó'}
// Hàm mũi tên
const myArrowFunction = (param) => đối số
myArrowFunction ('Cái gì đó')
// ReferenceError: đối số không được xác định
Vì vậy, hãy nhớ rằng, nếu bạn dự định sử dụng đối số đối số thì hàm đối tượng thông thường là lựa chọn tốt hơn hàm mũi tên.
Không ràng buộc điều này
Một thứ khác bị thiếu trong các chức năng mũi tên là này . Khi bạn làm việc với các chức năng, mỗi khi bạn xác định một chức năng, nó cũng tạo ra của chính nó . Nếu bạn không sử dụng chế độ nghiêm ngặt thì này sẽ đề cập đến đối tượng toàn cầu . Nếu bạn sử dụng chế độ nghiêm ngặt, giá trị của này sẽ không được xác định.
Khi bạn sử dụng hàm để tạo hàm tạo thì này sẽ là một đối tượng mới. Nếu bạn sử dụng chức năng như một đối tượng hoặc một lớp, phương thức này sẽ đề cập đến đối tượng cha hoặc lớp, của chức năng đó.
// Điều này ở chế độ không nghiêm ngặt
hàm myFactor () {
console.log (cái này, cái này === cửa sổ)
}
chức năng của tôi ()
// [object Window]đúng
///
// Điều này trong chế độ nghiêm ngặt
'Sử dụng nghiêm ngặt'
hàm myFactor () {
console.log (cái này, cái này === cửa sổ)
}
chức năng của tôi ()
// không xác định, sai
// Hàm bên trong một đối tượng
const myObj = {
tiêu đề: 'Atlas Shrugged',
tác giả: 'Ayn Rand',
getBook: function () {
// Điều này đề cập đến myObj
// Vì vậy, this.title giống như myObj.title
trả về `$ {this.title} bằng $ {this. Tác giả} .`
}
}
myObj.getBook ()
// 'Atlas Shrugged bởi Ayn Rand.'
Trong trường hợp chức năng mũi tên, tình huống là khác nhau. Các chức năng mũi tên don lồng có riêng này . Các chức năng mũi tên kế thừa này từ bối cảnh thực thi được sử dụng. Khi bạn ở trong môi trường toàn cầu mặc định, bối cảnh thực thi cũng là toàn cục, thường là đối tượng .
// Điều này ở chế độ không nghiêm ngặt
// Hàm mũi tên
hãy để myArrowFunction = () => {
console.log (cái này, cái này === cửa sổ)
}
myArrowF rối ()
// [object Window]đúng
///
// Điều này trong chế độ nghiêm ngặt
'Sử dụng nghiêm ngặt'
hãy để myArrowFunction = () => {
console.log (cái này, cái này === cửa sổ)
}
myArrowF rối ()
// [object Window]đúng
Khi bạn ở trong một chức năng, bối cảnh thực hiện sẽ trở thành chức năng. Với các chức năng mũi tên, không có ràng buộc nào cho này . Thay vào đó, này được kế thừa từ bối cảnh ban đầu của nó. Nếu tất cả đều có một đối tượng, bối cảnh thực thi sẽ là toàn cục, đối tượng . Đây là một vấn đề.
Hãy tưởng tượng bạn có chức năng mũi tên bên trong một đối tượng. Khi bạn sử dụng này bên trong chức năng mũi tên đó, nó sẽ đề cập đến bối cảnh thực thi toàn cầu, cửa sổ không phải đối tượng trong đó. Điều này có nghĩa là sau đó bạn có thể sử dụng này khi bạn muốn đề cập đến một số tài sản bên trong đối tượng đó.
Hãy nhớ rằng, này bây giờ đề cập đến cửa sổ và không có tài sản đó. Vì vậy, nếu bạn thử nó, JavaScript sẽ đưa ra lỗi loại. Giải pháp? Sử dụng chức năng thông thường thay thế.
// Hàm mũi tên bên trong một đối tượng
const myObj = {
tiêu đề: 'Atlas Shrugged',
tác giả: 'Ayn Rand',
lấy sách: () => {
// Điều này đề cập đến cửa sổ đối tượng toàn cầu
// Vì vậy, this.title giống như window.title
trả về `$ {this.title} bằng $ {this. Tác giả} .`
},
getBookWithRegularFunction: function () {
// Điều này đề cập đến myObj
// Vì vậy, this.title giống như myObj.title
trả về `$ {this.title} bằng $ {this. Tác giả} .`
}
}
myObj.getBook ()
// TypeError: Không thể đọc thuộc tính 'title' của không xác định
myObj.getBookWithRegularFunction ()
// 'Atlas Shrugged bởi Ayn Rand.'
Đây là một lý do các hàm mũi tên không phải là lựa chọn tốt nhất cho các phương thức đối tượng. Ngoài ra, đó là các hàm mũi tên có thể được sử dụng như là các hàm tạo. Nếu bạn cố gắng thực hiện, JavaScript sẽ đưa ra lỗi loại.
Kết luận: Hàm mũi tên JavaScript
Hy vọng bài viết này đã giúp bạn tìm hiểu về các hàm mũi tên JavaScript, cách chúng hoạt động và cách sử dụng chúng. Trong một bản tóm tắt, hôm nay bạn đã học về cơ bản của các hàm mũi tên và cú pháp. Tiếp theo, bạn cũng đã tìm hiểu về các tham số và dấu ngoặc đơn và dấu ngoặc nhọn và khi nào bạn có thể bỏ qua chúng và khi nào thì không.
Sau đó, bạn cũng đã học về trả lại ngầm và rõ ràng, khi bạn có thể bỏ qua câu lệnh return và khi nào thì không. Sau đó, bạn đã học cách tạo các hàm mũi tên được gọi ngay lập tức. Cuối cùng, bạn cũng đã tìm hiểu về hai điểm khác biệt chính giữa chức năng mũi tên và chức năng. Với điều đó, cảm ơn bạn đã dành thời gian của bạn.
<! –
Bạn có câu hỏi, đề xuất, suy nghĩ, lời khuyên hoặc mẹo nào bạn muốn chia sẻ với các độc giả khác của blog này và tôi không? Hãy chia sẻ nó trong một bình luận. Bạn cũng có thể gửi cho tôi một thư. Tôi rất thích nghe từ bạn.
->
<! –
Muốn nhiều hơn?
->
Nếu bạn thích bài viết này, vui lòng đăng ký để bạn không bỏ lỡ bất kỳ bài đăng nào trong tương lai.
<! –
Bạn có trên phương tiện truyền thông xã hội không? Hãy kết nối! Bạn có thể tìm thấy tôi trên Twitter, GitHub và Dribbble.
->
Liên quan
[ad_2]
Source link: webdesignernews