Hãy tưởng tượng kịch bản sau đây – bạn có một đầu vào đơn giản và một nút. Khi người dùng nhập vào đầu vào và nhấn nút, văn bản từ đầu vào sẽ được ghi vào bảng điều khiển.
Đây là những gì bạn có cho đến nay:
<input id="search" placeholder="Search for..."></input>
<button value="send" id="submit" onclick="myFunction()">Search</button>
<div id="alpha"></div>function myFunction() {
const test = document.getElementById("search").value;
}
console.log(test);Nhưng khi bạn tải trang bạn thấy Uncaught ReferenceError: test is not defined trong bảng điều khiển.
Điều gì đang xảy ra ở đây và tại sao bạn không thể truy cập test biến bên ngoài myFunction?
Phạm vi trong JavaScript
Lý do bạn không thể truy cập test bên ngoài của myFunction là do phạm vi. Một cách khác để mô tả phạm vi là bối cảnh.
Bởi vì test đã được xác định hoặc tạo ra trong myFunctionnó chỉ khả dụng trong ngữ cảnh hoặc phạm vi của myFunction chính nó. Đang cố đăng nhập test bên ngoài của myFunction sẽ gây ra lỗi.
Một cách khác để đặt nó là test biến là phạm vi chức năng và chỉ có thể được ghi lại từ bên trong myFunction.
Một cách dễ dàng để khắc phục điều này là đăng nhập test từ bên trong myFunction. Sau đó, bất cứ khi nào nhấn nút, giá trị hiện tại của đầu vào sẽ được ghi vào bảng điều khiển:
function myFunction() {
const test = document.getElementById("search").value;
console.log(test);
}Bạn có thể đọc thêm về phạm vi trong JavaScript tại đây: Giới thiệu về phạm vi trong JavaScript
Cách truy cập một biến bên ngoài một hàm
Mặc dù không thể truy cập trực tiếp vào một biến trong phạm vi hàm từ bên ngoài hàm mà nó được xác định, nhưng có một số cách để sử dụng giá trị của test trong suốt phần còn lại của chương trình.
Lưu trữ giá trị của test như một biến toàn cầu
Phạm vi toàn cầu là mức cao nhất trong chương trình của bạn, bên ngoài tất cả các chức năng khác. Các biến trong phạm vi toàn cầu có sẵn trong suốt phần còn lại của chương trình của bạn.
Vì vậy, một cách dễ dàng để thực hiện test có sẵn ở mọi nơi là lưu nó dưới dạng biến toàn cục. Ví dụ:
let test="";
function myFunction() {
test = document.getElementById("search").value;
}
function myOtherFunction() {
console.log(test);
}Sau đó, bạn sẽ có thể truy cập giá trị của test khi nào myOtherFunction được gọi là. Nhưng điều này giả định rằng đầu vào đã có một số văn bản trong đó và myFunctionđó là giá trị của testđược gọi trước myOtherFunction.
Đó là nơi mà sự hiểu biết vững chắc về JavaScript không đồng bộ trở nên hữu ích. Đọc thêm về nó trong bài viết này: Sự phát triển của Async JavaScript: From Callbacks, to Promises, to Async/Await
Trả về bài kiểm tra từ chức năng
Một cách khác bạn có thể truy cập test từ bên ngoài chức năng ban đầu mà nó được xác định là chỉ cần trả lại nó từ chức năng đó. Sau đó, khi bạn gọi nó từ chức năng khác, bạn sẽ có quyền truy cập vào test.
Sau đó, bạn có thể tạo một nút khác để nối thêm giá trị của test vào trang và đính kèm myOtherFunction đến nút đó.
Ví dụ:
<input id="search" placeholder="Search for..."></input>
<button value="send" id="submit" onclick="myFunction()">Search</button>
<button value="append" id="append" onclick="myOtherFunction()">Append</button>
<div id="alpha"></div>function myFunction() {
const test = document.getElementById("search").value;
return test;
}
function myOtherFunction() {
const myDiv = document.getElementById("alpha");
myDiv.innerText = myFunction();
}Và đây là hành động:
