Hiểu phạm vi biến trong JavaScript

Phạm vi là bối cảnh thực thi của một biến hoặc hàm. Nó xác định dữ liệu mà nó có quyền truy cập. Khái niệm này có vẻ khá đơn giản, nhưng có một số tinh tế quan trọng.

JavaScript theo truyền thống có hai loại phạm vi: phạm vi global và phạm vi local . Mục đích của phạm vi là cung cấp quyền truy cập vào tất cả các biến và hàm mà bối cảnh thực thi có quyền truy cập.

Phạm vi global

Khi một biến được khai báo bên ngoài bất kỳ hàm nào, nó sẽ tự động thuộc phạm vi toàn cục và có thể được truy cập từ bất kỳ đâu trong chương trình, có thể là một hàm hoặc bất kỳ khối nào. Ngoài ra, nếu muốn, trong trình duyệt, ta có thể tạo một biến toàn cục bằng cách khai báo nó là window.newVariable tại bất kỳ vị trí nào trong chương trình.

const nestAnimal = 'crocodilian';   // belongs to the Global scope

function getNestInfo(){
  window.eggs = 5;     // as well belongs to the Global scope
}

Trên thực tế, trong trình duyệt, các biến trong phạm vi toàn cục thuộc về đối tượng window global .

JavaScript là một ngôn ngữ được thu thập rác, nó giữ sẵn tất cả các biến trong khi thực thi chương trình trong ngữ cảnh và loại bỏ sau đó. Hãy xem xét vòng đời của biến. Biến tồn tại trong quá trình thực thi hàm. Biến được sử dụng bên trong hàm và sau đó hàm kết thúc. Tại thời điểm đó, biến này không còn cần thiết nữa, vì vậy bộ nhớ của nó có thể được lấy lại và JavaScript xóa biến này khỏi bộ nhớ. Nhưng các biến toàn cục vẫn ở trong bộ nhớ suốt thời gian ứng dụng chạy và làm tắc nghẽn nó, điều này làm chậm chương trình, cũng có thể gây ra xung đột tên không mong muốn.

Điều đó nghĩa là , khi nào có thể, bạn nên tránh xác định các biến toàn cục. Chúng chỉ thực sự cần thiết trong những trường hợp rất cụ thể, vì vậy hãy cẩn thận với điều này.

Phạm vi local

ES6 đã giới thiệu các biến phạm vi khối bằng cách sử dụng các từ khóa const và let . Với những từ khóa này, phạm vi local được tạo và tồn tại trong khối trong cùng bao quanh nó. Nó có thể là một chức năng, for vòng lặp, while khối, if khối vv biến scoped tại local này có thể được chỉ được truy cập từ bên trong khối đó.

Mỗi khối có ngữ cảnh thực thi riêng để xác định dữ liệu mà nó có quyền truy cập, cũng như cách nó hoạt động. Khi mã được thực thi trong một ngữ cảnh, một chuỗi phạm vi được tạo. Nó bao gồm tất cả các biến và hàm được khai báo bên trong khối đó, sau đó là dữ liệu từ ngữ cảnh chứa (cha), v.v. Mô hình này tiếp tục cho đến khi đạt được bối cảnh global .

Hãy xem một ví dụ:

let caymanMood = 'calm';

function changeMood(newMood){
  if (caymanMood === 'calm'){
    caymanMood = newMood;
  } else {
    caymanMood = 'calm';
  }
}

changeMood('happy');

Hàm changeMood có một chuỗi phạm vi với hai đối tượng trong đó: đối tượng biến của chính nó (đối tượng đối tượng newMood ) và đối tượng biến của ngữ cảnh toàn cục caymanMood . Hàm có quyền truy cập caymanMood vì nó là một phần của chuỗi phạm vi của nó.

Tăng cường chuỗi phạm vi

Có thể tăng cường chuỗi phạm vi bên cạnh bối cảnh thực thi global và local . Ta có thể làm điều này theo hai cách.

Điểm 1 : A với câu lệnh
Điểm 2 : Khối catch trong câu lệnh try...catch .

function buildNest() {
  const assets = 'grass';
  with(reptilian){
    const building = ability + assets;
  }
  return building;
}

with tạo ra một đối tượng được thêm vào phía trước của chuỗi phạm vi, nhưng vấn đề là khi bạn đọc mã, bạn không thể biết chắc chắn đối tượng nào sẽ được sửa đổi. Nó sẽ là ability biến toàn cục hay biến trong ngữ cảnh này là reptilian.ability . Vì vậy không thể đảm bảo việc thực thi đúng chương trình. Tài liệu web MDN không khuyến khích sử dụng câu lệnh with vì nó có thể là nguồn gây ra các lỗi khó hiểu và các vấn đề tương thích.

Câu lệnh catch tạo một đối tượng biến mới có chứa một khai báo cho đối tượng lỗi được ném ra và đối tượng lỗi này được thêm vào phía trước của chuỗi phạm vi.

Kết thúc

Với điều này, bây giờ bạn sẽ hiểu rõ hơn một chút về cách phạm vi local và global hoạt động trong JavaScript và cách dựa vào ngữ cảnh local gần nhất có thể là một ý tưởng hay để viết mã dễ đọc và dễ bảo trì.

Tags:

Các tin liên quan

Hiểu điều này, ràng buộc, gọi và áp dụng trong JavaScript
2019-09-30
Sử dụng phương pháp cắt chuỗi trong JavaScript
2019-09-16
Những lý do tại sao bạn không bao giờ nên sử dụng eval () trong JavaScript
2019-08-26
Toàn cầu mới Thuộc tính JavaScript này
2019-08-08
Vẽ hình với API Canvas JavaScript
2019-08-05
clientWidth và clientHeight trong JavaScript
2019-07-24
Các phương pháp hay nhất để gỡ lỗi mã JavaScript trong trình duyệt
2019-07-05
Tối ưu hóa Tuyên bố chuyển đổi trong JavaScript
2019-06-18
Làm việc với Singletons trong JavaScript
2019-04-19
Cách sử dụng Axios với JavaScript
2019-04-05