Глубина объектов JavaScript

Я копаюсь в объектах JavaScript и обсуждаю объекты в значительной степени, основываясь на моем личном мнении и опыте.

Предварительные требования

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

Начнем с нуля

Если вы интересуетесь наукой, вы слышали обо всем, что в этой вселенной есть объекты другого типа. Он может иметь миллиарды копий (включая объект черной дыры типа M87, а также 😉) для представления каждого типа объекта.

ПРИМЕР. Думайте, что щенок - это объект, и у него может быть множество копий с разными характеристиками (порода, имя, окрас, прививки) и поведением (лай, бег, покачивание. ). Тем не менее, все мы знаем, что это своего рода щенок.

Хорошо! Это все о реальных объектах. Теперь у вас может возникнуть вопрос, как это можно применить к объектам JavaScript.

Типы данных JavaScript

JavaScript - это язык, который интерпретирует и рассматривает почти все как непримитивные типы (объектный / ссылочный тип), а все остальное считается примитивными типами (буквальный тип). .

Тогда каковы примитивные типы? :

• [строка, число, логическое, пустое, неопределенное, символы и bigint]

Ладно, ладно, а что остальное? :

• [Строка, Число, Логическое значение, Объект, Функция, Массив, Дата, Регулярное выражение, Ошибка]

ПРИМЕЧАНИЕ. Если вы попытаетесь вычислить typeof null, вы можете ввести его как Object, так что вы можете запутаться ... какого черта это? Это должен быть тип null? Однозначно ты прав !. Это заблуждение вводится самим языком, по сути, null - это тип другого примитива.

СОВЕТ 01. Первая буква во всех литералах, которые мы обычно определяем в нижнем регистре. Но при создании объектов он начинается с первой буквы в верхнем регистре с ключевым словом new.

СОВЕТ 02. Старайтесь не конструировать типы данных как объекты или подтипы объектов (функция, массив и т. д.). Если только у вас нет серьезных дел с инстансами.

Я НЕ объясняю эти буквальные типы (примитивы), потому что в этой статье я сосредоточился на объектах, но если вы чувствуете, что что-то упустили в литералах, вы можете сослаться на MDN Данные JavaScript Типы .

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

Вы видите точную разницу, не так ли? в двигателе JavaScript, все примитивы хранятся в стека как абсолютное значение. Когда дело доходит до объектов, их хранения ссылка на куча , который указывает на конкретный объект. Теперь вы должны понять, почему мы назвали объектов является ссылочных типов и примитивов типы значения .

Создание объектов

Тогда что такое объект? Какие характеристики объекта? Зачем мы это используем? Хорошо !, объект может быть идентифицирован в качестве контейнера для нескольких свойств (характеристик и поведения) с ключ-значение пара , где ключ всегда является строка (идентификатор), а значение может быть любым.

Имейте в виду, вы можете иметь все, как ваше имя свойства, которое может быть превращена в строке. Вы можете иметь пробелы между буквами, цифрами, булевы. Даже у вас могут быть пустые двойные кавычки в качестве имени свойства, и движок javascript автоматически преобразует ваш ключ в строку во время выполнения. Но доступность может отличаться (объясним в разделе Доступ и определения свойств раздел ), относительно простое право !.

// Using Object initializer
const puppy = {
    name: 'Rashi',
    breed: 'German Shepard',
    age: 12
}

// Using Function constructor
function PuppyFunction() {
    this.name = 'Rashi';
    this.breed = 'German Shepard';
    this.age = 12;
}
// Using ES6 classes
class PuppyClass {
    constructor() {
        this.name = 'Rashi';
        this.breed = 'German Shepard';
        this.age = 12;
    }
}

const puppyTwo = new PuppyFunction();
const puppyThree = new PuppyClass();
// Use console.log() to print data
puppy.name; // "Rashi"
puppyTwo.breed; // "German Shepard"
puppyThree.age; // 12

function Animal(name) {
    this.name = name;
}

Animal.prototype.sleep = function() {
    console.log(`${this.name} Zzz...`);
}

function Puppy(name) {
    this.name = name;
}

Puppy.prototype = Object.create(new Animal());

Puppy.prototype.makeSound = function() {
    console.log(`${this.name} Woof! Woof!`);
}

const puppyInstance = new Puppy('Rashi');
// Use console.log() to print data
puppyInstance.makeSound(); // "Rashi Woof! Woof!"
puppyInstance.sleep(); // "Rashi Zzz..."

БАЗА СЦЕНАРИЙ - Мы прошли «Раши» строку в функции конструктора Puppy и удерживайте ссылку, используя _11 _ переменную. Тогда мы назвали совокупность методов и свойство, используя сохраненную ссылку.

СЦЕНАРИЙ 01 - В этом случае двигатель JS выполнит makeSound() метод и найти makeSound() собственные свойства функции конструктора. Если это не так, то он будет проверять _14 _ на прототипу объекта. Если он найден на прототипе объекта, то выполнить метод с соответствующими данными.

СЦЕНАРИЙ 02 - как и в первом сценарии, движок JS продолжает поиск; конкретный способ является свойством объекта. Если нет, то траверс родительского прототипа (Animal) и проверить, является ли sleep() доступны в контексте. Если это правда, то выполнить метод с соответствующими данными.

СЦЕНАРИЙ 03. Этот случай - худший из возможных. Вы ищете собственности на а _16 _ объект. Во-первых, если он не доступен такой же, как и предыдущий, он будет держать траверс до Object.prototype не станет _18 _ , и на тот момент, двигатель JS возвратит null в качестве значения.

Давайте смотреть графическое представление наших сценариев.

Примечание - Имейте это помнить, каждый раз создавая объект, двигатель JS будет автоматически вызвать new Object() неявно, является ли это _21 _ , Array или любой другой тип объекта. Немного сложно, правда? Давайте возьмем образец вида.

const ageNumber = 12; // 12
const ageString = ageNumber.toString(); // "12"

// Use console.log() to print data
typeof ageNumber; // "number"
typeof ageString // "string"
// Use console.log() to print data
ageString.__proto__ === String.prototype; // true
ageString.__proto__.__proto__ === Object.prototype; // true
// Use console.log() to print data
ageString.__proto__.__proto__.__proto__ // null

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

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

Маленький вопрос, где же этот toString() метод пришел? Разве мы определили? Является ли это частью литералов? Конечно нет! это был метод _24 _ . Мы повторно использовать родительские свойства и методы. Вот почему _25 _ точно String.prototype и __proto.__proto__ это стало Object.prototype.

Для демонстрационных целей, мы имеем доступ _29 _ свойство непосредственно через браузер, так как браузеры реализовать прототипы через __proto__ собственности. Но JavaScript строго никогда рекомендует вам непосредственно доступ или повторно присвоить значение для него, потому что это может нарушить весь свой уровень прототип цепи.

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

Object.create ()

Этот метод создает новый объект, используя существующий объект в качестве вновь созданного объекта прототипа. для получения более подробной информации см Object.create()section в MDN.

const puppy = {
    message: function () {
        console.log(`${this.name} is a ${this.breed}`);
    }
}

const animal = Object.create(puppy);

animal.name = 'Rashi';
animal.breed = 'German Shepard';

// Use console.log() to print data
animal.message();

Доступ и определение свойств

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

В принципе, точка оператор требует, идентификатора совместимых имена свойств и скобка обозначение могут принимать любой UTF-8 / Unicode совместимой строки или имена вычислены свойство (введено в ES6) в качестве имени свойства.

const puppy = {};

// Dot notation basic usage
puppy.name = 'Rashi';
console.log(puppy.name); // "Rashi"

// Bracket notation basic usage
puppy[true] = 'A true puppy';
console.log(puppy['true']); // "A true puppy"

puppy[4] = 'Have 4 paws';
console.log(puppy['4']); // "Have 4 paws"

puppy[puppy] = 'Smart puppy';
console.log(puppy['object Object']) // Smart puppy

// Computed property name with bracket notation
const identifier = 'age';
puppy[identifier.toUpperCase()] = 12;
console.log(puppy['AGE']); // 12

JS поддерживает нативный метод для определения свойства под названием _32 _ и Object.defineProperties()which было сделать свойство или несколько свойств определения с поддерживаемыми конфигурациями.

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

Сравнение объектов

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

const puppy = {
    name: 'Rashi',
    breed: 'German Shepard',
    isVaccinated: true,
    age: 12
};

const clonePuppy = {
    name: 'Rashi',
    breed: 'German Shepard',
    isVaccinated: true,
    age: 12
};

// Use console.log() to print data
puppy == clonePuppy; // false
puppy === clonePuppy // false

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

• свободно сравнивать (двойной равно) → сравнивает значение только
• строго сравнивать (тройной равно) → сравнивает значение и тип данных

Хорошо, теперь, что случилось здесь? Почему возвращается сравнение ложно? Потому что два различные объекты являются никогда не равны , даже их значения и имена свойств являются одинаковыми, поскольку они указывают на два различных обращений к памяти. Давайте перейдем к другому сценарию.

const puppy = {
    name: 'Rashi',
    breed: 'German Shepard',
    vaccinations: {
        type: 1,
        vaccine: 'parvo'
    }
};

const clonePuppy = puppy;

// Use console.log() to print data
clonePuppy.name === puppy.name; // true
clonePuppy.vaccinations === puppy.vaccinations; // true

Вот, что мы делаем, просто создать литерал объекта и присвоить свою ссылку на другую переменную. Другими словами, clonePuppy указывает на тот же объект в памяти, что означает даже мы сопоставили его значение или введите их, возвращает истину.

Но возникла проблема на этом пути. Давайте обсудим и копать более подробную информацию о клонировании объектов в следующем разделе под названием Объект Копирование .

Перечисление объектов (итерация)

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

Вы должны иметь четкое представление о следующих атрибутах (Просто возьмите их от MDN как 😉 ).

• конфигурируемый - истинно, если и только если тип этого дескриптора свойств может быть изменено, и если свойство может быть удален из соответствующего объекта (по умолчанию → false).
• перечислимы - истинно, если и только если это свойство проявляется при перечислении свойств на соответствующем объекте (по умолчанию → false).
• записываемый - истинно тогда и только тогда, когда значение, связанное со свойством может быть изменен (дескрипторы данных только) (по умолчанию → false).
• Значение - Значение, связанное со свойством (дескрипторы данных только). (По умолчанию → undefined).

01. для ... в Loop

Цикл for…in может использоваться для итерации объекта со всеми его перечисляемыми (показывает, только если enumerable истинно в конфигурации свойства) и несимвольными свойствами в нем.

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

const puppy = {
    name: 'Rashi',
    breed: 'German Shepard',
    isVaccinated: true,
    age: 12
};

// Prints all properties in hierarchy
for (const identifier in puppy) {
    console.log(puppy[identifier]);
}

TIP 04 - оператор _ 41_ является наличие проверки, он возвращает истину, если Конкретное свойство доступно внутри объекта или объекта прототипных цепи.

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

const puppy = {
    name: 'Rashi',
    breed: 'German Shepard',
    isVaccinated: true,
    age: 12
};

// Prints all object own properties
for (const identifier in puppy) {
    if (puppy.hasOwnProperty(identifier)) {
        console.log(puppy[identifier]);
    }
}

Теперь, кажется, хорошо !. Наш цикл теперь возвращает только объект собственности свойства. Но где же речь идет о _42 _ ? Мы описали эти буквальные откуда свойства берутся. но что он делает? hasOwnProperty() методы возвращает _44 _ имеет ли объект конкретное свойство, как свою собственность. для получения более подробной информации обратитесь к Object.hasOwnProperty() в MDN.

Но этот механизм отображения собственных свойств объекта является слишком длительным. Есть ли более простой способ преодолеть оба случая? ДА! для этого, JS дал нам несколько интеллектуальных нативные пути.

02. Объект. ключи ()

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

const puppy = {
    name: 'Rashi',
    breed: 'German Shepard',
    isVaccinated: true,
    age: 12
};

// Use console.log() to print data
Object.keys(puppy); // ["name", "breed", "isVaccinated", "age"]

Для получения более подробной информации см Object.keys() раздел в MDN. Хорошо!. но как насчет того, если нам нужно непосредственно значения свойств итерации объекта? Вы можете использовать Object.values() для этого.

03. Object.values ​​()

То же, что _48 _ с той лишь разницей, что возвращает array для данного объекта все перечислимы собственное поле свойство значения в же порядок в нем содержится. Подобно for…in цикл, но это будет возвращать только собственные значения свойств объекта. Для получения более подробной информации см Object.values() раздел MDN.

const puppy = {
    name: 'Rashi',
    breed: 'German Shepard',
    isVaccinated: true,
    age: 12
};

// Use console.log() to print data
Object.values(puppy); // ["Rashi", "German Shepard", true, 12]

Хорошо! Теперь мы знаем, как получить доступ три метода объекта. Как насчет того, если вам нужно получить доступ целых записей? для этого Object.entries()comes к действию.

04. Object.entries ()

Он возвращает массив массивов собственных перечислимых массивов обеих пар ключ-значение в том же порядке, который он содержит. Для получения более подробной информации см Object.entries() раздел MDN.

const puppy = {
    name: 'Rashi',
    breed: 'German Shepard',
    isVaccinated: true,
    age: 12
};

// Use console.log() to print data
Object.entries(puppy); // [["name", "Rashi"], ["breed, "German Shepard"], ["isVaccinated, true"], ["age", 12]]

Неизменяемые объекты

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

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

01. Постоянный объект

Неизменность может быть достигнуто с помощью _54 _ и _55 _ , просто комбинируя writable: false и configurable: false будет создает свойство, которое не может быть Modify , Переопределить или удалить .

const puppy = {};

Object.defineProperty(puppy, 'name', {
    value: 'Rashi',
    configurable: false,
    writable: false
})

puppy.name = 'Rex';

// Use console.log() to print data
puppy.name; // "Rashi";

02. Object.seal ()

Этот метод может быть использован для герметизации объекта и предотвратить новые свойства от быть добавлена ​​и маркировок всех свойств configurable: false, что означает, что вы не можете перенастроить или удалить свойства в объекте больше, но значения все еще могут быть изменены пока свойства доступны для записи.

TIP 05 - Использование _59 _ для свойств проверки объекта конфигурируемый состояния.

const puppy = {
    name: 'Rashi'
};

Object.seal(puppy);

// // Use console.log() to print data
Object.getOwnPropertyDescriptors(puppy); // { name: { value: "Rashi", writable: true, enumerable: true, configurable: false } }

// // Use console.log() to print data
delete puppy.name; // false

В этом примере мы сначала должны создать простой объект, а затем запечатать его, вызвав Object.seal(), а затем зарегистрировать его дескрипторы объекта, вызвав Object.getOwnPropertyDescriptors().

В конце концов, мы попытались удалить свойство на него и возвращает ложные беззвучно, а это значит, JS не может удалить объект, но если вы запустите этот код в строгом режиме, вы получите TypeError.

03. Object.freeze ()

Этот метод делает то же whatObject.seal()does. Но единственное различие здесь все записи состояние свойства объекта стало ложным. Это означает, что вы не можете редактировать, перенастроить его дескрипторов, или больше удалять свои свойства.

const puppy = {
    name: 'Rashi'
};

Object.freeze(puppy);

// Use console.log() to print data
Object.getOwnPropertyDescriptors(puppy); // { name: { value: "Rashi", writable: true, enumerable: true, configurable: false } }

puppy.name = 'Rex';

// Use console.log() to print data
puppy.name; // "Rashi"

В предыдущем примере мы создали простой объект, затем заморозить объект, вызвав _64 _ . затем войти его объект дескрипторы, вызвав Object.getOwnPropertyDescriptors().

В конце концов, мы должны повторно присвоить значение _66 _ собственности и регистрации его обновленное значение для консоли. Но в нашем случае объект заморожен, а значит, вы не можете повторно записывать значения; Поэтому JS двигатель остается его значение, как это. Но если запустить этот код в строгом режиме, вы получите TypeError как тот же Object.seal() броски.

Копирование объекта (клонирование)

Вот один из захватывающих частей JS объектов. Когда дело доходит до объекта копирования, существует два типа мы можем определить. Какие были Объект Мелкие Клонирование и Deep Клонирование . Оба типа провел различные типы операций копирования.

01. Мелкие Клонирование

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

const puppy = {
    name: 'Rashi',
    breed: 'German Shepard',
    bark: 'Woof Woof!',
    vaccinations: {
        type: 1,
        vaccine: 'parvo'
    }
};

const shallowPuppy = puppy;

shallowPuppy.name = 'Rex' // overwrites reference object property value

//  Use console.log() to print data
shallowPuppy.name; // "Rex"
puppy.name; // "Rex"

// Use console.log() to print data
shallowPuppy === puppy; // true
// Use console.log() to print data
shallowPuppy.name === puppy.name; // true
shallowPuppy.vaccinations === puppy.vaccinations; // true

Хорошо, теперь скажи мне, это то, что мы ожидали от мелкой копии? НЕ ТОЧНО. Как уже говорилось в разделе сравнения объектов, все литералы и объекты, указывающие на тот же объект ссылки, что наши точек объекта источника, а не только то, что все внутренние объекты и примитивы указывают, где указали свойства объекта источника. Именно поэтому изменения влияют на исходном объекте, а также.

Теперь давайте посмотрим, графическое представление этого распределения памяти.

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

const puppy = {
    name: 'Rashi',
    breed: 'German Shepard',
    bark: 'Woof Woof!',
    vaccinations: {
        type: 1,
        vaccine: 'parvo'
    }
};

const shallowPuppy = Object.assign({}, puppy);

// Use console.log() to print data
shallowPuppy === puppy; // false
// Use console.log() to print data
shallowPuppy.breed === puppy.breed; // true
shallowPuppy.vaccinations === puppy.vaccinations // true

const puppy = {
    name: 'Rashi',
    breed: 'German Shepard',
    vaccinations: {
        type: 1,
        vaccine: 'parvo'
    }
};

let deepPuppy = JSON.stringify(puppy);
deepPuppy = JSON.parse(deepPuppy);

// Use console.log() to print data
deepPuppy === puppy; // false

// Use console.log() to print data
deepPuppy.name === puppy.name // false
deepPuppy === puppy.vaccinations // false

• _80 _ вместо от new Object()
• _82 _ вместо от new Array()
• _84 _ вместо от new RegExp()
• _86 _ вместо от new Function()

ПРАКТИКА 02 - всегда используется строгое сравнение, кроме сравнения только значения вашего литерала или объекта.

ПРАКТИКА 03. Назначьте свои данные или методы прототипу объекта, если они снова и снова используются для той же цели. Эта оптимизация помогает улучшить вашу производительность резко, кроме дублирования и тот же сегмент кода рекурсивно.

У меня все. Долгожданный финал, правда? 😂 Надеюсь, теперь вы лучше понимаете объекты JS.

Если я что-то пропустил, значит, я ввел новое заблуждение, или ваши личные мысли и новые ценности могут быть опущены в разделе комментариев. Я буду очень признателен 😉.

СПАСИБО ЗА ЧТЕНИЕ… & ПОДЕЛИТЬСЯ, ЕСЛИ ВЫ УЗНАЛИ ЧТО-ТО НОВОЕ!

До следующей статьи, ADIOS! ✌

зал славы