無法在函數內部訪問全局范圍？

Question

為什么此代碼有效？

function run(){
  var name =document.getElementById('name');
  name.classList.toggle('name');

}

但是這段代碼沒有嗎？ var名稱是在全局范圍內定義的，那么為什么不能在run函數中訪問它？

var name =document.getElementById('name');
function run(){    
  name.classList.toggle('name');
}

Answer 1

直到完全解析DOM之后，才調用run() ，因此當它嘗試執行時： document.getElementById('name'); ，將找到該元素。

但是，當從run()提取該行並將其放置在函數外部時，將在完全解析DOM且未找到該元素之前對其進行調用。

您可以通過將所有代碼（或對代碼的script引用）放在結束body標簽（ </body> ）之前來解決此問題。 到瀏覽器遇到此問題時，所有HTML都將被解析到內存中，並且可以找到該元素。

 .name { background: red; color: white; }

 <!doctype html> <html> <head> </head> <body> <div id="name" class="name" onclick="run()">Name</div> <!-- When the script is placed after all the other body content, it will be able to scan the DOM for any of that content. --> <script> var other =document.getElementById('name'); function run(){ other.classList.toggle('name'); } </script> </body> </html>

而且，正如我在評論中提到的那樣，最好不要命名任何name因為name是Global window對象的屬性，並且當您使用該標識符時會出現復雜性。

Answer 2

name是全球財產，即。 window.name。 將變量定義為其他內容：

  var other =document.getElementById('name'); function run(){ other.classList.toggle('name'); }

 .name { background: red; color: white; }

 <div id="name" class="name" onclick="run()">Name</div>

現在它將正常工作。

雖然您使用名稱，但會引發錯誤：

 var name =document.getElementById('name'); function run(){ name.classList.toggle('name'); }

 .name { background: red; color: white; }

 <div id="name" class="name" onclick="run()">Name</div>

這里發生了什么？

您正在使用和html對象修改窗口屬性名稱。 而且您正在使用classList，它實際上是html對象的屬性，而不是window的屬性。 因此，訪問window屬性的classList屬性（盡管已將其轉換為html對象，但仍然是window對象）顯然會引發未定義的錯誤。

因此，強烈建議不要更改全球財產。

在本地范圍內，您無需修改window屬性，而是定義本地變量，這樣就可以正常工作。

無法在函數內部訪問全局范圍？

問題描述

2 個解決方案

解決方案1
1 已采納 2018-05-18 16:54:33

解決方案2
-1 2018-05-18 16:45:59

無法在函數內部訪問全局范圍？

問題描述

2 個解決方案

解決方案1 1 已采納 2018-05-18 16:54:33

解決方案2 -1 2018-05-18 16:45:59

解決方案1
1 已采納 2018-05-18 16:54:33

解決方案2
-1 2018-05-18 16:45:59