Một Câu Nói Thú Vị Về JavaScript
"Trên đời chỉ có thứ nhiều người chửi và thứ không ai thèm dùng."
JavaScript là một ngôn ngữ lập trình nổi bật với nhiều đặc điểm thú vị nhưng cũng đôi khi gây bối rối cho lập trình viên. Mặc dù lý thuyết có thể dễ hiểu, nhưng thực hành lại là một vấn đề khác. Trong bài viết này, chúng ta sẽ đi sâu vào nhiều ví dụ cụ thể để giúp hiểu rõ hơn về JavaScript.
Loạt Bài Viết này có thể khá dài, số lượng các bài viết sẽ phụ thuộc vào độ sâu của các chủ đề. Đối với những bạn chưa đọc các bài trước về JavaScript, mình sẽ tóm tắt lại những lý thuyết quan trọng trong loạt bài này. Hãy sẵn sàng để tiếp thu kiến thức mới nhé! GÉT GÔ 🚀
Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại để lại câu hỏi dưới phần bình luận. Hoặc chỉ cần để lại một lời chào là đã giúp mình có thêm động lực để hoàn thành loạt bài này. Cảm ơn bạn rất nhiều! 🤗
1. Kế Thừa Trong JavaScript
Để kế thừa từ lớp Dog, ta có thể sử dụng mã bên dưới:
javascript
class Dog {
constructor(name) {
this.name = name;
}
};
class Labrador extends Dog {
constructor(name, size) {
super(name);
this.size = size;
}
};- Lời giải thích: Chỉ có cách 2 là đúng, bởi vì nó gọi
super(name)trước khi chúng ta có thể sử dụngthis. Nếu không, chúng ta sẽ gặp lỗi.
1.1. Kế Thừa Trong JavaScript
Kế thừa cho phép một lớp (lớp con) nhận các thuộc tính và phương thức từ một lớp khác (lớp cha), từ đó tạo ra mối quan hệ phân cấp giữa các lớp.
1.2. Từ Khóa extends và super
extends: Sử dụng để chỉ định một lớp con kế thừa từ một lớp cha.super: Gọi đến constructor của lớp cha.
1.3. Phân Tích Cách Kế Thừa
- Cách 1: Chưa gọi
super(), dẫn đến lỗi. - Cách 2: Đúng, gọi
super(name)trước khi sử dụngthis.size. - Cách 3: Lỗi do
namekhông xác định. - Cách 4: Lỗi vì không gọi
super().
1.4. Lý Do Cách 2 Là Đúng
Gọi super(name) khi khởi tạo đảm bảo rằng các thuộc tính từ lớp cha đã được khởi tạo đúng cách trước khi chúng ta khởi tạo thuộc tính mới.
2. Module Import và Thứ Tự Thực Thi
Trong đoạn mã dưới đây, kết quả sẽ là gì?
javascript
// index.js
console.log('running index.js');
import { sum } from './sum.js';
console.log(sum(1, 2));
// sum.js
console.log('running sum.js');
export const sum = (a, b) => a + b;- Lời Giải: Kết quả đúng là
running sum.js,running index.js,3. Điều này xảy ra vì ES modules thực thi code theo thứ tự đã xác định.
2.1. Module trong JavaScript
Modules giúp tổ chức và chia nhỏ code thành các phần độc lập có thể tái sử dụng.
2.2. Thứ Tự Thực Thi của Module
- Phân tích mã nguồn.
- Hoisting các câu lệnh
import. - Tải và thực thi các module đã import.
- Thực thi code trong file hiện tại.
2.3. Lợi Ích Của Module
Hiểu thứ tự thực thi sẽ giúp bạn tránh được các lỗi liên quan đến vòng phụ thuộc và tối ưu hóa hiệu năng của ứng dụng.
3. So Sánh Primitive và Object Trong JavaScript
Kết quả của đoạn mã dưới đây sẽ là gì?
javascript
console.log(Number(2) === Number(2));
console.log(Boolean(false) === Boolean(false));
console.log(Symbol('foo') === Symbol('foo'));- Lời Giải: Đáp án là
true,true,false. Điều này thể hiện cách JavaScript xử lý các giá trị primitive và symbol.
3.1. Dữ Liệu Primitive
Các giá trị primitive như number và boolean được so sánh bằng giá trị thực tế.
3.2. Dữ Liệu Symbol
Mỗi symbol là duy nhất, ngay cả khi có cùng mô tả.
4. Phương Thức padStart() Trong JavaScript
Khi thực hiện mã sau, kết quả sẽ ra sao?
javascript
const name = "Lydia Hallie";
console.log(name.padStart(13));
console.log(name.padStart(2));- Lời Giải: Đáp án là:
" Lydia Hallie","Lydia Hallie". Phương thứcpadStartsử dụng để thêm ký tự đệm vào trước chuỗi đến khi đạt được độ dài chỉ định.
4.1. Ứng Dụng Của padStart()
Phương thức này rất hữu ích trong các trường hợp cần định dạng số hoặc căn chỉnh văn bản. Ví dụ, khi in danh sách các mặt hàng với khoảng cách đồng đều.
5. Nối Chuỗi Với Emoji Trong JavaScript
Khi thực hiện đoạn mã sau, kết quả sẽ là gì?
javascript
console.log("🥑" + "💻");- Lời Giải: Đáp án là
"🥑💻". JavaScript xử lý emoji như các chuỗi bình thường và thực hiện phép nối chuỗi.
5.1. Lưu Ý Khi Làm Việc Với Emoji
Khi tính toán độ dài chuỗi có chứa emoji hoặc xử lý các ký tự Unicode, cần chú ý đến việc biểu diễn mỗi emoji bằng nhiều Unicode code points.
5.2. Ví Dụ Minh Họa Về Emoji
javascript
console.log("🥑").length; // Kết quả có thể không phải như mong đợiHiểu về xử lý emoji và các phương thức xử lý chuỗi sẽ giúp bạn tránh được nhiều lỗi không mong muốn trong JavaScript.
Hy vọng bài viết giúp bạn có cái nhìn rõ hơn về JavaScript nâng cao. Nếu bạn có thắc mắc hoặc muốn thảo luận thêm, hãy để lại câu hỏi ở phần bình luận nhé! Cảm ơn bạn đã đọc bài viết này!
source: viblo
