Проблема ссылки на объект распространена в javascript, особенно когда вы работаете над приложениями prod. Это очень расстраивает даже опытных разработчиков.

Но разработчики, которые не знают, поверьте, вы могли бы пожелать

Смерть проще, чем проблема со ссылкой на объект 😆.

Это всего лишь шутка, пожалуйста, не принимайте это всерьез.

Проблема

Предположим, у меня есть две переменные user и admin. Эти две переменные хранят текущего пользователя и пользователя-администратора соответственно. И в вашем коде есть условие, при котором вы делаете переменную администратора равной текущему пользователю, когда user.id==1 .

const user = {id:1, name:'ujjwal'};
let admin;
if(user.id==1){
    admin = user;
}

теперь предположим, что текущий пользователь изменился, поэтому вы просто изменили каждое свойство на другое значение.

user.id = 2;
user.name = 'batman'

Вы не сделали ничего плохого. Это будет мыслительный процесс любого.

Но вот проблема -

Проверьте значение администратора. Это будет то же самое, что и текущий пользователь -

Но почему ? мы не изменили adminvalue, а только uservalue.

Это потому что

Объект в javascript передается по ссылке

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

Я надеюсь, что вы в состоянии понять это. Если нет, запустите тот же код в браузере.

Решение

Решение состоит в том, чтобы не приравнивать два объекта

var user = {name:'ujjwal'}
// var admin = user // do not do this
// change it to
var admin = {...user}

Используя синтаксис распространения, мы создаем другой объект, значение будет таким же, но новый объект будет храниться в другой памяти, что нарушит ссылку.

Другая проблема

Давайте посмотрим на другую проблему —

Рассмотрим этот код -

var users = [];
var userType = users;

Здесь мы присваиваем две переменные — users и userType пустой массив.

а теперь давайте запишем какое-нибудь значение в userType

userType.push('admin','superAdmin')

теперь давайте зарегистрируем оба этих значения -

опять та же проблема — мы запихнули данные в userType, но переменная user также изменилась.

Это из-за той же проблемы. Массив является объектом, и когда вы назначаете два массива друг другу, они разделяются по ссылке.

Мы можем решить вышеуказанную проблему таким образом -

var users = [];
var userType = [];

Поскольку мы хотели, чтобы обе переменные были инициализированы пустым массивом.

До сих пор я показал вам, в чем проблема со ссылкой на объект. Но на самом деле это можно использовать в своих интересах. Посмотрим как?

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

Рассмотрим пример, когда вам нужно проверить, является ли объект пустым или нет, поэтому вы создаете метод isEmptyObject

function isEmptyObject(obj){
      return Object.keys(obj).length===0;
}
var user = {name:'ujjwal'};

В методе не выполняются мутации, что означает, что если я передам свое значение, оно будет таким же (без вреда), и когда я перейду к методу, он будет использовать ту же память.

isEmptyObject(user); // Good and safe
isEmptyObject({...user}); // Works but uses extra memory

Поэтому не всегда необходимо создавать еще один объект. Принимать решение нужно по ситуации.

Я надеюсь, что эта статья была хорошей, и вы смогли узнать что-то сегодня. Пожалуйста, хлопайте в ладоши (это мотивирует меня писать) и делитесь с друзьями.

Хотите подключиться?

вот мои социальные ссылки.

Твиттер - https://twitter.com/ujjwal_kr_gupta

Linkedin — https://www.linkedin.com/in/ujjwalkrgupta/

Гитхаб — https://github.com/ujjwalguptaofficial