javascript - この単純な JavaScript コードが機能しない理由

Question

次のコードがあります。

function show(){
    var a=document.getElementById('somediv').style.display;
    a="block";
}

上記のコードは機能しません。

 {
     var a=document.getElementById('somediv');
     a.style.display="block";
 }

上記のコードの何が問題になっていますか?

score 6 · Accepted Answer

これを理解するには、JavaScript の割り当てについて少し理解する必要があります。

= 演算子を使用する場合、javascript には 2 種類の代入があります。値による代入と参照による代入です。一部の言語では、いつでも使用する割り当ての種類を選択できますが、javascript では選択できません。それぞれをいつ使用するかについて、一連の厳密なルールがあります。

「値による割り当て」とは、数値3や文字列などの特定の値"none"が別の変数に割り当てられることを意味します。

「参照による割り当て」とは、他の変数へのポインターが新しい変数に配置され、そのオブジェクトの内容の編集が両方の場所に反映されることを意味します。

文字列、数値、ブール値などの単純な型の場合、javascript は常に値による割り当てを使用します。配列やオブジェクトなどの型の場合、javascript は常に参照による割り当てを行います。つまり、次の場合です。

var a=document.getElementById('somediv').style.display;

プロパティの値はdisplay文字列であるため、JavaScript は値による代入を使用し、displayプロパティの文字列の値が変数にコピーされaます。このコピーが作成されると、a変数はプロパティとはまったく関係がなくなりdisplayます。それぞれが独自の文字列のコピーを持っているため、displayプロパティを完全に独立して変更できます。a

したがって、次に行う場合：

a="block";

以前のプロパティaとは関係がないため、新しい文字列を変数に割り当てるだけです。display

一方、これを行ったとき：

var a=document.getElementById('somediv');

にオブジェクトを割り当てていましたa。また、javascript は常に参照によってオブジェクトを割り当てます。これは、オブジェクトaへのポインターがあることを意味しsomedivます。コピーはありません。どちらもまったく同じオブジェクトを指しています。したがって、いずれかの参照を変更すると、実際には同じオブジェクトが変更されます。だから、あなたがするとき：

 a.style.display="block";

実際のDOMオブジェクトを変更しています。

私が覚えているルールは、数値、文字列、ブール値などの単純な型は、割り当て時にコピーされる (値による割り当て) ということです。配列やオブジェクトなどの複雑な型はコピーされず、元のオブジェクトへのポインターのみが新しい変数 (参照によって割り当てられる) に入れられるため、両方がまったく同じオブジェクトを指します。

値による割り当ては非常に簡単です。参照による代入は強力であると同時に、オリジナルへの真の参照の結果を予期しないソフトウェアでバグを引き起こすほど混乱を招く場合があります。このため、オブジェクトの実際のコピーが必要な場合は、オブジェクトのコピーを明示的に作成する必要があります。代入ではそれが行われないためです。一方、複雑なオブジェクトへの参照があると、それがどのように機能するかを理解している限り、渡すことができるので非常に便利です。JavaScript では、数値、文字列、ブール値などの単純な型への参照を取得する方法はありません。オブジェクトに (プロパティとして) 入れることができ、オブジェクトへの参照を渡すことができますが、単純型への参照を渡すことはできません。

以下にいくつかの例を示します。

// define person
var person = {height: 66, hair: "blonde"};

// assign the person object to bob
// because person is an object, the assignment is by reference
var bob = person;

// change bob's hair
bob.hair = "red";

// because assignment was by reference, person and bob are the same
// object so changing one changes the one original
alert(person.hair);    // red

// define person
var person = {height: 66, hair: "blonde"};

// assign the person's height to a variable
// because height is a number, the assignment is by value (e.g. it's copied)
var myHeight = person.height;

// change both heights
myHeight = 72;
person.height = 60;

// because assignment was by value, myHeight and person.height are 
// completely separate copies so changing one does not affect the other
alert(myHeight);         // 72
alert(person.height);    // 60

score 1 · Accepted Answer

は=代入演算子です。変数内に何かを配置しています。最初のケースaでは、の値に設定しますdisplay。blockまたはnone等に等しい文字列です。

2 番目のケースaでは、 object に設定しますsomediv。次に、表示プロパティを設定します。

最初のケースは、コードで次のように記述されているため機能しません。文字列の表示プロパティを設定します。文字列には表示プロパティがないため、失敗します。それは次のように言っているようなものです:

'foobar'.style.display = 'none'

score 0 · Accepted Answer

関数のスペルが間違っています。コードに従って、document.getElementById('somediv').style.displaydivの現在の表示ステータスを返すため、表示ブロックを設定するとエラーが発生します。

このようにdiv表示プロパティを直接設定します

function show(){
    var a=document.getElementById('somediv').style.display="block";
}

javascript - この単純な JavaScript コードが機能しない理由

3 に答える 3

Related

Reference