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 myFunction
nó 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:
