Потеря значения глобальной переменной

158

26 февраля 2019, 18:00

Переменная let blue = 255; в контексте функции R255G255B255() является глобальной. По логике вещей, в функции R255G255Bto0 () после прохождения цикла переменная blue принимает значение 0, НО только внутри этой функции. Далее - в других функциях - значение будет браться из глобальной переменной (let blue = 255;), однако, как видно из значений console.log, в промежутке между функциями значение переменной blue = 255, что верно, но при создании новой функции и вызове переменной blue, её значение равно 0, как если бы наследовалось из предыдущей функции. Не понимаю. Почему так?

let colorTable = document.getElementById('color_table'); 
 
function R255G255B255() { 
  let red = 255; 
  let green = 255; 
  let blue = 255; 
 
  function R255G255Bto0() { 
    for (i = 0; i < 5; i++) { 
      let cell = document.createElement('div'); 
      colorTable.appendChild(cell); 
      cell.style.backgroundColor = 'rgb(' + red + ',' + green + ',' + blue + ')'; 
      blue -= 51; 
    } 
  } 
 
  console.log(blue); //255 
 
  function R255Gto0Bto0() { 
    console.log(blue); //0 
    //blue = 255;  
    for (i = 0; i < 5; i++) { 
      let cell = document.createElement('div'); 
      colorTable.appendChild(cell); 
      cell.style.backgroundColor = 'rgb(' + red + ',' + green + ',' + blue + ')'; 
      green -= 51; 
      //blue-=51; 
    } 
  } 
  R255G255Bto0(); 
  R255Gto0Bto0(); 
 
}; 
R255G255B255();

#color_table { 
  width: 270px; 
  height: 270px; 
  outline: 1px dotted gray; 
  margin: 50px auto; 
  background-color: rgb(255, 255, 255); 
} 
 
div { 
  width: 18px; 
  height: 18px; 
  display: inline-block; 
  //outline: 1px solid black; 
  border-radius: 50%; 
  background: rgb(255, 255, 255); 
  padding: 0; 
  margin: 0; 
} 
 
p { 
  padding: 0; 
  margin: 0; 
}

<p id="color_table"></p>

Answer 1

Вывод console.log(blue); //255 происходит после определения функции, но до запуска

Так как функция не запускалась - переменная и не менялась.

Если перенести console.log в место между вызовами - то значение будет 0

let colorTable = document.getElementById('color_table'); 
 
function R255G255B255() { 
  let red = 255; 
  let green = 255; 
  let blue = 255; 
 
  function R255G255Bto0() { 
    for (i = 0; i < 5; i++) { 
      let cell = document.createElement('div'); 
      colorTable.appendChild(cell); 
      cell.style.backgroundColor = 'rgb(' + red + ',' + green + ',' + blue + ')'; 
      blue -= 51; 
    } 
  } 
 
  function R255Gto0Bto0() { 
    console.log(blue); //0 
    //blue = 255;  
    for (i = 0; i < 5; i++) { 
      let cell = document.createElement('div'); 
      colorTable.appendChild(cell); 
      cell.style.backgroundColor = 'rgb(' + red + ',' + green + ',' + blue + ')'; 
      green -= 51; 
      //blue-=51; 
    } 
  } 
  R255G255Bto0(); 
  console.log('после вызова R255G255Bto0:', blue); //0 
  R255Gto0Bto0(); 
 
}; 
R255G255B255();

#color_table { 
  width: 270px; 
  height: 270px; 
  outline: 1px dotted gray; 
  margin: 50px auto; 
  background-color: rgb(255, 255, 255); 
} 
 
#color_table div { 
  width: 18px; 
  height: 18px; 
  display: inline-block; 
  //outline: 1px solid black; 
  border-radius: 50%; 
  background: rgb(255, 255, 255); 
  padding: 0; 
  margin: 0; 
} 
 
p { 
  padding: 0; 
  margin: 0; 
}