Почему этот простой Javascript код не работает

Question

У меня есть следующий код:

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

Приведенный выше код не работает, она работает, если мы используем

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

Что плохого в приведенном выше коде ?

Answer 1

Чтобы понять это, вам нужно немного разобраться в назначении javascript.

В javascript есть два типа присваивания при использовании оператора =: присвоение по значению и присвоение по ссылке. Хотя некоторые языки предоставляют вам выбор того типа назначений, который вы используете в любой момент времени, javascript не дает вам выбора. Он имеет строгий набор правил, когда он использует каждый.

«Назначение по значению» означает, что определенное значение, например, число 3 или строка "none", назначается другой переменной.

«Назначение по ссылке» означает, что указатель на другую переменную помещается в вашу новую переменную, и любое редактирование содержимого этого объекта будет отражено в обоих местах.

Для простых типов, таких как строки и числа и логические значения, javascript ALWAYS использует присвоение по значению. Для типов, таких как массивы и объекты, 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 

Answer 2

= является оператором присваивания. Вы помещаете что-то внутри переменной. В первом случае вы устанавливаете a как значение display. Какая строка равна block или none т.д.

Во втором случае вы установите a быть объектом somediv. Затем вы установите для него свойство отображения.

Первый случай не работает, потому что ваш код говорит: Установите свойство отображения строки. Строка не имеет свойства отображения, поэтому она терпит неудачу. Это как сказать:

'foobar'.style.display = 'none' 

Answer 3

Вы должны написать неправильное заклинание функции. В соответствии с вашим кодом document.getElementById('somediv').style.display возвращает текущий статус отображения div, поэтому его значение дает ошибку для заданного блока отображения.

Вы непосредственно установить Div свойства отображения, как этого

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