0

プロパティ値が予期せず書き換えられる JS オブジェクトに問題があります。

以下の例では、 を設定した後、コンソールcss_on['color'] = 'red';に出力すると正しい値が表示されます。css_onしかし、その後css_off['color'] = 'blue';、なぜかcss_on.color今もblue。

なぜこれが起こっているのか誰か教えてもらえますか？そして止める方法！ありがとう。

var css = {
    'line-height':  this.options.height+'px',
    'width':        this.options.label_width+'px'
}
var css_on = css
var css_off = css;

css_on['color'] = 'red';
console.log(css_on);
css_off['color'] = 'blue';
console.log(css_on);
4

4 に答える 4

2

css_on と css_off の両方が同じオブジェクトを指しています。オブジェクトを参照するために css_on または css_off を使用しているかどうかに関係なく、そのオブジェクトのプロパティを変更すると、その変更はアクセスする両方の方法で明らかに表示されます。

2 つの新しいオブジェクトが必要な場合は、元の css オブジェクトを複製できます。好みのライブラリにクローン関数がない (またはライブラリがない) 場合は、次の簡単なことを行うことができます。

var css_on = Object.create(css);
var css_off = Object.create(css);

これにより、プロトタイプ チェーンに css を持つ 2 つの空のオブジェクトが作成されます。あなたがするとき：

console.log(css_on['width'])

widthcss_on オブジェクトのプロパティを探します。(css_on が空であるため) 見つからないため、プロトタイプ チェーンで検索します。cssオブジェクトでそれを見つけるので、ログに記録しますthis.options.label_width+'px'

あなたがするとき

css_on['width'] = '3px';

css_on オブジェクトの width プロパティを設定します。css オブジェクトまたは css_off オブジェクトは影響を受けないため、まさに必要なものです。

于 2013-11-08T09:34:23.803 に答える
1

これは、両方のcss_on&css_offが同じ JavaScript オブジェクトを参照しているためcssです。彼らは自分自身のコピーを持っていません。そのため、いずれかのプロパティを変更すると、他のプロパティに反映されます。

于 2013-11-08T09:32:55.510 に答える
1

これは予期しない動作ではなく、オブジェクトに期待するべき動作です。それを処理する方法はたくさんありますが、簡単な方法はhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/createです

例えば

var css = {
'line-height':  this.options.height+'px',
'width':        this.options.label_width+'px'
 }

var css_on = Object.create(css);
var css_off = Object.create(css);

ただし、これはすべての古いブラウザーでサポートされているわけではありません。したがって、IE8 以前のサポートが必要な場合、これは機能しません。これは、より詳細なオプション (ただし、古いブラウザーではサポートされています) を含む、多くのオプションを提供する情報スレッドです: JavaScript オブジェクトを正しく複製するにはどうすればよいですか?

于 2013-11-08T09:36:35.877 に答える
1

Because css_on and css_off are both refer to the same object, so you must create an new object for css_on and css_off:

var css_on = new Object(css);
var css_off = new Object(css);

and now, they are different and you can change any one of them.

css_on['width'] = '0px';
css_off['width'] = '2px'
console.log(css_on['width'], css_off['width']); // out put: '0px, 2px'
于 2013-11-08T09:43:42.930 に答える