В этой статье мы попытаемся расшифровать одну из самых страшных и запутанных частей JavaScript - ключевое слово this.
Вы согласитесь со мной, что в JavaScript есть несколько странных областей, ключевое слово this - одно из них. Правильное понимание странной природы this сделает вас лучшим разработчиком JavaScript.
Понять ключевое слово this проще, чем кажется, это просто где вызывается функция или объект, который вызывала функция this является собственностью.
Мы разделим this контекст на четыре части и рассмотрим их одну за другой.
- привязка окна
- неявная привязка
- явная привязка
- новая привязка
привязка окна: первое, что следует здесь отметить, это то, что код, который мы пишем на JavaScript, выполняется в глобальном контексте выполнения, а также в базовом контексте выполнения.
В контексте глобального исполнения есть несколько важных моментов. У нас есть глобальный объект и переменная this, созданная для нас. Чтобы доказать это, давайте запустим нижеприведенный фрагмент кода.
<html lang="en">
<head>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
единственная строка кода, которую мы будем иметь в нашем index.js, - это console.log(this), если вы откроете файл index.html в браузере, проверьте свою консоль с Crtl+Shift+I, результат, который вы увидите, должен выглядеть примерно так, как показано на изображении ниже.
Что это значит для нас? код, который мы пишем, запускается в глобальном объекте, который является объектом окна. Теперь давайте вернемся к нашему index.js и напишем функцию a, все, что эта функция будет делать, это console.log(this)
если мы запустим приведенный выше фрагмент, результатом будет window, где вызывается function a.
неявная привязка: это одна из наиболее распространенных привязок, которые вы увидите, она возникает, когда точечная нотация используется для вызова функции. Например, результатом приведенного ниже фрагмента будет объект person.
в неявной привязке все, что находится слева от точки, становится this контекстом
явная привязка: каждая функция как .call(), .bind(), .apply() на ней. Явное связывание происходит, когда любой из этих .call(), .bind(), .apply() используется для вызова функции. Ниже приведен аналогичный пример, подобный приведенному выше, функция sayName перемещается из объекта в глобальную область видимости.
в этом примере мы явно привязываем sayName к объекту joeboy и marley, который является первым аргументом, который принимает .call(), все остальное, переданное в .call(), будет получено как аргументы функции.
.apply() - это то же самое, что и .call(), но вместо того, чтобы передавать аргументы .call() один за другим, вы передаете массив .apply(), и JavaScript анализирует его за вас.
.bind() почти то же самое, что .call(), за исключением того факта, что .bind() не вызывает функцию немедленно, он возвращает нам функцию, чтобы вы могли вызвать ее позже. Если вы написали код React, вы, вероятно, видели этот шаблон. Давайте посмотрим на пример
новая привязка: для создания объекта в JavaScript мы используем конструкторы функций или синтаксис класса ES6. В любом случае мы создаем их с помощью ключевого слова new. new выполняет три функции: 1. создает новый объект, 2. связывает контекст this с созданным объектом, 3. возвращает созданный объект. давайте посмотрим на пример ниже.
спасибо за чтение, за дополнительными статьями по JavaScript следите здесь и в твиттере.
