ヘルプが必要：奇妙なJavaScriptの動作...別の変数が設定されたときに1つの変数が変更される

Question

申し訳ありませんが、より良いタイトルを考えることができませんでした。 :)私はこれを理解しようとしている時間の私の髪を引っ張ってきた

ここ

行き、

。

私は、以下の機能を持っている：ここでは

function changeCss(elem, styles) { 

    var oldstyles = styles; 

    elem.css(styles) 

    for(var key in styles){ 
     var oldstyle = input.css(key); 
    oldstyles[key] = oldstyle;    //this line is the issue 
     elem.data('oldstyle', oldstyles)      
    } 
} 

は、それが呼び出される方法の例です：

var theStyle = { border: '1px solid red'}; 
//elem is a jQuery object of an HTML element 

changeCss(elem, thestyle); 

問題はそのコメント行（8行目）の後で、stylesさん値はoldstylesの値です。

ボーダーのための特定の要素のCSS属性が設定されていないのであれば、たとえば、つまり未定義、stylesの値がさえ可能であることをどのように{ border: "" }

でしょうか？だからこそ、私は細心の注意を払っている。oldstyles;私はstyles変数の "バックアップ"を作っています。

3行目をvar oldstyles = {};に変更したところ、正常に動作しているようです。

これはそうではありません。後で私はスタイルをリセットしたいので、私は古いスタイルを持つ必要がありますが、変更したものだけです。

oldstylesがstylesの場合、なぜ「ブレーク」するのかわかりません。

私は、あなたが理解するのに十分なコードを与えていることを願っています。 :)

不明な点がある場合は、お尋ねください。

ありがとうございました。

Answer 1

oldstylesは実際にはコピーではなくスタイルを参照するためです。それはあなたがjQueryのを使用しているように見えるとして、あなたは、スタイルのコピーを作成するoldstyles jQuery.extendを使用することができます。

var oldstyles = {}; 
jQuery.extend(oldstyles, styles); 

Answer 2

JavaScriptオブジェクトは参照によって渡されます。つまり、var oldstyles = styles;という行にあります。 stylesと同じ値を参照する新しい変数を作成しています。複製を作成するために

、あなたはこれを実行する必要があります。jQueryので

var oldstyles = {}; 
for (var style in oldstyles) { 
    if (oldstyles.hasOwnProperty(style)) { 
    oldstyles[style] = styles[style]; 
    } 
} 

は、あなただけの$.extend()を使用することができます。

var oldstyles = $.extend({}, styles);