Передача по значению и ссылке в JavaScript

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

В JavaScript все аргументы функций всегда передаются по значению. Это означает, что JavaScript копирует значения переменных в аргументы функции.

Любые изменения, которые вы вносите в аргументы внутри функции, не отражают передаваемые переменные вне функции. Другими словами, изменения, внесенные в аргументы, не отражаются за пределами функции.

Если аргументы функции передаются по ссылке, изменения переменных, которые вы передаете в функцию, будут отражены вне функции. Это невозможно в JavaScript.

Передача по значению

Давайте посмотрим на следующий пример.

function square(x) {
    x = x * x;
    return x;
}
let y = 10;
let result = square(y);
console.log(result); // 100 
console.log(y); // 10 -- no change

Как работает скрипт:

• Во-первых, определите функцию square(), которая принимает аргумент x. Функция присваивает квадрат x аргументу x.
• Затем объявите переменную y и инициализируйте ее значение равным 10 :

• Затем передайте переменную y в функцию square(). При передаче переменной y в функцию Square square() JavaScript копирует значение y в переменную x.

• После этого функция square() изменяет переменную x. Однако это не влияет на значение переменной y, поскольку x и y являются отдельными переменными.

• Наконец, значение переменной y не меняется после завершения функции square().

Если бы JavaScript использовал передачу по ссылке, переменная y изменилась бы на 100 после вызова функции.

Передача по значению эталонных значений

Не очевидно, что ссылочные значения также передаются значениями. Например:

let person = {
    name: 'John',
    age: 25,
};
function increaseAge(obj) {
    obj.age += 1;
}
increaseAge(person);
console.log(person);

Как работает скрипт:

• Во-первых, определите переменную person, которая ссылается на объект с двумя свойствами: name и age :

• Затем определите increaseAge(), которая принимает объект obj и увеличивает свойство age аргумента obj на единицу.
• Затем передайте объект person функции increaseAge() :

Внутри движок JavaScript создает ссылку obj и делает ссылку этой переменной на тот же объект, на который ссылается переменная person.

После этого увеличьте свойство age на единицу внутри increaseAge() через переменную obj

• Наконец, доступ к объекту через ссылку person :

Кажется, что JavaScript передает объект по ссылке, потому что изменение объекта отражается вне функции. Однако, это не так.

Фактически, при передаче объекта функции вы передаете ссылку на этот объект, а не на сам объект. Следовательно, функция может изменять свойства объекта через его ссылку.

Однако вы не можете изменить ссылку, например:

let person = {
    name: 'John',
    age: 25,
};
function increaseAge(obj) {
    obj.age += 1;
    // reference another object 
    obj = {
        name: 'Jane',
        age: 22
    };
}
increaseAge(person);
console.log(person);

Выход:

{ name: 'John', age: 26 }

В этом примере функция increaseAage() изменяет свойство age через аргумент obj :

и делает obj ссылкой на другой объект:

Однако ссылка на person по-прежнему ссылается на исходный объект, свойство age которого изменяется на 26. Другими словами, increaseAge() не изменяет ссылку на person.

Если эта концепция все еще смущает вас, вы можете рассматривать аргументы функции как локальные переменные.

Заключение

• JavaScript передает все аргументы функции по значениям.
• Аргументы функций — это локальные переменные в JavaScript.