如何使變量對JavaScript中的所有函數都可訪問？

我很好奇我在這個代碼片段中不理解的東西...如何使變量對JavaScript中的所有函數都可訪問？

這是爲什麼這樣工作？

function insert_number(number){ 
    var output = document.getElementById('output'); 
    output.value += number.value; 
}

但這不工作？

var output = document.getElementById('output'); 

function insert_number(number){ 
    output.value += number.value; 
}

是否有東西做的方式變量output定義？

此外，我怎麼會寫output變量的函數insert_number()內，同時還使output提供給所有其他功能在我的腳本（即使這意味着不必逃避變出來的功能，或者具體地說，它發送到另一個功能作爲參數）？

注：我所有的代碼是在外部「的.js」文件

代碼爲現在的完整背景是這樣的（我將在以後添加更多）：

var output = document.getElementById('output'); 

function insert_number(number){ 
    output.value += number.value; 
} 

function clear_output(){ 
    output.value = ""; 
}

來源

2012-02-01 person0

你是什麼意思它不工作？對我來說看起來很好 – Ibu 2012-02-01 18:31:01

是你的代碼的完整上下文還是更多？ – j08691 2012-02-01 18:33:01

其實，他們都工作，只要在

document.getElementById('output')

的DOM元素存在。最重要的區別是您的insert_number函數可能在加載DOM後運行，與第二個示例中的裸輸出分配不同。

而且我將如何編寫函數 insert_number()內output變量，同時還使全球範圍內的輸出提供給所有等功能於我的腳本？

良好的JavaScript開發者儘量避免全局變量，其中不必要的，但簡單的答案是這樣的：

var output; // declared, but as yet undefined 

window.onload = function() { 
    window.output = document.getElementById("output"); 
} 

function insert_number(number) { 
    output.value += number.value; 
}

來源

2012-02-01 18:31:11 kojiro

這是什麼意思？'你的insert_number函數可能在加載DOM之後運行，與第二個例子中的裸輸出分配不同。 – person0 2012-02-01 18:40:44

@Proud_to_be_Noob'

如果你聲明一個變量，而不使用「var」，變量總是變成global。這裏更多的信息：在運行代碼時http://www.w3schools.com/js/js_variables.asp

來源

2012-02-01 18:30:41

yuck w3schools.com UGGGGGGGGGGGGGGG ...我懇求您避免引用該不良參考網站。應該有一個過濾器，阻止它作爲一個被詛咒的詞。 – 2012-02-01 18:31:06

這並沒有真正回答這個問題。 – j08691 2012-02-01 18:32:33

沒問題，但這隻能部分回答我的問題，而且我已經知道了很多（我將重述我的問題）。我真的需要知道爲什麼第一個代碼段可以工作，但第二個代碼段沒有。 – person0 2012-02-01 18:34:39

這有沒有關係全局變量。

您可能在head中有腳本。在那個階段，DOM尚未完全構建，ID output的元素尚不存在。因此document.getElementById('output')將返回null（example）。

但是，如果在DOM構建之後的某段時間您可能會調用insert_number，以此作爲對某些用戶交互的響應。在這種情況下，該元素將存在。

最簡單的解決方案是在關閉body標記（example，注意不同的jsfiddle設置和/或檢查源）之前放置代碼。

來源

2012-02-01 18:32:40

我覺得你的代碼是不工作的原因是因爲沒有加載的DOM，當你調用var output = document.getElementById('output');

移動以下其中輸出DIV是，它應該工作

來源

2012-02-01 18:34:09

下面的代碼是一個解決方案，將只保留一個對象/名稱空間在全球範圍內：

(function(global, d) { 
    var output = d.getElementById('output'), 
     myApi = {}; 

    myApi.insert_number = function(number){ 
     output.value += number.value; 
    }; 

    //export your api to the global scope 
    global.myApi = myApi; 
})(window, document);

現在，您可以撥打myApi.insert_number(5);您現在有一個具有訪問output變量封閉，所以你可以添加額外的樂趣不需要每次訪問DOM，都可以使用API。

只是一個提醒，JavaScript的這應該被放置在你的頁面的底部剛剛閉幕</body>

我會建議看在全球範圍內該視頻上面：http://www.watchmecode.net/javascript-scope

來源

2012-02-01 18:37:01 Paul

這似乎有點複雜，我試圖使用簡單的功能。稍後我會對此進行更多的研究。不過謝謝。 – person0 2012-02-01 19:03:07

沒問題。我要指出的一件事是，大多數JavaScript代碼「從簡單開始」，但隨後迅速增長失控。我個人總是試圖規劃增長，並且它往往會增加額外的功能並重構得更簡單。 – Paul 2012-02-01 19:15:11

相關問題