Cách Scoping hoạt động trong JavaScript
“Phạm vi” đề cập đến bối cảnh thực thi hiện tại mà mã của bạn có thể tham chiếu hoặc “xem” các giá trị và biểu thức. Các biến, đối tượng và chức năng từ các phần khác nhau của mã có thể truy cập được dựa trên phạm vi của chúng.
Trong JavaScript, các biến, đối tượng và hàm có thể có phạm vi toàn cục, phạm vi mô-đun, phạm vi khối hoặc phạm vi hàm.
Mục Lục
Phạm vi toàn cầu trong JavaScript
Bất kỳ giá trị nào được khai báo bên ngoài một hàm hoặc một khối trong tập lệnh đều có phạm vi toàn cục và bất kỳ tệp tập lệnh nào khác trong chương trình của bạn đều có thể truy cập nó.
Ví dụ: khai báo một biến toàn cục trong một tệp:
let globalVariable = "some value"
Có nghĩa là bất kỳ tập lệnh nào khác trong chương trình của bạn đều có thể truy cập nó:
console.log(globalVariable)
Khai báo các biến JavaScript trong phạm vi toàn cục là một thực tiễn không tốt vì nó có thể dẫn đến ô nhiễm không gian tên. Không gian tên toàn cục là không gian trên cùng của Javascript chứa các biến, đối tượng và hàm. Trong trình duyệt, nó gắn vào Cửa sổ đối tượng, trong khi NodeJS sử dụng một đối tượng có tên toàn cầu.
Làm ô nhiễm không gian tên toàn cầu có thể dẫn đến xung đột tên. Đây là một tình huống trong đó mã của bạn cố gắng sử dụng cùng một tên biến cho những thứ khác nhau trong cùng một không gian tên. Xung đột tên thường gặp phải trong các dự án lớn sử dụng một số thư viện của bên thứ ba.
Phạm vi mô-đun
Mô-đun là một tệp độc lập đóng gói và xuất các đoạn mã cho các mô-đun khác trong một dự án để sử dụng. Nó cho phép bạn tổ chức và duy trì cơ sở mã của mình hiệu quả hơn.
Mô-đun ES đã chính thức hóa mẫu mô-đun JavaScript trong JavaScript vào năm 2015.
Các biến mà bạn khai báo trong một mô-đun được xác định phạm vi đến mô-đun đó, có nghĩa là không phần nào khác của chương trình có thể truy cập chúng.
Bạn chỉ có thể sử dụng một biến được khai báo trong một mô-đun bên ngoài nó nếu mô-đun xuất biến đó bằng cách sử dụng xuất khẩu từ khóa. Sau đó, bạn có thể nhập tên đó vào một mô-đun khác bằng cách sử dụng nhập khẩu từ khóa.
Đây là một ví dụ cho thấy việc xuất một lớp:
export class Foo {
constructor(property_1, property_2) {
this.property_1 = property_1
this.property_2 = property_2
}
}
Và đây là cách bạn có thể nhập mô-đun đó và sử dụng thuộc tính mà nó xuất:
import { Foo } from './index.js'const bar = new Foo('foo', 'bar')
console.log(bar.property_1)
Các tệp không được khai báo dưới dạng mô-đun theo mặc định trong JavaScript.
Trong JavaScript phía máy khách, bạn có thể khai báo một tập lệnh dưới dạng mô-đun bằng cách đặt loại hình gán cho mô-đun trên script nhãn:
<script type="module" src="index.js"></script>
Trong NodeJS, bạn có thể khai báo một tập lệnh dưới dạng mô-đun bằng cách thiết lập loại hình tài sản để mô-đun trong của bạn package.json tập tin:
{
"type": "module"
}Phạm vi khối
Một khối trong JavaScript là nơi một cặp dấu ngoặc nhọn bắt đầu và kết thúc.
Các biến được khai báo trong một khối với để chovà hăng sô từ khóa nằm trong phạm vi khối đó, nghĩa là bạn không thể truy cập chúng bên ngoài khối đó. Phạm vi này không áp dụng cho các biến được khai báo bằng cách sử dụng var từ khóa:
{
const one = '1'
let two = '2'
var three = '3'
} console.log(one)
console.log(three)
Các biến nằm trong khối ở trên và được khai báo là const hoặc let chỉ có thể truy cập bên trong khối. Tuy nhiên, bạn có thể truy cập biến được khai báo bằng cách sử dụng var từ khóa bên ngoài khối.
Phạm vi chức năng
Các biến được khai báo bên trong một hàm thường được gọi là biến cục bộ và nằm trong phạm vi của hàm. Bạn không thể truy cập chúng bên ngoài chức năng. Phạm vi này áp dụng cho các biến được khai báo với var, để chovà hăng sô từ khóa.
Vì các biến được khai báo trong một hàm là cục bộ của hàm, nên tên của biến có thể được sử dụng lại. Việc sử dụng lại các tên biến trong phạm vi chức năng được gọi là tạo bóng biến và biến bên ngoài được cho là “bóng mờ”.
Ví dụ:
function multiply() {
let one = 1
var two = 2
const three = 3return one * two * three
}
const three = 'three'
Hiểu biết về các quy tắc xác định phạm vi là rất quan trọng
Nắm bắt được các phạm vi có sẵn trong JavaScript giúp bạn tránh được lỗi dễ dàng hơn. Cố gắng truy cập một biến không có sẵn trong một phạm vi cụ thể là một nguồn lỗi chín muồi.
Sự hiểu biết về phạm vi cũng liên quan đến các khái niệm như ô nhiễm không gian tên toàn cầu, điều này có thể làm cho mã của bạn dễ bị lỗi hơn.