JavaScript и это

JavaScript был выпущен в 1995 году, что заставляет его 24 года во время написания этого поста. Он пошел от небольшого, языка игрушек на язык, используемый практически во всех областях. Мы используем его в веб-приложении, мобильных приложениях, микроконтроллерах и многих других. Но в JavaScript есть еще некоторые основные функции, с которыми много все еще борются. Один из них, что это такое, что это ключевое слово имеет значение в JavaScript и как оно ведет себя? Вот почему я постараюсь объяснить это в этом посте.

Введение

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

Глобальный объем

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

console.log(this); // window object

Функции как метод объекта

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

const obj = {
    num: 1,
    whatIsThis: function() {
        console.log(this); // obj {num: 1, whatIsThis: ƒ}
    }
};

obj.whatIsThis();

Глобальная функция

Хорошо, если у нас есть функция, которая принадлежит объекту, это этот объект. Но что, если функция не принадлежит объекту, но определяется в глобальном объеме. Ну, это все еще принадлежит к какому объекту. Глобальный. И в случае браузера это окно объекта.

function globalFunction() {
    console.log(this); // window
}

globalFunction();

Глобальная функция как новый экземпляр

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

function FunctionObject() {
    console.log(this); // FunctionObject {}
}

new FunctionObject();

Функция стрелки как метод

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

const obj = {
    num: 1,
    whatIsThis: () => {
        console.log(this); // window, not obj
    }
};

obj.whatIsThis();

Заключение

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

Примеры кода, используемые в этом посте, также можно найти в моем Репозиторий GitHub Отказ

Оригинал: “https://dev.to/chriss/javascript-and-this-c95”