TLD
JavaScript có phạm vi từ vựng (còn gọi là tĩnh) và đóng. Điều này có nghĩa là bạn có thể cho biết phạm vi của một định danh bằng cách xem mã nguồn.
Bốn phạm vi là:
- Toàn cầu - hiển thị bởi mọi thứ
- Hàm - hiển thị trong một hàm (và các hàm và khối phụ của nó)
- Khối - hiển thị trong một khối (và các khối phụ của nó)
- Mô-đun - hiển thị trong một mô-đun
Ngoài các trường hợp đặc biệt của phạm vi toàn cầu và mô-đun, các biến được khai báo bằng cách sử dụng var(phạm vi hàm), let(phạm vi khối) và const(phạm vi khối). Hầu hết các hình thức khai báo định danh khác có phạm vi khối trong chế độ nghiêm ngặt.
Tổng quat
Phạm vi là khu vực của cơ sở mã mà định danh hợp lệ.
Một môi trường từ vựng là ánh xạ giữa các tên định danh và các giá trị được liên kết với chúng.
Phạm vi được hình thành từ một lồng liên kết của các môi trường từ vựng, với mỗi cấp độ trong lồng tương ứng với một môi trường từ vựng của bối cảnh thực hiện tổ tiên.
Các môi trường từ vựng được liên kết này tạo thành một "chuỗi" phạm vi. Độ phân giải định danh là quá trình tìm kiếm dọc theo chuỗi này để tìm mã định danh phù hợp.
Độ phân giải định danh chỉ xảy ra theo một hướng: hướng ra ngoài. Theo cách này, môi trường từ vựng bên ngoài không thể "nhìn" vào môi trường từ vựng bên trong.
Có ba yếu tố thích hợp trong việc quyết định phạm vi của một mã định danh trong JavaScript:
- Làm thế nào một định danh được khai báo
- Trường hợp một định danh được khai báo
- Cho dù bạn đang ở chế độ nghiêm ngặt hay chế độ không nghiêm ngặt
Một số cách định danh có thể được khai báo:
var, letvàconst- Các tham số chức năng
- Bắt tham số khối
- Khai báo hàm
- Biểu thức hàm được đặt tên
- Các thuộc tính được xác định ngầm định trên đối tượng toàn cầu (nghĩa là bỏ lỡ
vartrong chế độ không nghiêm ngặt)
import các câu lệnheval
Một số định danh vị trí có thể được khai báo:
- Bối cảnh toàn cầu
- Cơ quan chức năng
- Khối thông thường
- Đỉnh của cấu trúc điều khiển (ví dụ: vòng lặp, nếu, trong khi, v.v.)
- Cơ cấu điều khiển
- Mô-đun
Phong cách khai báo
var
Mã định danh được khai báo sử dụng var có phạm vi chức năng , ngoài khi chúng được khai báo trực tiếp trong bối cảnh toàn cầu, trong trường hợp đó, chúng được thêm làm thuộc tính trên đối tượng toàn cầu và có phạm vi toàn cầu. Có các quy tắc riêng cho việc sử dụng chúng trong các evalchức năng.
để và const
Mã định danh được khai báo sử dụng letvà const có phạm vi khối , ngoài khi chúng được khai báo trực tiếp trong bối cảnh toàn cầu, trong trường hợp đó chúng có phạm vi toàn cầu.
Lưu ý: let, constvà var tất cả đều được kéo lên . Điều này có nghĩa là vị trí định nghĩa logic của chúng là đỉnh của phạm vi kèm theo (khối hoặc hàm). Tuy nhiên, các biến được khai báo sử dụng letvà constkhông thể được đọc hoặc gán cho đến khi điều khiển đã vượt qua điểm khai báo trong mã nguồn. Thời gian tạm thời được gọi là vùng chết tạm thời.
function f() {
function g() {
console.log(x)
}
let x = 1
g()
}
f() // 1 because x is hoisted even though declared with `let`!
Tên tham số chức năng
Tên tham số chức năng được đặt trong phạm vi cơ thể chức năng. Lưu ý rằng có một chút phức tạp cho việc này. Các hàm được khai báo là các đối số mặc định gần với danh sách tham số và không phải là phần thân của hàm.
Khai báo hàm
Khai báo hàm có phạm vi khối trong chế độ nghiêm ngặt và phạm vi hàm trong chế độ không nghiêm ngặt. Lưu ý: chế độ không nghiêm ngặt là một tập hợp các quy tắc khẩn cấp phức tạp dựa trên các triển khai lịch sử kỳ quặc của các trình duyệt khác nhau.
Biểu thức hàm được đặt tên
Các biểu thức hàm được đặt tên nằm trong phạm vi của chúng (ví dụ: cho mục đích đệ quy).
Các thuộc tính được xác định ngầm định trên đối tượng toàn cầu
Trong chế độ không nghiêm ngặt, các thuộc tính được xác định ngầm định trên đối tượng toàn cầu có phạm vi toàn cục, bởi vì đối tượng toàn cầu nằm ở đầu chuỗi phạm vi. Trong chế độ nghiêm ngặt này không được phép.
đánh giá
Trong các evalchuỗi, các biến được khai báo sử dụng varsẽ được đặt trong phạm vi hiện tại hoặc, nếu evalđược sử dụng gián tiếp, làm các thuộc tính trên đối tượng toàn cục.
Ví dụ
Sau đây sẽ ném một ReferenceError vì những cái tên x, yvà zkhông có ý nghĩa bên ngoài của hàm f.
function f() {
var x = 1
let y = 1
const z = 1
}
console.log(typeof x) // undefined (because var has function scope!)
console.log(typeof y) // undefined (because the body of the function is a block)
console.log(typeof z) // undefined (because the body of the function is a block)
Sau đây sẽ ném ReferenceError cho yvà z, nhưng không phải cho x, vì khả năng hiển thị của xkhông bị hạn chế bởi khối. Các khối xác định các cơ quan của các cấu trúc điều khiển như if, forvà while, hoạt động tương tự.
{
var x = 1
let y = 1
const z = 1
}
console.log(x) // 1
console.log(typeof y) // undefined because `y` has block scope
console.log(typeof z) // undefined because `z` has block scope
Trong phần sau đây, xcó thể nhìn thấy bên ngoài vòng lặp vì varcó phạm vi chức năng:
for(var x = 0; x < 5; ++x) {}
console.log(x) // 5 (note this is outside the loop!)
... vì hành vi này, bạn cần cẩn thận về việc đóng các biến được khai báo bằng varcác vòng lặp. Chỉ có một trường hợp của biến được xkhai báo ở đây và nó nằm bên ngoài vòng lặp.
Các bản in sau 5, năm lần, và sau đó in 5lần thứ sáu cho console.logvòng lặp bên ngoài:
for(var x = 0; x < 5; ++x) {
setTimeout(() => console.log(x)) // closes over the `x` which is logically positioned at the top of the enclosing scope, above the loop
}
console.log(x) // note: visible outside the loop
Các bản in sau undefinedvì xcó phạm vi khối. Các cuộc gọi lại được chạy từng cái một cách không đồng bộ. Hành vi mới cho letcác biến có nghĩa là mỗi hàm ẩn danh đóng trên một biến khác nhau có tên x(không giống như nó đã làm với var) và do đó, các số nguyên 0thông qua 4được in.:
for(let x = 0; x < 5; ++x) {
setTimeout(() => console.log(x)) // `let` declarations are re-declared on a per-iteration basis, so the closures capture different variables
}
console.log(typeof x) // undefined
Điều sau đây sẽ KHÔNG ném ReferenceErrorvì tầm nhìn của xkhông bị hạn chế bởi khối; tuy nhiên, nó sẽ in undefinedvì biến chưa được khởi tạo (vì ifcâu lệnh).
if(false) {
var x = 1
}
console.log(x) // here, `x` has been declared, but not initialised
Một biến được khai báo ở đầu forvòng lặp sử dụng letđược đặt trong phạm vi thân của vòng lặp:
for(let x = 0; x < 10; ++x) {}
console.log(typeof x) // undefined, because `x` is block-scoped
Sau đây sẽ ném một ReferenceErrorvì khả năng hiển thị xbị hạn chế bởi khối:
if(false) {
let x = 1
}
console.log(typeof x) // undefined, because `x` is block-scoped
Các biến khai báo sử dụng var, lethoặc constđều scoped các mô-đun:
// module1.js
var x = 0
export function f() {}
//module2.js
import f from 'module1.js'
console.log(x) // throws ReferenceError
Sau đây sẽ khai báo một thuộc tính trên đối tượng toàn cục, bởi vì các biến được khai báo sử dụng vartrong bối cảnh toàn cầu, được thêm làm thuộc tính cho đối tượng toàn cục:
var x = 1
console.log(window.hasOwnProperty('x')) // true
letvà consttrong bối cảnh toàn cầu không thêm thuộc tính vào đối tượng toàn cầu, nhưng vẫn có phạm vi toàn cầu:
let x = 1
console.log(window.hasOwnProperty('x')) // false
Các tham số chức năng có thể được coi là được khai báo trong thân hàm:
function f(x) {}
console.log(typeof x) // undefined, because `x` is scoped to the function
Các tham số khối bắt được đặt trong phạm vi thân khối bắt:
try {} catch(e) {}
console.log(typeof e) // undefined, because `e` is scoped to the catch block
Các biểu thức hàm được đặt tên chỉ nằm trong phạm vi của chính biểu thức:
(function foo() { console.log(foo) })()
console.log(typeof foo) // undefined, because `foo` is scoped to its own expression
Trong chế độ không nghiêm ngặt, các thuộc tính được xác định ngầm định trên đối tượng toàn cầu có phạm vi toàn cầu. Trong chế độ nghiêm ngặt, bạn nhận được một lỗi.
x = 1 // implicitly defined property on the global object (no "var"!)
console.log(x) // 1
console.log(window.hasOwnProperty('x')) // true
Trong chế độ không nghiêm ngặt, khai báo hàm có phạm vi hàm. Trong chế độ nghiêm ngặt họ có phạm vi khối.
'use strict'
{
function foo() {}
}
console.log(typeof foo) // undefined, because `foo` is block-scoped
Làm thế nào nó hoạt động dưới mui xe
Phạm vi được định nghĩa là vùng từ vựng của mã mà định danh hợp lệ.
Trong JavaScript, mọi đối tượng hàm có một [[Environment]]tham chiếu ẩn là tham chiếu đến môi trường từ vựng của bối cảnh thực thi (khung stack) trong đó nó được tạo.
Khi bạn gọi một hàm, [[Call]]phương thức ẩn được gọi. Phương thức này tạo ra một bối cảnh thực thi mới và thiết lập một liên kết giữa bối cảnh thực hiện mới và môi trường từ vựng của đối tượng hàm. Nó thực hiện điều này bằng cách sao chép [[Environment]]giá trị trên đối tượng hàm, vào trường tham chiếu ngoài trên môi trường từ vựng của bối cảnh thực thi mới.
Lưu ý rằng liên kết này giữa bối cảnh thực hiện mới và môi trường từ vựng của đối tượng hàm được gọi là bao đóng .
Do đó, trong JavaScript, phạm vi được triển khai thông qua các môi trường từ vựng được liên kết với nhau trong một "chuỗi" bởi các tham chiếu bên ngoài. Chuỗi môi trường từ vựng này được gọi là chuỗi phạm vi và độ phân giải định danh xảy ra bằng cách tìm kiếm chuỗi tìm kiếm định danh phù hợp.
Tìm hiểu thêm .
