Область переменных в выражениях функций

Question

В последнее время я изучаю некоторые основы JavaScript и потратил довольно много времени на разбор некоторых выражений функций, чтобы лучше их понять. Я все еще немного не уверен, что на самом деле происходит в нескольких примерах, и хотел бы получить какое-то объяснение по этому поводу, если я ошибаюсь или, по крайней мере, подтверждаю, правилен ли мой подход.

Есть три фрагменты кода, с небольшими различиями в них:

var my_number = 7; 

var timesTwo = function(number) { 
    my_number = number * 2; 
    console.log("inside " + my_number); 
}; 

timesTwo(5); 
console.log("outside " + my_number); 

.

var my_number = 7; 

var timesTwo = function(number) { 
    var my_number = number * 2; 
    console.log("inside " + my_number); 
}; 

timesTwo(5); 
console.log("outside " + my_number); 

.

var my_number = 7; 

var timesTwo = function(my_number) { 
    my_number = my_number * 2; 
    console.log("inside " + my_number); 
}; 

timesTwo(5); 
console.log("outside " + my_number); 

Что мне интересно, что именно происходит, чтобы заставить их работать так, как они.

Первый случай кажется относительно прямо вперед - my_number начинается, как глобальные, number является локальным по отношению к функции и my_number изменяется внутри функции, так что это в глобальной системе координат 10.

Второй случай также представляется очевидным, - это похоже на первый, только есть новая локальная переменная my_number внутри функции, которая назначена 10, и вне функции my_number еще 7.

Что я неуверенность в том, что это третья часть. Я полагаю, что, поскольку все упоминания о number теперь my_number, функция создает новую переменную my_number в следующей строке:

var timesTwo = function(my_number) 

даже если нет в теле функции нет var my_number?

Answer 1

var my_number = 7; 

var timesTwo = function(number) { 
    my_number = number * 2; 
    console.log("inside " + my_number); 
}; 

timesTwo(5); 
console.log("outside " + my_number); 

Этот первый пример объявляет my_number в глобальном масштабе и устанавливает свое значение для 7. timesTwo - это функция, которая принимает аргумент в своем параметре, который в этой функции ссылается на number. Когда функция вызывается, вы устанавливаете переменную my_number, определенную в глобальной области, равной аргументу, переданному в аргументе, умноженному на два. Вы регистрируете один и тот же результат с помощью вызовов «внутри» и «снаружи».

var my_number = 7; 

var timesTwo = function(number) { 
    var my_number = number * 2; 
    console.log("inside " + my_number); 
}; 

timesTwo(5); 
console.log("outside " + my_number); 

В этом втором примере, вы объявляете локально область действия my_number в функции timesTwo. Из-за этого вы регистрируете разные переменные my_number в своих «внутренних» и «внешних» вызовах.

var my_number = 7; 

var timesTwo = function(my_number) { 
    my_number = my_number * 2; 
    console.log("inside " + my_number); 
}; 

timesTwo(5); 
console.log("outside " + my_number); 

В третьем примере, timesTwo принимает параметр и использует переменную my_number, чтобы следить за ним.

Answer 2

Это называется variable shadowing.

В определении функции вы указываете параметр my_number, который вводит новую локальную переменную в область действия функции.

Это будет тень внешней my_number так, что любая ссылка на my_number внутри тела функции будет относиться к входящему параметру, а не внешняя my_number переменных.