Phạm vi từ vựng trong JavaScript – Phạm vi chính xác trong JS là gì?


Thuật ngữ “phạm vi từ vựng” thoạt nhìn có vẻ khó nắm bắt. Nhưng thật hữu ích khi hiểu ý nghĩa của từng từ.

Vì vậy, bài viết này sẽ giải thích phạm vi từ vựng bằng cách trước tiên kiểm tra ý nghĩa của “từ vựng” và “phạm vi”.

Vì vậy, hãy bắt đầu bằng cách hiểu thuật ngữ “phạm vi”.

Phạm vi chính xác là gì?

Phạm vi đề cập đến diện tích trong đó một mục (chẳng hạn như hàm hoặc biến) hiển thị và có thể truy cập được bằng mã khác.

Ghi chú:

  • Phạm vi có nghĩa là khu vực, không gian, hoặc khu vực.
  • Phạm vi toàn cầu có nghĩa là không gian toàn cầu hoặc một không gian công cộng.
  • phạm vi cục bộ có nghĩa là một khu vực địa phương hoặc một khu vực hạn chế.

Đây là một ví dụ:

// Define a variable in the global scope:
const fullName = "Oluwatobi Sofela";

// Define nested functions:
function profile() {
  function sayName() {
    function writeName() {
      return fullName;
    }
    return writeName();
  }
  return sayName();
}

Hãy dùng thử trên StackBlitz

Trong đoạn mã trên, chúng tôi đã xác định fullName biến trong phạm vi toàn cầu. Điều này có nghĩa là nó hiển thị và có thể truy cập được trên toàn cầu đối với tất cả các mã trong tập lệnh.

Nhưng chúng tôi đã xác định writeName() trong sayName() chức năng, do đó, nó được phạm vi cục bộ để sayName().

Nói cách khác, writeName() được hiển thị cục bộ và chỉ có thể truy cập vào mã trong sayName() chức năng.

Hãy nhớ rằng bất cứ khi nào writeName() chức năng được gọi, máy tính sẽ không phải đi thẳng đến phạm vi toàn cầu để gọi fullName Biến đổi. Thay vào đó, nó phải tuần tự đi qua chuỗi phạm vi để tìm kiếm fullName.

Chuỗi phạm vi là gì?

Một chuỗi phạm vi đề cập đến duy nhất không gian tồn tại từ phạm vi nơi một biến có gọi điện đến phạm vi toàn cầu.

Đây là một ví dụ:

// Define a variable in the global scope:
const fullName = "Oluwatobi Sofela";

// Define nested functions:
function profile() {
  function sayName() {
    function writeName() {
      return fullName;
    }
    return writeName();
  }
  return sayName();
}

Trong đoạn mã trên, hãy quan sát rằng fullName biến được gọi từ writeName() phạm vi của chức năng.

Do đó, chuỗi phạm vi tồn tại từ lệnh gọi của biến đến phạm vi toàn cầu là:

phạm vi writeName() —> phạm vi sayName() —> phạm vi profile() —> phạm vi toàn cục

Nói cách khác, có bốn (4) khoảng trống từ fullNamephạm vi gọi của nó thành phạm vi từ vựng của nó (các phạm vi toàn cầu trong trường hợp này).

Ghi chú: Phạm vi toàn cầu là liên kết cuối cùng trong chuỗi phạm vi của JavaScript.

Chuỗi phạm vi hoạt động như thế nào?

Chuỗi phạm vi của JavaScript xác định thứ bậc của các vị trí mà máy tính phải đi qua — lần lượt đến vị trí khác — để tìm phạm vi từ vựng (gốc) của biến cụ thể được gọi.

Đọc thêm  Hàm gọi lại trong JavaScript là gì? Hướng dẫn ví dụ về cuộc gọi lại JS

Chẳng hạn, hãy xem xét đoạn mã dưới đây:

// Define a variable in the global scope:
const fullName = "Oluwatobi Sofela";

// Define nested functions:
function profile() {
  function sayName() {
    function writeName() {
      return fullName;
    }
    return writeName();
  }
  return sayName();
}

Trong đoạn mã trên, bất cứ khi nào profile() chức năng được gọi, trước tiên máy tính sẽ gọi hàm sayName() chức năng (là mã duy nhất trong profile() chức năng).

Thứ hai, máy tính sẽ gọi writeName() chức năng (là mã duy nhất trong sayName() chức năng).

Tại thời điểm này, vì mã trong writeName() hướng dẫn máy tính gọi và trả lại fullName nội dung của biến, máy tính sẽ gọi fullName. Nhưng nó sẽ không đi trực tiếp đến phạm vi toàn cầu để gọi fullName.

Thay vào đó, máy tính phải đi từng bước một thông qua chuỗi phạm vi để tìm kiếm phạm vi từ vựng của fullName.

Vì vậy, đây là các bước tuần tự mà máy tính phải thực hiện để xác định vị trí fullNamephạm vi từ vựng của:

  1. Đầu tiên, máy tính sẽ kiểm tra xem fullName đã được xác định cục bộ trong writeName() chức năng. Nhưng nó sẽ không tìm thấy fullName định nghĩa ở đó, vì vậy nó chuyển sang phạm vi tiếp theo để tiếp tục nhiệm vụ của mình.
  2. Thứ hai, máy tính sẽ tìm kiếm fullNameđịnh nghĩa của trong sayName() (không gian tiếp theo trong chuỗi phạm vi). Tuy nhiên, nó không tìm thấy nó ở đó, vì vậy nó leo lên thang để đến phạm vi tiếp theo.
  3. Thứ ba, máy tính sẽ tìm kiếm fullNameđịnh nghĩa của trong profile() chức năng. Vẫn chưa, fullName không được tìm thấy ở đó. Vì vậy, máy tính đi về phía trước để tìm kiếm fullNamephạm vi từ vựng của trong vùng tiếp theo của chuỗi phạm vi.
  4. Thứ tư, máy tính đi đến phạm vi toàn cầu (phạm vi sau đây sau profile()). May mắn thay, nó tìm thấy định nghĩa của fullName ở đó! Do đó, nó nhận được nội dung của nó ("Oluwatobi Sofela") và trả về nó.

Thời gian để thực hành với Phạm vi 🤸‍♂️🏋️‍♀️🏊‍♀️

Hãy xem xét kịch bản dưới đây. Cái nào trong ba cái fullName biến máy tính sẽ gọi?

// First fullName variable defined in the global scope:
const fullName = "Oluwatobi Sofela";

// Nested functions containing two more fullName variables:
function profile() {
  const fullName = "Tobi Sho";
  function sayName() {
    const fullName = "Oluwa Sofe";
    function writeName() {
      return fullName;
    }
    return writeName();
  }
  return sayName();
}

Máy tính sẽ gọi số thứ nhất, thứ hai hay thứ ba fullName Biến đổi?

Ghi chú: Bạn sẽ thu được nhiều lợi ích hơn từ hướng dẫn này nếu bạn tự mình thử thực hiện.

Nếu bạn gặp khó khăn, đừng nản lòng. Thay vào đó, hãy xem lại bài học và thử lại lần nữa.

Khi bạn đã cố gắng hết sức (bạn sẽ chỉ lừa dối chính mình nếu không làm vậy!), hãy tiếp tục để xem câu trả lời chính xác bên dưới.

Bạn đã nhận được nó phải không?

Trong số ba fullName các định nghĩa trình bày trong tập lệnh trên, máy tính sẽ gọi và trả về tập lệnh được xác định trong sayName() chức năng.

sayName()‘S fullName biến sẽ được gọi vì sayName() là phạm vi bên trong mà máy tính sẽ tìm thấy một fullName Định nghĩa.

Đọc thêm  Hướng dẫn về khóa đối tượng JavaScript – Cách sử dụng cặp khóa-giá trị JS

Vì vậy, khi profile() được gọi, giá trị trả về sẽ là "Oluwa Sofe".

Hãy dùng thử trên StackBlitz

Một số điều cần ghi nhớ:

  • Giả sử máy tính không tìm thấy fullNameđịnh nghĩa của trong bất kỳ phạm vi nào. Trong trường hợp như vậy, máy tính sẽ trở lại Uncaught ReferenceError: fullName is not defined.
  • Phạm vi toàn cầu luôn là phạm vi cuối cùng của bất kỳ chuỗi phạm vi JavaScript nào. Nói cách khác, phạm vi toàn cục là nơi mọi tìm kiếm sẽ kết thúc.
  • Phạm vi bên trong (con) có quyền truy cập vào phạm vi cha (bên ngoài) của nó, nhưng phạm vi bên ngoài không có quyền truy cập vào phạm vi con của nó.
    Chẳng hạn, trong đoạn trích trên, writeName() có thể truy cập mã bên trong bất kỳ phạm vi cha của nó (sayName(), profile()hoặc là phạm vi toàn cầu).
    Tuy nhiên, không phải sayName(), profile()cũng không phải phạm vi toàn cầu có thể truy cập bất kỳ writeName()mã của.

Đánh giá nhanh phạm vi cho đến nay

Phạm vi JavaScript là tất cả về không gian.

Vì vậy, lần tới khi đối tác của bạn gọi bạn đến khu vực riêng tư của họ, hãy nhớ rằng họ đang mời bạn đến khu vực riêng tư của họ 😜!

Khi bạn đến đó, hãy nhớ hỏi họ về trò chơi từ vựng hay nhất của họ…

Nhưng từ vựng nghĩa là gì, tôi nghe bạn hỏi? Hãy cùng tìm hiểu dưới đây.

Từ vựng có nghĩa là gì?

từ vựng đề cập đến định nghĩa của sự vật.

Bất cứ điều gì liên quan đến việc tạo từ, biểu thức hoặc biến được gọi là từ vựng.

Ví dụ, trò chơi xếp hình là một hoạt động từ vựng vì nó liên quan đến việc tạo ra các từ.

Ngoài ra, một người có công việc liên quan đến ngôn ngữ học (nghiên cứu ngôn ngữ) có một nghề nghiệp từ vựng.

Ghi chú: Tên gọi khác của từ điển là từ vựng. Nói cách khác, từ vựng là một từ điển trong đó các từ được liệt kê và định nghĩa.

Vì vậy, bây giờ chúng ta đã biết phạm vi và từ vựng nghĩa là gì, chúng ta có thể nói về phạm vi từ vựng.

Phạm vi từ vựng trong JavaScript là gì?

Phạm vi từ vựngĐịnh nghĩa diện tích của một biểu thức.

Nói cách khác, phạm vi từ vựng của một mục là nơi mà mục đó có tạo.

Ghi chú:

  • Một tên khác cho phạm vi từ vựng là phạm vi tĩnh.
  • Nơi một mục được gọi (hoặc được gọi) không nhất thiết phải là phạm vi từ vựng của mục đó. Thay vào đó, một mặt hàng độ nét không gian là phạm vi từ vựng của nó.

Ví dụ về phạm vi từ điển

Hãy xem xét đoạn mã dưới đây:

// Define a variable in the global scope:
const myName = "Oluwatobi";

// Call myName variable from a function:
function getName() {
  return myName;
}

Trong đoạn mã trên, lưu ý rằng chúng tôi xác định các myName biến trong phạm vi toàn cầu và gọi điện nó trong getName() chức năng.

Câu hỏi: Không gian nào trong hai không gian là myNamephạm vi từ vựng của? Đó có phải là phạm vi toàn cầu hoặc là getName() phạm vi địa phương của chức năng?

Đọc thêm  Cách sử dụng các phương thức flat() và flatMap() để làm phẳng mảng trong JavaScript

Câu trả lời: Nhớ lấy phạm vi từ vựng có nghĩa độ nét không gian – không phải không gian gọi. Vì vậy, myNamephạm vi từ vựng của là phạm vi toàn cầu bởi vì chúng tôi đã xác định myName trong môi trường toàn cầu.

Một ví dụ khác về phạm vi từ vựng

function getName() {
  const myName = "Oluwatobi";
  return myName;
}

Câu hỏi: Ở đâu myNamephạm vi từ vựng của?

Câu trả lời: Lưu ý rằng chúng tôi đã tạo và gọi myName ở trong getName(). Vì vậy, myNamephạm vi từ vựng của là getName()môi trường địa phương bởi vì getName()myNamekhông gian định nghĩa ‘s.

Phạm vi từ vựng hoạt động như thế nào?

Môi trường định nghĩa của biểu thức JavaScript xác định mã được phép truy cập nó.

Nói cách khác, chỉ mã trong phạm vi từ vựng của một mục mới có thể truy cập mục đó.

Chẳng hạn, hãy xem xét đoạn mã dưới đây:

// Define a function:
function showLastName() {
  const lastName = "Sofela";
  return lastName;
}

// Define another function:
function displayFullName() {
  const fullName = "Oluwatobi " + lastName;
  return fullName;
}

// Invoke displayFullName():
console.log(displayFullName());

// The invocation above will return:
Uncaught ReferenceError: lastName is not defined

Lưu ý rằng lời gọi của displayFullName() trong đoạn mã trên đã trả về một Uncaught ReferenceError. Đã trả về lỗi vì chỉ mã trong phạm vi từ vựng của một mục mới có thể truy cập vào mục đó.

Do đó, không phải displayFullName() chức năng cũng như mã nội bộ của nó có thể truy cập vào lastName biến vì lastName đã được xác định trong một phạm vi khác nhau.

Nói cách khác, lastNamephạm vi từ vựng của khác với phạm vi từ vựng của displayFullName().

lastNamekhông gian định nghĩa của là showLastName() trong khi displayFullName()phạm vi từ vựng của là môi trường toàn cầu.

Bây giờ, hãy xem xét đoạn mã khác dưới đây:

function showLastName() {
  const lastName = "Sofela";
  return lastName;
}

// Define another function:
function displayFullName() {
  const fullName = "Oluwatobi " + showLastName();
  return fullName;
}

// Invoke displayFullName():
console.log(displayFullName());

// The invocation above will return:
"Oluwatobi Sofela"

Trong đoạn trích trên, displayFullName() trả lại thành công "Oluwatobi Sofela" bởi vì displayFullName()showLastName() nằm trong cùng một phạm vi từ vựng.

Nói cách khác, displayFullName() có thể gọi showLastName() bởi vì cả hai chức năng đều được xác định trong phạm vi toàn cầu.

Ghi chú:

  • Trong ví dụ 2 ở trên, displayFullName() không đạt được quyền truy cập vào showLastName()‘S lastName Biến đổi.
    Thay thế, displayFullName() viện dẫn showLastName() – mà sau đó trả về nội dung của nó lastName Biến đổi.
  • Một thay thế cho phạm vi từ vựng là phạm vi động — nhưng nó hiếm khi được sử dụng trong lập trình. Chỉ một vài ngôn ngữ, như bash, sử dụng phạm vi động.

gói nó lên

Bất cứ khi nào bạn nghe thấy từ vựng, hãy nghĩ đến định nghĩa.

Vì vậy, phạm vi từ vựng của ô tô, biến số, điện thoại, chức năng hoặc áo tắm đề cập đến vùng định nghĩa của nó.

Tổng quan

Bài viết này đã thảo luận về ý nghĩa của phạm vi từ vựng trong JavaScript. Chúng tôi cũng đã xem xét lý do tại sao nó là một khái niệm lập trình quan trọng.

Cảm ơn vì đã đọc!



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status