在JavaScript函數中使變量私有

Question

嗨，大家好我有兩個JavaScript函數 - 第一個我必須將變量名從'element'和'property'更改爲'celement'和'cproperty'以避免它們發生衝突另一個功能。我想知道是否有任何方法來構造你的函數，以便它們可以使用相同的變量名稱？任何建議都會很棒！非常感謝

的Javascript：

function colorPickDynamic (startcolor, cp){ 
    var i, 
     j, 
     x, 
     celement = [] 
     cproperty = [] 
    for (x=0, i = 2, j = 3; j <= arguments.length; i+=2, j+=2, x++) { 
     celement[x]=arguments[i] 
     cproperty[x]=arguments[j] 
     } 

     $(cp).ColorPicker({ 
      color: startcolor, 
      onShow: function (colpkr) { 
       $(colpkr).fadeIn(500) 
       return false 
      }, 
      onHide: function (colpkr) { 
       $(colpkr).fadeOut(500) 
       return false 
      }, 
      onChange: function (hsb, hex, rgb) { 

       $(cp + ' div').css('backgroundColor', '#' + hex) 
      for (x = 0; x < celement.length; x++) { 
        updateAllCSS(celement[x], cproperty[x], '#' + hex) 
      } 
      } 
     }) 
    } 


    var cssObject = {} 

    function updateAllCSS() { 

    var x, 
     i, 
     j, 
     k, 
     element = [] 
     property = [] 
     value = [] 

    for (x=0, i = 0, j = 1, k = 2; k <= arguments.length; i+=3, j+=3, k+=3, x++) { 
     element[x]=arguments[i] 
     property[x]=arguments[j] 
     value[x]=arguments[k] 
    } 

     //updateThemeCreatorCSS 

    for (x = 0; x < element.length; x++) { 
     updateThemeCreatorCSS(element[x], property[x], value[x]) 
    } 

     //updateOutputCSS 

    for (x = 0; x < element.length; x++) { 
     updateOutputCSS(element[x], property[x], value[x]) 
    } 


     function updateThemeCreatorCSS(element, property, value) { 
      $('#homeIframe').contents().find(element).css(property, value) 
      $('#generalIframe').contents().find(element).css(property, value) 
      $('#formIframe').contents().find(element).css(property, value) 
     } 


     function updateOutputCSS(element, property, value) { 

      if (!cssObject[element]) cssObject[element] = {} 
      cssObject[element][property] = value    


      $('#css_output').text('') 
      for (var element in cssObject) { 
      $('#css_output').append(element + ' {') 
       var properties = cssObject[element] 
       for (var property in properties) { 
        $('#css_output').append(property + ': ' + properties[property] + ' !important;') 
       } 
      $('#css_output').append('} <br />') 
      } 

     } 
    } 

Answer 1

你做的相當不錯你var declaration，只有你忘了一些逗號，使他們得到了全球。在colorPickDynamic：

var i, 
    j, 
    x, 
    celement = [], // <- !!! 
    cproperty = []; // semicolon optional, but recommended 

和updateAllCSS：

var x, 
    i, 
    j, 
    k, 
    element = [], // <- !!! 
    property = [], // <- !!! 
    value = []; // semicolon optional, but recommended 

如果省略了逗號，分號會被自動插入（奇怪的事情發生，因爲這）和行的末尾將成爲聲明聲明結束。下一行將像往常一樣被解釋，它是一個非局部變量的分配。你的腳本被執行了，就像

var i; 
var j; 
var x; 
celement = []; 
cproperty = []; 

Answer 2

函數中定義的變量只是在函數中定義。

這意味着它們不在該範圍之外存在。

function foo(){  
    var bar = 'hello';   
    alert('Inside function: ' + bar);  
} 

foo(); 

alert('Outside function: ' + bar); 

這將使你的警告：Inside function: hello

而一個錯誤：Uncaught ReferenceError: bar is not defined

Answer 3

閱讀這篇文章。它討論JS中的私有變量。

http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-private-variables-in-javascript/

Answer 4

是的，它們通常是私人的。

這是你的錯誤：

var i, 
    j, 
    x, 
    element = [] // <-- you forgot the comma! 
    property = [] // <-- recommend using a semicolon here 

，並在其他功能：無var關鍵字聲明

var x, 
    i, 
    j, 
    k, 
    element = [] // <-- you forgot the comma! 
    property = [] // <-- you forgot the comma! 
    value = [] // <-- recommend using a semicolon here 

變量是全球性的。

爲了防止混淆，我建議現在你不聲明多個變量一個var：

var x; 
var i; 
var j; 
var k; 
var element = []; 
var property = []; 
var value = []; 

當你更習慣的JavaScript，然後它是完全確定，因爲這樣做那麼你的大腦會自動檢測到丟失的逗號。習慣使用分號。有經驗的JavaScript程序員會自動檢測缺失的分號作爲可能的錯誤。

Answer 5

JS有功能範圍。無論涉及哪些其他構造，函數都可以訪問嵌套在外部函數作用域中的所有內容。從某種意義上說，每個內部定義的函數都使用外部函數的範圍作爲基礎。但想到這一點的方式是作爲內部功能的一個範圍層層結構。

如果你引用一個變種，JavaScript調用對象將檢查函數的局部範圍內，那麼接下來的功能出來，依此類推，直到它找到直到它擊中了全球範圍內的第一個可用一個使用該名稱。

因此，與「無功」在一個內部函數聲明將阻止更改名稱相同外範圍的變種。

巨大的重要注意事項 - 所有這些僅與定義函數的位置有關。

這些繼承的範圍是什麼時，他們說這個詞的人應該真的是「關閉」。它是定義範圍上下文（這些層）與函數的綁定。

而現在這裏是封閉通常可能混淆：

function buildAFunction(){ 
    var 
     whichOne = "buildAFunction's var"; 

    return function(){ alert(whichOne); } 
} 

function anotherFunction(){ 
    var //format I use for adding clarity to comma-separated var decs sometimes. 
     whichOne = "anotherFunction's var", 
     builtFunc = buildAFunction(); 

    builtFunc(); 
} 

anotherFunction(); //alerts "buildAFunction's var" 

您可以左右移動功能，但它仍然只能訪問在它被定義的地方可用的範圍。它可以在第一頭餅刷，但這是JavaScript的一個愚蠢的，強大的功能，當你學會利用它充分利用。要反其道而行之，這是具有功能於一身的新的上下文自動神奇地使用的東西，你會希望尋找到了「這個」關鍵字時，將功能分配給對象的屬性，通常是唯一有用的。