34 Js This | andron13

This #

Это самая сложная тема. И сложна она возможно потому, что поведение this в JavaScript отличается от поведения this в других языках.

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

this в классе #

class Article {
    title;
    announce;
    text;
    imagePath;
    imageWidth;
    imageHeight;
    constructor(title, text, imagePath) {
        this.title = title;
        this.text = text;
        this.imagePath = imagePath;
    }
    setImageSize(x, y) {
        this.imageWidth = x;
        this.imageHeight = y;
    }
    info = () => {
        console.log(this)
    }
}

let bestArticle = new Article("Афиша Кино на октябрь", "Огромная афиша на 20 фильмов", "/photos/city/345.jpg");

bestArticle.setImageSize(200, 200);

console.log(bestArticle.imageHeight);
myTimer.info();

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

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

Вызвав метод объекта мы передали размеры фотографии для статьи.

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

Запуск метода myTimer.info() выведет нам информацию об объекте.

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

This глобальное #

// https://youtu.be/1RWOi3G91ds
// 1. 
const objOne = {
    a: 10,
    baseFunct: function () {
        console.log(this);
    },
    arrowFunct: () => {
        console.log(this);
    }
}

// objOne.baseFunct();
// objOne.arrowFunct();

//  2. 

const objectTwo = new function () {
    this.a = 10;
    this.baseFunct = function () {
        console.log("base", this);
    }
    this.arrowFunct = () => {
        console.log("arrow", this);
    }

    console.log("object", this);

    setTimeout(function () {
        console.log("timeout", this);
    }, 300)

    setTimeout(() => {
        console.log("timeout", this);
    }, 300)
}

objectTwo.baseFunct();
objectTwo.arrowFunct();

https://www.udemy.com/course/the-complete-javascript-course/learn/lecture/22648275#overview https://metanit.com/web/javascript/4.10.php

Дополнительные ссылки #

Видеообъяснения #

Контекст выполнения

Контекст выполнения (execution context) — это, если говорить упрощённо, концепция, описывающая окружение, в котором производится выполнение кода на JavaScript. Код всегда выполняется внутри некоего контекста.

https://habr.com/ru/company/ruvds/blog/422089/

▍Типы контекстов выполнения

В JavaScript существует три типа контекстов выполнения:

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

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

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

Черновик #

Первый пример #

const objOne = {
    a: 10,
    baseFunct: function () {
        console.log(this);
    },
    arrowFunct: () => {
        console.log(this);
    }
}
objOne.baseFunct();
objOne.arrowFunct();

У таких объектов собственного this нет. Но this есть у функций. Потому в первом случае this будет ссылаться на фанкшион. У стрелочной функции нет такого функционала, она не создаёт this.

Второй пример #

const objOne = new function(){
    this.a = 10,

    this.baseFunct= function () {
        console.log(this);
    } 
    this.arrowFunct = () => {
        console.log(this);
    }
}

objOne.baseFunct();
objOne.arrowFunct();

Третий пример #

const objOne = new function(){
    this.a = 10,

    this.baseFunct= function () {
        console.log(this);
    } 
    this.arrowFunct = () => {
        console.log(this);
    }
    console.log("obj", this);
    setTimeout(function(){
        console.log("timeout", this);
    }, 300)
}

objOne.baseFunct();
objOne.arrowFunct();