Hướng dẫn lexical scope javascript - phạm vi từ vựng javascript

Ở bài viết trước thì chúng ta đã tìm hiểu về khái niệm scope trong JavaScript. Trong bài viết lần này, ta sẽ tìm hiểu về lexical scope hay static scope và xem nó có gì thú vị nhé 😁.

Lexical scope trong JavaScript là gì?

Trước tiên, mình xin sử dụng lại ví dụ từ bài viết hôm trước. Bạn nào chưa hiểu về scope có thể đọc bài viết này: Scope trong JavaScript là gì?.

function hamOBenNgoai[] {
  // scope
  let text = 'outside';
  function hamOBenTrong[] {
    // scope
    console.log[text]; // outside
  }
  hamOBenTrong[];
}
hamOBenNgoai[];

Một câu hỏi đặt ra là: "Làm sao JavaScript có thể hiểu được biến text trong hamOBenTrong[] là biến từ hamOBenNgoai[]?".

JavaScript có một cơ chế xác định scope có tên là lexical scope hay static scope.

Lexical scope là nơi mà một biểu thức được tạo ra. là nơi mà một biểu thức được tạo ra.

Lexical scope hiểu đơn giản là một biến được khai báo bên ngoài một hàm, có thể truy xuất được khi sử dụng biến này bên trong một hàm khác. Điều ngược lại là không đúng. Các biến được khai báo bên trong một hàm sẽ không thể sử dụng được bên ngoài hàm đó. hiểu đơn giản là một biến được khai báo bên ngoài một hàm, có thể truy xuất được khi sử dụng biến này bên trong một hàm khác. Điều ngược lại là không đúng. Các biến được khai báo bên trong một hàm sẽ không thể sử dụng được bên ngoài hàm đó.

Cùng xem một ví dụ để hiểu hơn về lexical scope nhé:

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

Ở ví dụ trên ta khai báo một biến

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

4 ở

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

5. Ta thực thi [invoked] hàm

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

6. Trong hàm này ta sử dụng biến

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

4 từ

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

5 👌. Vậy câu hỏi đặt ra là lexical scope của

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

4 thuộc phạm vi toàn cục [

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

5] hay scope của

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

6?lexical scope của

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

4 thuộc phạm vi toàn cục [

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

5] hay scope của

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

lexical scope có nghĩa là chúng ta đang xét về không gian định nghĩa chứ không phải là nơi mà ta gọi

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

4. Do đó, lexical scope của
const user = 'Hung'; function hamBenNgoai[] { const phone = 123123; console.log[user]; // Hung function hamBenTrong[] { const old = 22; console.log[user, phone]; // Hung, 123123 function hamBenTrongCung[] { console.log[user, phone, old]; // Hung, 123123, 22 } hamBenTrongCung[]; } hamBenTrong[]; } hamBenNgoai[];
4 là
const user = 'Hung'; function hamBenNgoai[] { const phone = 123123; console.log[user]; // Hung function hamBenTrong[] { const old = 22; console.log[user, phone]; // Hung, 123123 function hamBenTrongCung[] { console.log[user, phone, old]; // Hung, 123123, 22 } hamBenTrongCung[]; } hamBenTrong[]; } hamBenNgoai[];
5 vì ta đã khai báo
const user = 'Hung'; function hamBenNgoai[] { const phone = 123123; console.log[user]; // Hung function hamBenTrong[] { const old = 22; console.log[user, phone]; // Hung, 123123 function hamBenTrongCung[] { console.log[user, phone, old]; // Hung, 123123, 22 } hamBenTrongCung[]; } hamBenTrong[]; } hamBenNgoai[];
4 ở global environment ^^. có nghĩa là chúng ta đang xét về không gian định nghĩa chứ không phải là nơi mà ta gọi

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

4. Do đó, lexical scope của

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

4 là

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

5 vì ta đã khai báo

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

4 ở global environment ^^.

Cùng tiếp tục theo dõi ví dụ trên, ta thấy lexical scope của

function sinhVienCNTT[] {
  let tenSinhVien = 'Trang';
  let mssv = 1851120000;
}

function dangKyMonHoc[]{
  console.log[mssv];
}
sinhVienCNTT[];
dangKyMonHoc[]; // mssv is not defined

6 bao gồm cả scope của

function sinhVienCNTT[] {
  let tenSinhVien = 'Trang';
  let mssv = 1851120000;
}

function dangKyMonHoc[]{
  console.log[mssv];
}
sinhVienCNTT[];
dangKyMonHoc[]; // mssv is not defined

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

6 và global scope. Ta có thế truy cập các biến khi ở trong lexical scope của biến đó. Chính vì thế trong

function sinhVienCNTT[] {
  let tenSinhVien = 'Trang';
  let mssv = 1851120000;
}

function dangKyMonHoc[]{
  console.log[mssv];
}
sinhVienCNTT[];
dangKyMonHoc[]; // mssv is not defined

7 ta có thể sử dụng biến

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

4, scope1, scope2.lexical scope của

function sinhVienCNTT[] {
  let tenSinhVien = 'Trang';
  let mssv = 1851120000;
}

function dangKyMonHoc[]{
  console.log[mssv];
}
sinhVienCNTT[];
dangKyMonHoc[]; // mssv is not defined

6 bao gồm cả scope của

function sinhVienCNTT[] {
  let tenSinhVien = 'Trang';
  let mssv = 1851120000;
}

function dangKyMonHoc[]{
  console.log[mssv];
}
sinhVienCNTT[];
dangKyMonHoc[]; // mssv is not defined

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

6 và global scope. Ta có thế truy cập các biến khi ở trong lexical scope của biến đó. Chính vì thế trong

function sinhVienCNTT[] {
  let tenSinhVien = 'Trang';
  let mssv = 1851120000;
}

function dangKyMonHoc[]{
  console.log[mssv];
}
sinhVienCNTT[];
dangKyMonHoc[]; // mssv is not defined

7 ta có thể sử dụng biến

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

4, scope1, scope2.

lexical scope của

function sinhVienCNTT[] {
  let tenSinhVien = 'Trang';
  let mssv = 1851120000;
}

function dangKyMonHoc[]{
  console.log[mssv];
}
sinhVienCNTT[];
dangKyMonHoc[]; // mssv is not defined

7 bao gồm scope của
const user = 'Hung'; function hamBenNgoai[] { const phone = 123123; console.log[user]; // Hung function hamBenTrong[] { const old = 22; console.log[user, phone]; // Hung, 123123 function hamBenTrongCung[] { console.log[user, phone, old]; // Hung, 123123, 22 } hamBenTrongCung[]; } hamBenTrong[]; } hamBenNgoai[];
6 và global scope. Do đó ta có thể sử dụng biến
const user = 'Hung'; function hamBenNgoai[] { const phone = 123123; console.log[user]; // Hung function hamBenTrong[] { const old = 22; console.log[user, phone]; // Hung, 123123 function hamBenTrongCung[] { console.log[user, phone, old]; // Hung, 123123, 22 } hamBenTrongCung[]; } hamBenTrong[]; } hamBenNgoai[];
4, scope1, vì ta đang sử dụng các biến này trong lexical scope của chúng. của

function sinhVienCNTT[] {
  let tenSinhVien = 'Trang';
  let mssv = 1851120000;
}

function dangKyMonHoc[]{
  console.log[mssv];
}
sinhVienCNTT[];
dangKyMonHoc[]; // mssv is not defined

7 bao gồm scope của

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

6 và global scope. Do đó ta có thể sử dụng biến

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

4, scope1, vì ta đang sử dụng các biến này trong lexical scope của chúng.

lexical scope của

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

6 là global scope. Nên ta chỉ có thể sử dụng được biến
const user = 'Hung'; function hamBenNgoai[] { const phone = 123123; console.log[user]; // Hung function hamBenTrong[] { const old = 22; console.log[user, phone]; // Hung, 123123 function hamBenTrongCung[] { console.log[user, phone, old]; // Hung, 123123, 22 } hamBenTrongCung[]; } hamBenTrong[]; } hamBenNgoai[];
4 ở ví dụ trên 😁. của

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

6 là global scope. Nên ta chỉ có thể sử dụng được biến

const user = 'Hung';
function hamBenNgoai[] {
  const phone = 123123;
  console.log[user]; // Hung
  function hamBenTrong[] {
    const old = 22;
    console.log[user, phone]; // Hung, 123123
    function hamBenTrongCung[] {
      console.log[user, phone, old]; // Hung, 123123, 22
    }
    hamBenTrongCung[];
  }
  hamBenTrong[];
}
hamBenNgoai[];

4 ở ví dụ trên 😁.

Tiếp tục một ví dụ nữa để các bạn hiểu rõ hơn nhé ^^. Ví dụ này mình đã lấy từ bài trước:

function sinhVienCNTT[] {
  let tenSinhVien = 'Trang';
  let mssv = 1851120000;
}

function dangKyMonHoc[]{
  console.log[mssv];
}
sinhVienCNTT[];
dangKyMonHoc[]; // mssv is not defined

Ở ví dụ trên, ta sẽ gặp một lỗi đó là scope9. Như chúng ta đã tìm hiểu về lexical scope đó là ta chỉ có thể sử dụng được biến lexical scope0 khi ta dùng biến đó ở trong lexical scope của nó.lexical scope đó là ta chỉ có thể sử dụng được biến lexical scope0 khi ta dùng biến đó ở trong lexical scope của nó.

Ta khai báo biến lexical scope0 trong lexical scope2 do đó lexical scope của lexical scope0 là scope lexical scope2. Đối với lexical scope5, lexical scope của nó là global scope. Chính vì hai lexical scope này khác nhau nên ta không thể sử dụng biến lexical scope0 trong lexical scope5 được 😁😊.lexical scope của lexical scope0 là scope lexical scope2. Đối với lexical scope5, lexical scope của nó là global scope. Chính vì hai lexical scope này khác nhau nên ta không thể sử dụng biến lexical scope0 trong lexical scope5 được 😁😊.

Kết luận

Chúng ta đã cùng nhau tìm hiểu về lexical scope trong JavaScript rồi. Hy vọng bài viết sẽ giúp các bạn hiểu về lexical scope hơn ^^.lexical scope trong JavaScript rồi. Hy vọng bài viết sẽ giúp các bạn hiểu về lexical scope hơn ^^.

Chúc các bạn học tốt.

Lexical scope trong JavaScript là gì?

Kết luận

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề