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

Большая часть содержимого здесь является переводом из этого блога:

https://helloworldjavascript.net/pages/220-value-in-depth.html

Причина, по которой не следует использовать переменную в качестве глобальной области действия

  • Трудно предсказать, где и когда он был изменен -> Трудно понять код
  • Следует избегать сопряжения. (Например, вы изменили A.js, и код B.js стал странным, чего вы хотите избежать)

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

Глобальный объект

Все среды JS имеют глобальные объекты, и если глобальная переменная объявлена, она становится свойством глобального объекта и может быть доступна для глобального объекта.

›› https://developer.mozilla.org/en-US/docs/Glossary/Global_object

Ссылка

Прежде чем мы перейдем к ссылке, мы знаем, что у нас есть 7 типов данных в Javascript.

* Boolean
* Null
* Undefined
* Number
* String
* Symbol
* Object

За исключением Object, это все примитивные типы. Объект является «ссылочным типом». Что изменилось?

Ссылка — это значение адреса, по которому объект хранится на уровне памяти. В JS мы не можем прочитать само значение ссылки или изменить его (в отличие от C++ вы можете видеть адрес памяти).

То, что мы считали объектом, на самом деле является ссылкой на объект.

const obj = {}; // variable ‘obj’ is storing the reference of the object.

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

Вызов функции

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

Равенство

=== это сравнивает ссылку, а не фактическое содержимое. Если вы хотите сравнить объект, вы должны спросить себя, хотите ли вы сравнить содержимое объекта или ссылку. Для сравнения контента нужна библиотека для более глубокого сравнения или новая функция.

// if id is the same, it's same user.
function User(id) {
  this.id = id;
}

User.prototype.isEqual = function(other) {
  return this.id === other.id;
}

const john1 = new User('john');
const john2 = new User('john');

john1 === john2; // false
john1.isEqual(john2); // true

неизменность

Нет возможности редактировать само значение примитивных типов. Это называется неизменностью, и мы можем сказать, что «примитивные типы JS неизменны».

Например, метод, изменяющий строку, просто возвращает новую строку, не изменяя исходную.

Если вы хотите изменить значение типов-примитивов, единственный способ — присвоить другие значения. Если вы избегаете присвоения нового значения, абсолютно невозможно изменить исходное значение.

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

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

Есть 2 способа предотвратить изменение объектов.

1. Объект. замораживание
Он буквально замораживает объект, поэтому ни один из элементов не будет изменен после того, как вы их заморозите.

Объект.заморозить(объект);

Во-первых, если вы замораживаете объект, он не замораживает объект внутри объекта, поэтому с вложенными объектами может быть сложно иметь дело.

2. Используйте библиотеку, например Immutable.js

Они дают нам способы обрабатывать такие объекты, как неизменяемые, а не просто замораживать их. Immutable.js особенно популярен в React.

import {List} from 'immutable';

// 'List' from Immutable.js is similar to array but it's immutable.
const list = List.of(1, 2, 3);
const newList = list.push(4); // 새 List 인스턴스를 반환합니다.

// When the contents get different, the reference changes.
list === newList; // false