Các chủ đề chính trong JavaScript là gì?

Năm là 2021. Toàn bộ trang web bị JavaScript chiếm giữ. Mọi người đang chạy theo các thư viện và khuôn khổ. Không biết cách hoạt động cơ bản của javascript. Và nói rằng javascript thật tệ. Cái quái gì vậy?

Tôi sẽ không nói dối tôi đã làm như vậy một năm trước

Tôi thấy mọi thứ rất khó hiểu ngay từ đầu. Sau đó, tôi thấy hầu hết mọi người đều cảm thấy như vậy. Bởi vì nó có một số hành vi kỳ lạ

Khi bạn chọn C/C++ làm người mới bắt đầu và cố gắng học JavaScript sau này, tôi nghĩ điều đó xảy ra với tất cả mọi người

JavaScript hoạt động khác với các ngôn ngữ lập trình khác

Vì vậy, trong bài viết này, tôi sẽ cố gắng đặt mọi thứ bằng tiếng Anh đơn giản để làm cho mọi thứ rõ ràng

Theo Khảo sát StackOverflow 2020, JavaScript là ngôn ngữ lập trình số 1

Từ Khảo sát StackOverflow 2020

Dù bạn là Nhà phát triển giao diện người dùng hay Nhà phát triển phụ trợ, việc biết các chủ đề này trong JavaScript sẽ giúp bạn trở thành nhà phát triển JS tốt hơn

1. Phạm vi

Nói một cách đơn giản, Phạm vi trong JavaScript chỉ là một hộp ranh giới cho các biến, hàm và đối tượng. Cho dù bạn có thể truy cập các biến đó hay không. Trong JavaScript, bạn đang ở phạm vi gốc i. e. cửa sổ và toàn cầu trong Nodejs

Các biến về cơ bản nằm trong hai phạm vi. địa phương và toàn cầu

Cục bộ có nghĩa là phạm vi nằm trong bất kỳ chức năng nào. Toàn cầu có nghĩa là bạn có thể truy cập chúng từ bất cứ đâu

Hãy xem một ví dụ

Tuy nhiên, bạn có thể truy cập một biến được xác định trong phạm vi cục bộ từ phạm vi toàn cầu cho đến khi nó được trả về từ các hàm

Hãy thử nó trong trình duyệt

Nếu bạn chạy đoạn mã trên trong trình duyệt. Bạn có thể truy cập nó thông qua đối tượng cửa sổ như thế này

2. IIFE

IIFE là viết tắt của Biểu thức chức năng được gọi ngay lập tức. Đúng như tên gọi, nó ngay lập tức được gọi khi một hàm được định nghĩa. Nó còn được gọi là chức năng ẩn danh Tự thực hiện

cú pháp

Hãy tạo một ví dụ về IIFE

Hãy nhớ gán IIFE cho một biến có nghĩa là bạn đang gán giá trị mà hàm IIFE trả về, không phải bản thân định nghĩa hàm

Và biến được khai báo bên trong hàm IIFE không thể truy cập được từ bên ngoài nó

3. cẩu

Hoisting là hành vi của JavaScript đưa tất cả các khai báo lên đầu phạm vi hiện tại. Nói cách khác, đó là một cơ chế đưa khai báo biến và hàm lên đầu phạm vi của chúng trước khi thực thi

Trong JavaScript, các biến có thể được sử dụng trước khi nó được khai báo

Để hiểu hoisting, bạn cần biết cách tạo và các giai đoạn thực thi hoạt động trong javascript

Trong ví dụ trên, chúng ta đã sử dụng biến

let a = 20;
let b = "20";
a==b //true

2 trước khi nó được khai báo ở dòng 7

Hãy xem một ví dụ khác với một chức năng, để rõ ràng

Một lần nữa trong ví dụ trên, chúng ta đã gọi hàm trước khi nó được định nghĩa. Điều này hoạt động tốt vì đây là cách thực thi ngữ cảnh của javascript hoạt động

4. Khép kín

Trong JavaScript, bao đóng là một hàm bên trong có quyền truy cập vào các biến của hàm bên ngoài. Nó có ba phạm vi

1. Nó có quyền truy cập vào phạm vi của chính nó [các biến được khai báo trong phạm vi]
2. Truy cập vào các biến của chức năng bên ngoài
3. Truy cập vào các biến toàn cầu

Hãy xem một ví dụ

Trong ví dụ,

let a = 20;
let b = "20";
a==b //true

3 in ra giá trị của một biến được khai báo trong hàm cha là

let a = 20;
let b = "20";
a==b //true

4

5. Chức năng gọi lại

Hàm gọi lại là một hàm được truyền dưới dạng đối số trong một hàm khác và sau đó được gọi bên trong hàm bên ngoài đó

Hãy xem một ví dụ

Ví dụ trên là một cuộc gọi lại không đồng bộ. Nó được gọi ngay lập tức khi chức năng bên ngoài được gọi

Ngày nay, một cuộc gọi lại không được ưa thích trong JavaScript vì có một thứ gọi là Promise. Tại một số điểm, bạn sẽ gặp phải địa ngục gọi lại nếu bạn sử dụng nó

6. lời hứa

Một lời hứa trong JavaScript là một đối tượng. Nó trả về một giá trị cuối cùng là hoàn thành hoặc thất bại

Tôi đấu tranh rất nhiều với Promises

Một Promise có các trạng thái sau

• chưa giải quyết. trạng thái ban đầu, không hoàn thành cũng không bị từ chối
• hoàn thành. có nghĩa là hoạt động đã được hoàn thành thành công
• vật bị loại bỏ. có nghĩa là hoạt động thất bại

Một ví dụ đầy hứa hẹn

7. không đồng bộ/chờ đợi

async/await đã được giới thiệu trong ECMAScript 2017. Nó chỉ là đường cú pháp cho lời hứa. Chỉ có bấy nhiêu thôi. Nó làm cho việc viết lời hứa dễ dàng hơn

Từ khóa trước một chức năng làm cho nó trả về một lời hứa

Bạn cũng có thể sử dụng chức năng mũi tên nếu muốn. Chúng ta sẽ nói về arrow function trong phần ES6 sau

Từ khóa

let a = 20;
let b = "20";
a==b //true

5 trước một chức năng chờ đợi lời hứa

Hãy xem với một ví dụ

let a = 20;
let b = "20";
a==b //true

5 từ khóa khiến phải chờ giải quyết lời hứa. Trong trường hợp này, chúng tôi đã đặt thời gian trong 3 giây. Sau 3 giây, lời hứa sẽ được giải quyết

8. Nguyên mẫu JavaScript

Tất cả các đối tượng JavaScript kế thừa các thuộc tính và phương thức từ nguyên mẫu

let a = 20;
let b = "20";
a==b //true

7 đối tượng kế thừa từ

let a = 20;
let b = "20";
a==b //true

8

let a = 20;
let b = "20";
a==b //true

0 đối tượng kế thừa từ

let a = 20;
let b = "20";
a==b //true

1

let a = 20;
let b = "20";
a==b //true

2 nằm trên cùng của chuỗi thừa kế nguyên mẫu

9. ES6 — JavaScript mới

ES6 là bản sửa đổi thứ hai trong javascript. Nó giới thiệu rất nhiều tính năng mới. Hãy thảo luận về một số trong số họ ở đây

a. Hãy để & Const

Trước ES6,

let a = 20;
let b = "20";
a==b //true

3 là cách chúng tôi sử dụng để khai báo biến. Chúng tôi vẫn làm trong một số trường hợp. Nhưng, nó có vấn đề với cẩu hoặc phạm vi

Vì vậy, chúng tôi cần một cách tiếp cận khác để khai báo các biến

let a = 20;
let b = "20";
a==b //true

4 là phạm vi khối. Và vấn đề đã được giải quyết với

let a = 20;
let b = "20";
a==b //true

3

Khai báo

let a = 20;
let b = "20";
a==b //true

6 cũng nằm trong phạm vi khối. Chúng không thể được khai báo lại hoặc cập nhật

b. Chức năng mũi tên

Hàm mũi tên chỉ là một cách ưa thích để viết hàm trong javascript. Chỉ có bấy nhiêu thôi

c. Lớp JavaScript

Mặc dù JavaScript là tốt nhất cho lập trình chức năng, nhưng bạn có thể viết kiểu mã hướng đối tượng bằng cách sử dụng

let a = 20;
let b = "20";
a==b //true

7. Nếu bạn đã quen thuộc với các lập trình hướng đối tượng khác như Java, C++, bạn sẽ thấy thoải mái với cách tiếp cận này

Một ví dụ đơn giản của một lớp được đưa ra dưới đây

d. lời hứa

Promise cũng là một trong những tính năng thú vị nhất được giới thiệu trong ES6, mà chúng ta đã thảo luận trước đó trong phần Promise

Có rất nhiều tính năng thú vị trong ES6 và các phiên bản mới hơn. khám phá bản thân

10. DOM

Nếu bạn làm front-end developer thì hiểu Browser DOM là nhất. Bạn phải hiểu cách thức hoạt động của DOM

DOM là viết tắt của Mô hình đối tượng tài liệu. Nó là một giao diện cho các tài liệu HTML và XML

Nó là một biểu diễn dữ liệu có cấu trúc của các đối tượng của trang web hoặc nội dung trang web

Hình ảnh từ w3schools

Bạn có thể tìm hiểu thêm về DOM và DOM API tại đây

11. Mẫu mô-đun

Một trong những mẫu được sử dụng rộng rãi trong JavaScript là mẫu Mô-đun. Nó bao bọc tập hợp các biến và hàm trong một phạm vi duy nhất

Bạn có thể tìm hiểu thêm về các mẫu thiết kế trong bài viết này

12. cà ri

Cà ri là một chủ đề nâng cao trong javascript. Nó cũng có thể được thực hiện trong các ngôn ngữ lập trình khác

13. Phương thức JavaScript

JavaScript có rất nhiều phương thức tích hợp rất tiện dụng ở nhiều nơi. Các phương thức mảng, phương thức ngày, phương thức chuỗi để nêu một số. Bạn cần phải biết hầu hết trong số họ. Bạn có thể tìm tài liệu tham khảo JS tại đây

14. Giá trị so với tham chiếu

Javascript luôn chuyển theo giá trị. Tuy nhiên, nếu bạn truyền một đối tượng cho một hàm, thì “giá trị” thực sự là một tham chiếu đến đối tượng đó, vì vậy hàm có thể sửa đổi các thuộc tính của đối tượng đó nhưng không khiến biến bên ngoài hàm trỏ đến một số đối tượng khác. - từ đây

15. hủy diệt

Đó là một biểu thức JavaScript cho phép giải nén các giá trị từ mảng hoặc thuộc tính từ các đối tượng thành các biến riêng biệt

16. Cú pháp trải rộng và nghỉ ngơi

Cú pháp trải rộng [

let a = 20;
let b = "20";
a==b //true

8] cho phép mở rộng một lần lặp, chẳng hạn như biểu thức mảng hoặc chuỗi ở những nơi không có hoặc nhiều đối số [đối với lệnh gọi hàm] hoặc phần tử [đối với ký tự mảng] hoặc một biểu thức đối tượng được mở rộng ở những nơi mà

17. máy phát điện

Đối tượng Trình tạo được trả về bởi hàm trình tạo và Nó không thể tự khởi tạo. Bạn có thể tìm thêm tại đây

18. “=” so với “==” so với “===”

“=” được sử dụng để gán giá trị cho các biến

// assign variable x of value 10
const x = 10;

“==” được sử dụng để so sánh hai giá trị. Nó biến đổi giá trị của toán hạng trước khi so sánh

let a = 20;
let b = "20";
a==b //true

=== được sử dụng để so sánh nghiêm ngặt. Trả về false nếu các giá trị không cùng loại

let a = 20;
let b = "20";
a==b //true

1

Nếu bạn vẫn còn bối rối, bạn có thể tìm thấy hướng dẫn đầy đủ với các ví dụ tại đây

19. Giao tiếp không đồng bộ

Không đồng bộ cung cấp cho bạn khả năng tải trang động mà không cần làm mới trình duyệt. Nó còn được gọi là AJAX. Các ứng dụng web hiện đại sử dụng nhiều cách tiếp cận không đồng bộ. Vì vậy, bạn nên làm chủ nó

20. Động cơ V8 & Vòng lặp sự kiện

Từ trang web của họ

V8 là công cụ WebAssembly và JavaScript hiệu suất cao mã nguồn mở của Google, được viết bằng C++. Nó được sử dụng trong Chrome và trong Node. js, trong số những người khác. Nó triển khai ECMAScript và WebAssembly, đồng thời chạy trên Windows 7 trở lên, macOS 10. 12+ và hệ thống Linux sử dụng bộ xử lý x64, IA-32, ARM hoặc MIPS. V8 có thể chạy độc lập hoặc có thể nhúng vào bất kỳ ứng dụng C++ nào

Tìm hiểu mọi thứ về Vòng lặp sự kiện trong bài nói chuyện này từ JSConf EU 2014

Thưởng. Phiên bản JavaScript

Bạn có biết? . Và các phiên bản của nó được viết tắt là ES1, ES2, ES3, ES4, ES5, ES6…

ES6 được giới thiệu vào năm 2015. Kể từ đó, các phiên bản mới được đặt tên theo năm

E. g. ECMAScript 2016, ECMAScript 2017, ECMAScript 2018, v.v.

Tôi đã đề cập đến phiên bản ở đây như một điểm thưởng vì đôi khi các trình duyệt hiện đại không hỗ trợ phiên bản mới nhất. Mặc dù các trình duyệt hiện đại như Chrome, Firefox, hãy hỗ trợ phiên bản mới hơn càng sớm càng tốt

Nếu bạn vẫn cần chuyển đổi phiên bản mới hơn của mình như ES6 sang ES5 hoặc các phiên bản tương thích ngược [hầu hết tất cả các trình duyệt đều hỗ trợ], thì có rất nhiều công cụ [e. g. babel] có sẵn để hoàn thành công việc

kết thúc

Hầu như tất cả các trang web hoặc ứng dụng web hiện đại đều sử dụng JavaScript theo một cách nào đó. Đó là lý do tại sao nhiều người nghĩ rằng nó là vua của web. JavaScript ở khắp mọi nơi. Nó chạy các ứng dụng khách của bạn, nó chạy các máy chủ quan trọng của bạn và các mô hình IoT, Máy học, v.v.

Ngày nay, chúng ta có thể xây dựng các ứng dụng di động bằng cách sử dụng các công nghệ như React-Native — Một khung di động được xây dựng dựa trên React[Thư viện JavaScript]

JavaScript là một ngôn ngữ khổng lồ. Tôi chưa bao giờ gặp một người biết mọi thứ về JavaScript. Có lẽ nó chỉ là một huyền thoại

Bài viết này chỉ là bề nổi của từng chủ đề. Bạn cần đi sâu vào từng chủ đề để có thể thoải mái

Tất cả những gì tôi đang nói với bạn là làm cho các nguyên tắc cơ bản của bạn trở nên mạnh mẽ. Nếu không, bạn sẽ kết thúc như thế này

Meme từ Internet

Cười đùa

Ít nhất bạn sẽ bị lỗi Không xác định, Tham chiếu, v.v. 😅

Cuối cùng, nếu bạn nghĩ rằng có chủ đề quan trọng nào mà tôi đã bỏ lỡ trong bài viết, vui lòng cho tôi biết trong phần bình luận

Tôi biết JavaScript là một ngôn ngữ rộng lớn. Tôi chưa bao giờ gặp một người nào biết mọi thứ về JavaScript. Tất cả những gì bạn cần làm là tiếp tục học hỏi và không ngừng khám phá các tính năng tuyệt vời mới

Nếu bạn thích đọc, hãy cân nhắc cho tôi 👏👏👏, điều này sẽ thúc đẩy tôi mang đến những nội dung chất lượng hơn trong tương lai

Có bao nhiêu chủ đề trong JavaScript?

Chủ đề khó nhất trong JavaScript là gì?

3 loại chức năng trong JavaScript là gì?

Phần quan trọng nhất của JavaScript là gì?