code_notes – Telegram

code_notes

71 subscribers

136 photos

1 video

134 links

учусь делать веб

обратная связь: t.me/dmorenogogoleva

Download Telegram

About

Blog

Apps

Platform

Global symbol registry

чтобы символы с одинаковыми именами были одной сущностью нужно использовать глобальный реестр символов

запись:

const id = Symbol.for("id")

чтение:

const first = Symbol.keyFor(id)
const second = Symbol.keyFor(id)

first === second // true

the symbol registry is mostly built by JavaScript's compiler infrastructure, and the symbol registry's content is not available to JavaScript's run-time infrastructure

41 viewsedited 07:42

отменить коммит, сохранить изменения

git reset --soft HEAD^

44 viewsedited 08:13

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

new

const User = function(name) {
  this.name = name;
  this.isAdmin = false;
}

const masha = new User("Masha");

// { name: "Masha", isAdmin: false }

44 viewsedited 07:08

Свойство length автоматически обновляется при изменении массива. Если быть точными, это не количество элементов массива, а наибольший цифровой индекс плюс один.

let fruits = [];
fruits[123] = "Яблоко";

alert( fruits.length ); // 124

44 views04:39

Map – это коллекция ключ/значение, как и Object. Но основное отличие в том, что Map позволяет использовать ключи любого типа.

Веб-документация MDN

Объект Map содержит пары ключ-значение и сохраняет порядок вставки.

39 views06:21

вот так можно создать Map из object

let obj = {
  name: "John",
  age: 30
};

let map = new Map(Object.entries(obj));

41 viewsedited 06:22

вот так можно создать object из Map:

let map = new Map();
map.set('banana', 1);
map.set('orange', 2);
map.set('meat', 4);

let obj = Object.fromEntries(map); 

// готово!
// obj = { banana: 1, orange: 2, meat: 4 }

alert(obj.orange); // 2

44 viewsedited 06:36

timestamp — целое число, представляющее собой количество миллисекунд, прошедших с начала 1970 года

const stamp = 999999999276;

из таймстампа можно легко получить дату:

new Date(stamp);
// Sun Sep 09 2001 05:46:39 GMT+0400 (Moscow Summer Time)

а из даты можно сделать таймстамп:

new Date().getTime()
// 1565845435771

41 viewsedited 04:57

рекурсия

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

const pow = (x, n) => {
  if (n === 1) return x

  return x * pow (x - 1)
} 

pow(2, 3) // 8
pow(2, 5) // 32

43 viewsedited 06:26

функция навсегда запоминает ссылку на лексическое окружение, где она была создана. И [[Environment]] – скрытое свойство функции, которое содержит эту ссылку

В программировании есть общий термин: «замыкание», – которое должен знать каждый разработчик.

Замыкание – это функция, которая запоминает свои внешние переменные и может получить к ним доступ. В некоторых языках это невозможно, или функция должна быть написана специальным образом, чтобы получилось замыкание. Но, как было описано выше, в JavaScript, все функции изначально являются замыканиями, кроме функций, объявленных через new Function().

(Функции, объявленные через new Function, имеют [[Environment]], ссылающийся на глобальное лексическое окружение, а не на родительское. Это позволяет избежать проблем при минификации.)

То есть, они автоматически запоминают, где были созданы, с помощью скрытого свойства [[Environment]] и все они могут получить доступ к внешним переменным.

Когда на собеседовании фронтенд-разработчик получает вопрос: «что такое замыкание?», – правильным ответом будет определение замыкания и объяснения того факта, что все функции в JavaScript являются замыканиями, и, может быть, несколько слов о технических деталях: свойстве [[Environment]] и о том, как работает лексическое окружение.

48 viewsedited 05:22

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

в браузере он называется window, в Node.js — global, в другой среде исполнения может называться иначе.

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

46 viewsedited 04:45

декоратор это специальная функция, которая принимает другую функцию и изменяет её поведение.

47 views05:38

let user = {
    firstName: "Маша",
    sayHi() {
    alert(`Привет, ${this.firstName}!`);
  }
};

this передается в функцию только при следующей комбинации - obj.func(), причем должны быть одновременно все элемены в одном месте и в этом же порядке, т.е. объект перед точкой, после точки имя функции (метода) и после имени метода обязательно сразу же круглые скобки. Если хоть чего то нет - this не передается и теряется. Соответсвенно если user.sayHi (нет скобок) или просто sayHi() (нет объекта перед точкой) или например передали функцию как аргумент function (user.sayHi) {...... user.sayHi()}, а потом вызвали ее внутри функции (при передаче через аргумент this уже потерялся) - везде везде потяря this. Решают проблему явная передача/прикрепление this с помощью call/apply, bind

47 viewsedited 05:31

Стрелочные функции:

- Не имеют this.
- Не имеют arguments.
- Не могут быть вызваны с new.

45 views05:39

Помимо значения value, свойства объекта имеют три специальных атрибута (так называемые «флаги»).

writable – если true, свойство можно изменить, иначе оно только для чтения.

enumerable – если true, свойство перечисляется в циклах, в противном случае циклы его игнорируют.

configurable – если true, свойство можно удалить, а эти атрибуты можно изменять, иначе этого делать нельзя.

Описание свойства называется дескриптор и позволяет получить полную информацию о свойстве

Дескриптор можно получить вот так:

const user = {
  name: "Маша"
};

const descriptor = Object.getOwnPropertyDescriptor(user, 'name');

JSON.stringify(descriptor)

 {
  "value": "Маша",
  "writable": true,
  "enumerable": true,
  "configurable": true
}

Вот так можно создать свойство, доступное только для чтения:

const user = {
  name: "Маша"
};

Object.defineProperty(user, "name", {
  writable: false
});

user.name = 'Саша'

user.name
//"Маша"

41 viewsedited 05:50

Геттеры и сеттеры

это свойства-аксессоры (accessor properties). По своей сути это функции, которые используются для присвоения и получения значения, но во внешнем коде они выглядят как обычные свойства объекта

как они используются в реальной жизни:
1. создаем объект с геттерами и сеттерами

const user = {
  _name: 'Марина',
  _surname: 'Цветаева',
  get fullName() {
      return `${this._name} ${this._surname}`
  },
  set poem(value) {
      if (value.length < 4) {
        throw Error('слишком короткое значение')  
        }
      this._poem = value
  },
 get curPoem() {
     return this._poem
 }
}

2. получаем значение из геттера

user.fullName
// "Марина Цветаева"

можно даже так:

const { fullName } = user
// fullName "Марина Цветаева"

3. устанавливаем значение в сеттер

user.poem = 'Го'
Uncaught Error: слишком короткое значение

user.poem = 'Гора горевала что только грустью'

4. получаем значение, которое только что установили

user.curPoem
//"Гора горевала что только грустью"

очень удобно:
1. все вычисления в одном месте, не будет разных значений fullName в разных местах приложения
2. внутренние свойства через нижеее подчёркивание(_) обретают истинный смысл — у них не будет случайных или неправильных значений
3. простой синтаксис

44 viewsedited 06:15

прототипное наследование

- объекты наследуются от других объектов
- каждый объект имеет прототип
- он записан в специальное скрытое свойство [[Prototype]]
- задать прототип можно через

__proto__

- __proto__ это не [[Prototype]]. Это геттер/сеттер для него.

const animal = {
  say: 'woff'
}

const dog = {
  __proto__: animal
}

const cat = {
  say: 'meow',
  __proto__: animal
}

dog.say
// "woff"

cat.say
// "meow"

суть прототипного наследования в том, что если мы вызываем метод, которого нет в объекте, то он ищется по цепочке прототипов, пока не найдётся

наш самый верхний объект animal наследуется от Object.prototype, что добавляет всем нашим объектам методы типа toString() и hasOwnProperty()

Object.prototype в свою очередь наследуется от null (втф)

50 viewsedited 06:31

также мы можем создавать объекты через

new F()

если в F.prototype содержится объект, оператор new устанавливает его в качестве [[Prototype]] для нового объекта

const animal = {
  say: 'woff'
}

const Cat = function(name){
  this.name = name
}

Cat.prototype = animal

const klyaksa = new Cat('klyaksa')

console.log(klyaksa.name) // "klyaksa"
console.log(klyaksa.say) // "woff"

Установка Cat.prototype = animal буквально говорит интерпретатору следующее: "При создании объекта через new Cat() запиши ему animal в [[Prototype]]

50 viewsedited 06:59

ахах, забудьте всё, что вы читали до этого, в 2019 объекты наследуются по-другому

- создать: Object.create(proto, [descriptors])
- узнать прототип: Object.getPrototypeOf(obj)
- установить прототип: Object.setPrototypeOf(obj, proto)

55 views06:21

const animal = {
  say: 'woff'
}

const catOfCats = {
  say: 'meow'
}

const cat = Object.create(animal)

Object.getPrototypeOf(cat)
// {say: "woff"}

Object.setPrototypeOf(cat, catOfCats)

cat.say
// "meow"

51 views06:23