CodeBase | Frontend | #plugin
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤3
this
В
JavaScript ссылается на контекст выполнения текущей функции или объекта. Его значение определяется тем, как была вызвана функция, а не тем, где она была объявлена. this:
this
ссылается на глобальный объект (в браузерах это window,
в Node.js — `global`).
console.log(this); // window (в браузере)
this
также будет ссылаться на глобальный объект.function foo() {
console.log(this); // window (в браузере)
}
foo();
this
ссылается на этот объект.
const obj = {
method: function() {
console.log(this); // obj
}
};
obj.method();
new, this
ссылается на новый экземпляр объекта.function Person(name) {
this.name = name;
}
const person = new Person('John');
console.log(person.name); // John
call, apply
и bind
позволяют явно задать значение this.
function greet() {
console.log(this.name);
}
const person = { name: 'John' };
greet.call(person); // John
this.
Они захватывают значение this
из окружающего контекста на момент своего определения.
const obj = {
method: function() {
const arrow = () => console.log(this);
arrow(); // obj
}
};
obj.method();
this
может быть сложным для понимания, но понимание контекста вызова функции помогает предсказать, на что будет ссылаться this.
Понравился пост? Добавь🔥 🔥 🔥
CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11❤2🔥1
The Odin Project - это бесплатный онлайн-курс, который поможет вам освоить все основные навыки веб-разработки, начиная с HTML и CSS, и заканчивая созданием полноценных веб-приложений.
➡️ Ссылка на проект
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤1
⚡️ React.js Cheatsheet – сборник готового кода по множеству тем: компонентам, свойствам, хукам, работе с узлами DOM и т. д.
CodeBase | Frontend
CodeBase | Frontend
Периодически мы будем предлагать вам задания для выполнения и прокачки своих навыков.
Если хотите и дальше получать полезную инфу с крутыми проектами, добавь🔥 🔥 🔥
CodeBase | Frontend | #task
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4
:target {
css declarations;
}
CodeBase | Frontend | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥2
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6
const caesarCipher = (str, num) => {CodeBase | Frontend | #snippets
const arr = [...'abcdefghijklmnopqrstuvwxyz']
let newStr = ''
for (const char of str) {
const lower = char.toLowerCase()
if (!arr.includes(lower)) {
newStr += char
continue
}
let index = arr.indexOf(lower) + (num % 26)
if (index > 25) index -= 26
if (index < 0) index += 26
newStr +=
char === char.toUpperCase() ? arr[index].toUpperCase() : arr[index]
}
return newStr
}
caesarCipher('Hello World', 100) // Dahhk Sknhz
caesarCipher('Dahhk Sknhz', -100) // Hello World
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥3
// Асинхронный код; 'done' журналирован после данных о положении, несмотря на то что 'done' предполагаетсяCodeBase | Frontend | #js
// исполнить в коде позже
navigator.geolocation.getCurrentPosition(position => {
console.log(position);
}, error => {
console.error(error);
});
console.log("done");
// Асинхронный код обработан после промиса; мы получаем желаемый результат — данные о положении
// журналированы, затем журналировано 'done'
const promise = new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(resolve, reject);
});
promise
.then(position => console.log(position))
.catch(error => console.error(error))
.finally(() => console.log('done'));
// Асинхронный код с async/await выглядит как синхронный, наиболее удобочитаемый способ
// работы с промисами
async function getPosition() {
// async/await работает только в функциях (пока)
const result = await new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(resolve, reject);
});
const position = await result;
console.log(position);
console.log('done');
}
getPosition();
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥2
CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Flexer - визуальный конфигуратор CSS Flexbox, который отлично подходит для начинающих для изучения и понимания работы flexbox.
🔗 Ссылка
CodeBase | Frontend | #resource
CodeBase | Frontend | #resource
Please open Telegram to view this post
VIEW IN TELEGRAM
Понравился пост? Добавь🔥 🔥 🔥
CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
CodeBase | Frontend | #scss
Please open Telegram to view this post
VIEW IN TELEGRAM
❤7👍1
CodeBase | Frontend | #react
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
Если вам нравится такой формат постов, добавь🔥 🔥 🔥
CodeBase | Frontend | #cheat_sheets #bg
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥15❤1⚡1
Будет полезно новичкам, да и старичкам тоже.
CodeBase | Frontend | #lesson #js
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6👍3
В данном видеокурсе мы с вами рассмотрим технологию Flexbox. Flexible Box Layout Module (Flexbox) - представляет собой способ компоновки элементов, в основе лежит идея оси. Другими словами все элементы можно располагать вдоль основной и поперечной осей, или вертикально и горизонтально. Технология позволяет буквально в пару свойств создать гибкий лэйаут, или гибкие UI элементы.
CodeBase | Frontend | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
❤10
CodeBase | Frontend | #templates
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4
CodeBase | Frontend | #animate #js
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
Годная вещь для новичков, которые хотят разобраться с флексами
CodeBase | Frontend | #css #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5🔥3👍1
Если понравился пост, добавь🔥 🔥 🔥
CodeBase | Frontend | #js #AI
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7⚡1👍1