Nâng Cao JavaScript - Kỳ 6: Hiểu Về Ngữ Cảnh Thực Thi, Hàm Bất Đồng Bộ Và Giá Trị This

Có một câu nói rất thú vị: 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 trong những ngôn ngữ lập trình gây tranh luận nhất. Mặc dù lý thuyết có thể dễ hiểu, việc áp dụng trên thực tế lại không đơn giản. Chính vì thế, trong bài viết này, chúng ta sẽ cùng nhau khám phá sâu hơn từng khía cạnh của JavaScript thông qua các ví dụ cụ thể.

Như thường lệ, 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 của bạn trong phần bình luận. Tôi rất cảm ơn sự ủng hộ của mọi người để tôi có thêm động lực tiếp tục viết series này! 🤗

1. Ngữ Cảnh Thực Thi Global Trong JavaScript

Ngữ cảnh thực thi global của JavaScript sẽ tạo ra hai thứ quan trọng cho chúng ta: đối tượng toàn cục (global object), và từ khóa "this".

• A: Đúng
• B: Sai
• C: Còn tùy

Đáp án: A

1.1 Ngữ Cảnh Thực Thi Global

Ngữ cảnh thực thi cơ bản của JavaScript là global, nơi mà biến và hàm được khai báo, cho phép chúng ta truy cập từ bất cứ đâu trong mã nguồn.

1.2 Global Object và Từ Khóa "this"

Trong ngữ cảnh global:

1. Global object: Đối tượng này chứa tất cả các biến và hàm toàn cục. Trong trình duyệt, đó là window. Trong Node.js, nó là global.
2. Từ khóa "this": Trong ngữ cảnh global, this trỏ đến chính global object.

1.3 Tóm Lại

Ngữ cảnh thực thi global tạo ra global object và từ khóa "this", cho phép truy cập biến toàn cục. Tuy nhiên, cần sử dụng biến cục bộ để tránh xung đột và khó bảo trì.

2. Sử Dụng Lệnh Continue Trong Vòng Lặp

Khi thực hiện đoạn mã sau:

for (let i = 1; i < 5; i++) {
  if (i === 3) continue;
  console.log(i);
}

• A: 1``2
• B: 1``2``3
• C: 1``2``4
• D: 1``3``4

Đáp án: C

2.1 Lệnh Continue

Lệnh continue được sử dụng để bỏ qua vòng lặp hiện tại và tiếp tục với vòng tiếp theo nếu điều kiện là true.

3. Thêm Phương Thức Vào Prototype Của String

Đoạn mã dưới đây sẽ có kết quả gì?:

String.prototype.giveLydiaPizza = () => {
  return "Just give Lydia pizza already!";
};

const name = "Lydia";

console.log(name.giveLydiaPizza())

• A: "Just give Lydia pizza already!"
• B: TypeError: not a function
• C: SyntaxError
• D: undefined

Đáp án: A

4. Truy Xuất Thuộc Tính Của Object

Khi thực hiện mã sau:

const a = {};
const b = { key: "b" };
const c = { key: "c" };

a[b] = 123;
a[c] = 456;

console.log(a[b]);

• A: 123
• B: 456
• C: undefined
• D: ReferenceError

Đáp án: B

5. Thứ Tự Thực Thi Hàm Bất Đồng Bộ

Output của đoạn mã sau sẽ là gì?:

const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"));
const baz = () => console.log("Third");

bar();
foo();
baz();

• A: First``Second``Third
• B: First``Third``Second
• C: Second``First``Third
• D: Second``Third``First

Đáp án: B

6. Giá Trị Của this Trong Arrow Function

Output của đoạn mã sẽ là gì?:

const shape = {
  radius: 10,
  diameter() {
    return this.radius * 2;
  },
  perimeter: () => 2 * Math.PI * this.radius,
};

console.log(shape.diameter());
console.log(shape.perimeter());

• A: 20 và 62.83185307179586
• B: 20 và NaN
• C: 20 và 63
• D: NaN và 63

Đáp án: B

Trong bài viết này, bạn đã học được cách hiểu ngữ cảnh thực thi, sử dụng lệnh continue, thêm phương thức vào prototype, truy xuất thuộc tính của object, thứ tự thực thi hàm bất đồng bộ và giá trị của this trong arrow function. Hy vọng kiến thức này sẽ giúp ích cho bạn trong việc lập trình JavaScript.
source: viblo