Chức năng javascript khó hiểu

Quay trở lại cuối những năm 90 - khi tôi học JavaScript - chúng tôi được dạy viết hàm “Xin chào thế giới” bằng cách sử dụng câu lệnh hàm. Như thế này…

function helloWorld[] {
  return ‘Hello World!’;
}

Ngày nay, có vẻ như tất cả những đứa trẻ tuyệt vời đang viết chức năng “Xin chào thế giới” như thế này…

const helloWorld = [] => 'Hello World!';

Đây là một biểu thức hàm trong ES2015 JavaScript và nó hấp dẫn kinh khủng. Thật đẹp khi nhìn vào. Đó là tất cả một dòng. rất ngắn gọn. thật đáng yêu

Nó sử dụng chức năng mũi tên, một trong những tính năng phổ biến nhất của ES2015

Khi tôi lần đầu tiên nhìn thấy điều này, tôi đã như

Mặc dù Babel miễn phí

Vì vậy, sau gần 20 năm sử dụng JavaScript và sau khi sử dụng ES2015 trên một số dự án, đây là cách tôi sẽ viết hàm “Xin chào thế giới” ngày hôm nay

function helloWorld[] {
  return ‘Hello World!’;
}

Bây giờ tôi đã chỉ cho bạn cách mới, tôi chắc chắn rằng bạn sẽ không thể đứng nhìn mã trường học cũ ở trên

Toàn bộ ba dòng cho một chức năng nhỏ đơn giản. Tất cả những nhân vật phụ đó

Tôi biết bạn đang nghĩ gì…

Không ai có thời gian cho điều đó

Tôi yêu chức năng mũi tên, tôi thực sự làm. Nhưng khi tôi cần khai báo một hàm cấp cao nhất trong mã của mình, tôi vẫn sử dụng một câu lệnh hàm kiểu cũ tốt

Câu nói này của “Chú Bob” Martin giải thích tại sao

“…tỷ lệ thời gian dành cho đọc so với viết là hơn 10 trên 1. Chúng tôi liên tục đọc mã cũ như một phần của nỗ lực viết mã mới.

Vì tỷ lệ này quá cao nên chúng tôi muốn việc đọc mã trở nên dễ dàng ngay cả khi điều đó khiến việc viết khó hơn. ”

— Robert C. Martin
Mã sạch. Sổ tay thủ công phần mềm linh hoạt

Câu lệnh hàm có hai ưu điểm rõ ràng so với biểu thức hàm

Lợi thế #1. Ý định rõ ràng

Khi quét qua hàng nghìn dòng mã mỗi ngày, thật hữu ích khi có thể tìm ra ý định của lập trình viên một cách nhanh chóng và dễ dàng nhất có thể

Hãy xem này

const maxNumberOfItemsInCart = ...;

Bạn đọc tất cả các ký tự đó và bạn vẫn không biết dấu chấm lửng đại diện cho một chức năng hay một số giá trị khác. Nó có thể là

const maxNumberOfItemsInCart = 100;

…hoặc nó có thể dễ dàng như vậy

const maxNumberOfItemsInCart = [statusPoints] => statusPoints * 10;

Nếu bạn sử dụng một câu lệnh chức năng, sẽ không có sự mơ hồ như vậy

Nhìn vào

const maxNumberOfItemsInCart = 100;

…đấu với

function maxNumberOfItemsInCart[statusPoints] {
  return statusPoints * 10;
}

Ý định rõ ràng ngay từ đầu dòng

Nhưng có thể bạn đang sử dụng trình chỉnh sửa mã có một số đầu mối mã màu. Có thể bạn là người đọc tốc độ. Có lẽ bạn không nghĩ rằng đó là một vấn đề lớn

tôi nghe bạn. Sự căng thẳng trông vẫn khá gợi cảm

Trên thực tế, nếu đây là lý do duy nhất của tôi, tôi có thể đã tìm ra cách thuyết phục bản thân rằng đó là một sự đánh đổi xứng đáng.

Nhưng đó không phải là lý do duy nhất của tôi…

Lợi thế #2. Thứ tự khai báo == thứ tự thực hiện

Lý tưởng nhất là tôi muốn khai báo mã của mình ít nhiều theo thứ tự mà tôi mong đợi nó sẽ được thực thi

Đây là showstopper đối với tôi. bất kỳ giá trị nào được khai báo bằng từ khóa const đều không thể truy cập được cho đến khi thực thi đạt đến giá trị đó

Chuẩn bị cho biệt ngữ hoa mỹ để chứng minh rằng tôi biết những gì tôi đang nói về [hy vọng]

Cảnh báo đúng. Tôi chuẩn bị đi tất cả, "Giáo sư JavaScript" về bạn. Điều duy nhất bạn cần hiểu trong tất cả các thuật ngữ dưới đây là bạn không thể sử dụng const cho đến khi bạn khai báo nó

Đoạn mã sau sẽ báo lỗi

________số 8

Điều này là do, khi công cụ JavaScript đọc mã, nó sẽ liên kết “sayHelloTo”, nhưng nó sẽ không khởi tạo nó

Tất cả các khai báo trong JavaScript đều bị ràng buộc sớm, nhưng chúng được khởi tạo khác nhau

Nói cách khác, JavaScript liên kết khai báo của “sayHelloTo” — đọc nó trước và tạo một khoảng trống trong bộ nhớ để giữ giá trị của nó — nhưng nó không đặt “sayHelloTo” thành bất kỳ thứ gì cho đến khi đạt đến nó trong quá trình thực thi

Khoảng thời gian giữa “sayHelloTo” bị ràng buộc và “sayHelloTo” được khởi tạo được gọi là vùng chết tạm thời [TDZ]

Nếu bạn đang sử dụng ES2015 trực tiếp trong trình duyệt [trái ngược với việc chuyển mã xuống ES5 bằng thứ gì đó như Babel], đoạn mã sau thực sự cũng gây ra lỗi

if[thing] { 
  console.log[thing];
}
const thing = 'awesome thing';

Đoạn mã trên, được viết bằng “var” thay vì “const”, sẽ không gây ra lỗi vì vars được khởi tạo dưới dạng không xác định khi chúng bị ràng buộc, trong khi const hoàn toàn không được khởi tạo tại thời điểm bị ràng buộc. Nhưng tôi lạc đề…

Các câu lệnh chức năng không gặp phải sự cố TDZ này. Sau đây là hoàn toàn hợp lệ

const helloWorld = [] => 'Hello World!';

0

Điều này là do các câu lệnh hàm được khởi tạo ngay khi chúng bị ràng buộc — trước khi bất kỳ mã nào được thực thi

Vì vậy, bất kể khi nào bạn khai báo hàm, nó sẽ có sẵn trong phạm vi từ vựng của nó ngay khi mã bắt đầu thực thi

Giáo sư JavaScript, ra ngoài

Những gì tôi vừa mô tả ở trên buộc chúng ta phải viết mã có vẻ lộn ngược. Chúng ta phải bắt đầu với chức năng cấp thấp nhất và tiến dần lên

Bộ não của tôi không hoạt động theo cách đó. Tôi muốn bối cảnh trước các chi tiết

Hầu hết mã được viết bởi con người. Vì vậy, có nghĩa là thứ tự hiểu biết của hầu hết mọi người gần như tuân theo thứ tự thực thi của hầu hết mã

Trên thực tế, sẽ không hay sao nếu chúng tôi có thể cung cấp một bản tóm tắt nhỏ về API của mình ở đầu mã của chúng tôi?

Kiểm tra mô-đun giỏ hàng [hơi giả tạo] này…

const helloWorld = [] => 'Hello World!';

1

Với các biểu thức hàm, nó sẽ giống như…

const helloWorld = [] => 'Hello World!';

2

Hãy tưởng tượng đây là một mô-đun lớn hơn với nhiều chức năng nhỏ bên trong. Bạn thích cái nào?

Có những người sẽ lập luận rằng việc sử dụng thứ gì đó trước khi bạn tuyên bố nó là không tự nhiên và có thể gây ra những hậu quả không lường trước được. Thậm chí có những người cực kỳ thông minh đã nói những điều như vậy

Đó chắc chắn là một ý kiến ​​- không phải là sự thật - rằng cách này tốt hơn cách kia

Nhưng nếu bạn hỏi tôi. Mã là giao tiếp. Mã tốt kể một câu chuyện

Tôi sẽ để các trình biên dịch và bộ chuyển đổi, bộ rút gọn và bộ xấu xí xử lý việc tối ưu hóa mã cho máy

Tôi muốn tối ưu hóa mã của mình để con người hiểu

Tuy nhiên, những chức năng mũi tên đó thì sao?

Đúng. Vẫn gợi cảm và vẫn tuyệt vời

Tôi thường sử dụng các hàm mũi tên để chuyển một hàm nhỏ làm giá trị cho hàm bậc cao hơn. Tôi sử dụng các chức năng mũi tên với lời hứa, với bản đồ, với bộ lọc, với giảm. Họ là những con ong đầu gối, bạn của tôi

Vài ví dụ

const helloWorld = [] => 'Hello World!';

3

Tôi đã sử dụng một vài tính năng JavaScript mới khác trong bài viết này. Nếu bạn muốn tìm hiểu thêm về tiêu chuẩn JavaScript mới nhất [ES2015] và tất cả các tính năng thú vị mà nó cung cấp, bạn nên tải miễn phí hướng dẫn bắt đầu nhanh của tôi

Mục tiêu của tôi là luôn giúp đỡ càng nhiều nhà phát triển càng tốt, nếu bạn thấy bài viết này hữu ích, vui lòng nhấn nút ❤ [khuyến nghị] để những người khác sẽ thấy nó. Cảm ơn

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

hóa đơn chua

DevMastery. com. Tư vấn. Giáo viên

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có việc làm với tư cách là nhà phát triển. Bắt đầu