JavaScript `Это ключевое слово + 5 ключевых правил привязки, объясненные для начинающих JS

JavaScript’s Это Ключевое слово является одним из самых сложных аспектов языка для понимания. Но это критически важно для написания более продвинутого кода JavaScript.

В JavaScript, Это Ключевое слово позволяет:

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

Это Ключевое слово очень тесно связано с функциями JavaScript. Когда дело доходит до Это Фундаментальное дело – понять, где вызывается функция. Потому что мы не знаем, что в Это Ключевое слово, пока функция не будет вызвана.

Использование Это может быть классифицирован на пять разных Привязка аспекты. В этой статье мы узнаем обо всех пяти аспектах с примерами.

В JavaScript, A Лексическая среда где ваш код физически написан. В приведенном ниже примере имя переменной является лексически Внутри функции sayname () Отказ

function sayName() {
  let name = 'someName';
  console.log('The name is, ', name);
 }

Контекст исполнения Относится к коду, который в данный момент работает, и все остальное, которое помогает запускать его. Доступны много лексических сред, но это В настоящее время Бег управляется Контекст выполнения .

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

Это явление известно как Привязка в JavaScript. Привязка Помогает ассоциировать идентификаторы (переменные, имена функций) с Это Ключевое слово для Контекст выполнения .

Не волнуйтесь, если вы найдете это немного трудно понять сейчас. Вы получите лучшее понять, как мы продолжаем.

Неявный связывающий охватывает большую часть случаев использования для борьбы с Это ключевое слово.

В неявном привязке вам нужно проверить, что для слева от точек (.) Оператор, прилегающий к функции при вошении времени. Это определяет, что Это это обязательно.

Давайте посмотрим на пример, чтобы понять это лучше.

let user = {
    name: 'Tapas',
    address: 'freecodecamp',
    getName: function() {
        console.log(this.name);
    }
};

user.getName();

Здесь Это связан с объектом пользователя. Мы знаем это потому, что слева от точек (.) Оператор, прилегающий к функции getname () мы видим Пользователь объект. Итак, Это. Немейте собирается войти Тапас в консоли.

Давайте посмотрим другой пример, чтобы лучше понять эту концепцию:

function decorateLogName(obj) {
      obj.logName = function() {
          console.log(this.name);
      }
  };

  let tom = {
      name: 'Tom',
      age: 7
  };

  let jerry = {
      name: 'jerry',
      age: 3
  };

  decorateLogName(tom);
  decorateLogName(jerry);

  tom.logName();
  jerry.logName();

В этом примере у нас есть два объекта, Том и Джерри . Мы украсили (расширенные) эти объекты, прикрепляя метод под названием logname () Отказ

Обратите внимание, что когда мы вызываем Tom.logname. () , Том Объект слева от точки (.) Оператор, прилегающий к функции logname () Отказ Итак, Это связан с Том Объект и это регистрирует значение Том ( Это. Немайте равно Тому здесь). То же самое относится, когда Jerry.logname () вызывается.

Мы видели, что JavaScript создает среду для выполнения кода, который мы пишем. Требуется создание памяти для переменных, функций, объектов и так далее в Этап создания Отказ Наконец он выполняет код в Фаза выполнения Отказ Эта специальная среда называется Контекст исполнения Отказ

Может быть много таких сред (контексты выполнения) в приложении JavaScript. Каждый контекст выполнения работает независимо от других.

Но иногда мы можем захотеть использовать вещи из одного контекста выполнения в другом. Именно здесь вступает явное привязку.

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

Есть три особенного метода, Позвоните () , Применить () и Bind () Это поможет нам добиться явного связывания.

Как метод вызова JavaScript () Работает

С Позвоните () Метод, контекст, с помощью которого необходимо назвать функцию, будет передана в качестве параметра для Позвоните () Отказ Давайте посмотрим, как это работает с примером:

let getName = function() {
     console.log(this.name);
 }
 
let user = {
   name: 'Tapas',
   address: 'Freecodecamp'  
 };

getName.call(user);

Здесь Позвоните () Метод вызывается на функцию, называемой getname () Отказ getname () Функция просто журналы это имя . Но что такое Это здесь? Это определяется тем, что было передано на Позвоните () метод.

Здесь Это Будет связываться с объектом пользователя, потому что мы передаем пользователь в качестве параметра на Позвоните () метод. Итак, Это. Немейте следует воспользоваться значением имени свойство пользовательского объекта, то есть Тапас Отказ

В приведенном выше примере мы прошли только один аргумент для Позвоните () Отказ Но мы также можем передавать несколько аргументов Позвоните () , нравится:

let getName = function(hobby1, hobby2) {
     console.log(this.name + ' likes ' + hobby1 + ' , ' + hobby2);
 }

let user = {
   name: 'Tapas',
   address: 'Bangalore'  
 };

let hobbies = ['Swimming', 'Blogging'];
 
getName.call(user, hobbies[0], hobbies[1]);

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

Здесь я прохожу Плавание и Блоггинг как два параметра для getname () функция.

Вы заметили точку боли здесь? В случае Позвоните () Аргументы должны быть переданы один за другим – что не умный способ делать вещи! Вот где наш следующий метод, Применить () , входит в картину.

Как применить JavaScript () Метод работает

Этот беспокойный способ передачи аргументов к Позвоните () Метод может быть решен другим альтернативным методом, называемым Применить () Отказ Это точно так же, как Позвоните () Но позволяет вам пройти аргументы более удобно. Посмотри:

let getName = function(hobby1, hobby2) {
     console.log(this.name + ' likes ' + hobby1 + ' , ' + hobby2);
 }
 
let user = {
   name: 'Tapas',
   address: 'Bangalore'  
 };

let hobbies = ['Swimming', 'Blogging'];
 
getName.apply(user, hobbies);

Здесь мы можем пройти массив аргументов, что намного удобнее, чем передавать их один за другим.

Совет: когда у вас есть только один аргумент, либо отсутствие аргументов, чтобы пройти, использовать Позвоните () Отказ Когда у вас есть несколько аргументов Value, используйте Применить () Отказ

Как метод JavaScript BIND () Работает

Bind () Метод похож на Позвоните () метод, но с одним разницей. В отличие от Позвоните () Способ вызова функции напрямую, Bind () Возвращает новую функцию, и мы можем вызвать эту вместо этого.

let getName = function(hobby1, hobby2) {
     console.log(this.name + ' likes ' + hobby1 + ' , ' + hobby2);
 }

let user = {
   name: 'Tapas',
   address: 'Bangalore'  
 };

let hobbies = ['Swimming', 'Blogging'];
let newFn = getName.bind(user, hobbies[0], hobbies[1]); 

newFn();

Здесь getname.bind () не вызывает функцию getname () напрямую. Это возвращает новую функцию, Ньюфн И мы можем вызвать это как newfn () Отказ

А Новый Ключевое слово используется для создания объекта из функции конструктора.

let Cartoon = function(name, character) {
     this.name = name;
     this.character = character;
     this.log = function() {
         console.log(this.name +  ' is a ' + this.character);
     }
 };

Вы можете создавать объекты, используя Новый Ключевое слово такое:

 let tom = new Cartoon('Tom', 'Cat');
 let jerry = new Cartoon('Jerry', 'Mouse');

Когда функция вызывается с Новый Ключевое слово, JavaScript создает внутреннюю Это объект (например, this = {}) внутри функции. Недавно созданный Это связывается с созданным объектом с использованием Новый ключевое слово.

Звуки сложно? Хорошо, давайте сломаемся. Возьми эту строку,

let tom = new Cartoon('Tom', 'Cat');

Здесь функция мультфильма вызывается с Новый ключевое слово. Так что внутренне созданные Это будет связан с новым объектом, созданным здесь, что является Том Отказ

Как вы думаете, что будет выходом кода ниже? Что такое Это Привязка здесь?

let sayName = function(name) {
    console.log(this.name);
};

window.name = 'Tapas';
sayName();

Если Это Ключевое слово не разрешается с любым из привязки, скрытый , явный или Новый Тогда Это связан с Окно (глобальное) объект.

Есть одно исключение, хотя. JavaScript Строгий режим Не допускает этого привязки по умолчанию.

"use strict";
function myFunction() {
  return this;
}

В приведенном выше случае Это это неопределенный.

В HTML-обработчиках событий Это связывается с элементами HTML, которые получают событие.

Это выходной журнал в консоли при нажатии на кнопку:

""

Вы можете изменить стиль кнопки, используя Это Ключевое слово, как это:

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

и JavaScript:

function changeColor() {
  this.style.color='teal';
}

Приведенный выше код не будет работать должным образом. Как мы видели в правиле 4, здесь Это будет связан с глобальным объектом (в режиме «не строгий»), где нет Стиль объект для установки цвета.

Обобщить,

В случае неявного связывания Это связывается с объектом слева от точек (.) Оператора.
В случае явного привязки мы можем вызвать функцию с объектом, когда функция находится вне контекста выполнения объекта. Методы Позвоните () , Применить () и Bind () Играть здесь большую роль.
Когда функция вызывается с Новый ключевое слово, Это Ключевое слово внутри функции связывается с созданным новым объектом.
Когда Это Ключевое слово не разрешается с любым из привязки, скрытый , явный или Новый Тогда Это связан с Окно (глобальное) объект. В строгом режиме JavaScript Это будет не определен.
В HTML-обработчиках событий Это связывается с элементами HTML, которые получают событие.

Есть еще один случай, где Это ведет себя по-разному, например, с ES6 Arrow Функция с. Мы посмотрим на это в будущей статье.

Я надеюсь, что вы нашли эту статью Insightful. Вам также может понравиться,

Если эта статья была полезна, пожалуйста, поделитесь этим, чтобы другие могли прочитать его также. Вы можете у меня в Twitter ( @tapasadhary ) с комментариями или не стесняйтесь следовать за мной.

Оригинал: “https://www.freecodecamp.org/news/javascript-this-keyword-binding-rules/”

Как метод вызова JavaScript () Работает

Как применить JavaScript () Метод работает

Как метод JavaScript BIND () Работает

Читайте ещё по теме: