Рубрики
Без рубрики

Глубокое погружение в это в JavaScript: почему он имеет решающее значение для написания хорошего кода.

Используя простую терминологию и реальный мир, этот пост объясняет, что это такое и почему это полезно. Это для вас заметила, что многие объяснения для этого в JavaScript учитывают предположение, что вы приходите с некоторых объектно-ориентированных языков программирования, такими как Java, C ++ или Python. Эта почта

Используя простую терминологию и реальный мир, этот пост объясняет, что Это Есть и почему это полезно.

Это для вас

Я заметил, что многие объяснения для Это В JavaScript преподается предположением, что вы идете с некоторого объектно-ориентированного языка программирования, как Java, C ++ или Python. Этот пост ориентирован на тех из вас, у кого нет предсказаний о том, что вы думаете Это Есть или что это должно быть. Я постараюсь объяснить что Это есть и Почему Это полезно простым способом без ненужного жаргона.

Может быть, вы пропастили погружение в Это Потому что это выглядело странно и страшно. Или, может быть, вы используете только это, потому что Stackoverflow говорит, что вам нужно, чтобы сделать определенные вещи в реакции.

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

Функциональное vs объектно-ориентированное программирование

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

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

И я был прав.

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

Допустим, вы создаете веб-приложение, в котором пользователь подписывает Facebook, и вы показываете некоторые данные относительно их друзей Facebook. Вам нужно будет ударить конечную точку Facebook, чтобы получить данные своих друзей. Это может иметь некоторую информацию, такую как имя , фамилия , имя пользователя , Смешивание подруги , Друждата , День рождения и Lasttenposts Отказ

const data = [
  {
    firstName: 'Bob',
    lastName: 'Ross',
    username: 'bob.ross',    
    numFriends: 125,
    birthday: '2/23/1985',
    lastTenPosts: ['What a nice day', 'I love Kanye West', ...],
  },
  ...
]

Данные выше – это то, что вы получаете от (поддельные, мнимые) API Facebook. Теперь вам нужно преобразовать его, чтобы он был в формате, который вам полезен и ваш проект. Допустим, вы хотите показать следующее для каждого из друзей пользователя:

  • Их имя в формате `$ {firstname} $ {фамилия}`
  • Три случайных поста
  • Количество дней до их дня рождения

Функциональный подход

Функциональный подход будет передавать весь массив или каждый элемент массива в функцию, которая возвращает материалы, которые вам нужны:

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

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

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

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

Объектно-ориентированный подход

Объектно-ориентированный подход может быть немного сложнее понять для тех, кто новый для программирования и изучения JavaScript. Идея вот что вы преобразуете каждого друга в Объект, который имеет все, что ему нужно создать, что Вы Как нужна разработчик.

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

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    }
  };
}
const objectFriends = data.map(initializeFriend)
objectFriends[0].getThreeRandomPosts() 
// Gets three of Bob Ross's posts

Объектно-ориентированный подход является создание объектов для ваших данных, которые имеют состояние и включают в себя все необходимую информацию для создания данных, которые вам полезны и ваш проект.

Что это связано с этим?

Возможно, вы никогда не думали писать что-то вроде Инициализировать подруги Выше, и вы можете подумать что-то подобное, это может быть довольно полезно. Вы также можете заметить, однако, что это не Действительно объектно-ориентированный.

Единственная причина, по которой методы getthreerandomposts. или Днямисубилбародие даже работал в примере выше, является из-за закрытия. У них все еще есть доступ к данные после Инициализировать подруги Возвращает из-за закрытия. Для получения дополнительной информации о закрытии проверить Вы не знаете JS: Область и закрытия .

Что если у вас был другой метод, давайте назовем это приветствие Отказ Обратите внимание, что метод (в отношении объекта в JavaScript) является просто атрибутом, значение которого является функцией. Мы хотим приветствие сделать что-то вроде этого:

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    },
    greeting: function() {
      return `Hello, this is ${fullName}'s data!`
    }
  };
}

Будет ли эта работа?

Нет!

Все в нашем недавно созданном объекте имеет доступ ко всем переменным в Инициализировать подруги Но не какой-либо из атрибутов или методов в самом объекте. Конечно, вы задаете вопрос:

Да, ты абсолютно мог. Но что, если мы также хотели включить в приветствие, сколько дней до дня рождения этого друга? Мы должны были бы как-то найти способ звонить Днямисубилбародие изнутри приветствие Отказ

Пришло время для это !

Наконец, что это

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

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

Не волнуйтесь, мы доберемся до этого позже!

Так что, если мы хотели позвонить Днямисубилбародие изнутри приветствие Мы можем просто позвонить this.getdaysUntilbirtdaysay потому что Это В этом сценарии только относится к самому объекту.

Боковая заметка: не используйте Это В регулярной функции OLE в глобальном объеме или в объеме другой функции! Это это объектно-ориентированная конструкция. Поэтому он имеет только значение в контексте объекта (или класса)!

Давайте рефактором Инициализировать подруги использовать Это :

function initializeFriend(data) {
  return {
    lastTenPosts: data.lastTenPosts,
    birthday: data.birthday,    
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from this.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use this.birthday to get the num days until birthday
    },
    greeting: function() {
      const numDays = this.getDaysUntilBirthday()      
      return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`
    }
  };
}

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

Есть несколько раз, где вы хотите заставить Это быть что-то в частности. Хороший пример предназначен для обработчиков событий. Допустим, мы хотели открыть страницу в Facebook, когда пользователь нажимает на них. Мы могли бы добавить OnClick Метод нашего объекта:

function initializeFriend(data) {
  return {
    lastTenPosts: data.lastTenPosts,
    birthday: data.birthday,
    username: data.username,    
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from this.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use this.birthday to get the num days until birthday
    },
    greeting: function() {
      const numDays = this.getDaysUntilBirthday()      
      return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`
    },
    onFriendClick: function() {
      window.open(`https://facebook.com/${this.username}`)
    }
  };
}

Обратите внимание, что мы добавили Имя пользователя на наш объект, так что на сбросе Имел доступ к нему, чтобы мы могли открыть новое окно с страницей Facebook этого друга. Теперь нам просто нужно написать HTML:

И теперь JavaScript:

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

В указанном выше коде мы создаем объект для BOB Ross. Мы получаем элемент DOM, связанный с BOB Ross. И теперь мы хотим выполнить на сбросе Метод для открытия страницы Bob’s Facebook. Должен работать, как ожидалось, верно?

Неа!

Что пошло не так?

Обратите внимание, что функция, которую мы выбрали для обработчика OnClick, была bobrossobj.onfriendclick Отказ Смотрите проблему еще? Что если мы повторно написали это так:

bobRossDOMEl.addEventListener("onclick", function() {  window.open(`https://facebook.com/${this.username}`)})bobRossDOMEl.addEventListener("onclick", function() {
  window.open(`https://facebook.com/${this.username}`)
})

Теперь вы видите проблему? Когда мы устанавливаем обработчик OnClick, чтобы быть Bobrossobj.onfriends. то, что мы на самом деле делаем, привлекает функцию, которая хранится в bobrossobj.onfriendclick и проезжая в качестве аргумента. Это больше не «прикреплено» к Bobrossobj что означает Это больше не относится к боброссобж . Это на самом деле относится к глобальному объекту, что означает, что Это. ИСПОЛЬЗОВАНИЕ не определен. Кажется, что мы не повезем в этот момент.

Пришло время для Bind Действительно

Явное обязательное обязательство этого

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

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossObj.onFriendClick = bobRossObj.onFriendClick.bind(bobRossObj)
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

Раньше Это был установлен на основе правила по умолчанию. С использованием Bind Мы явно установили значение Это в bobrossobj.onfriendclick быть самим объектом или Bobrossobj Отказ

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

Функции стрелки

Возможно, вы заметили, что функции arrow – это бедра новая вещь. Люди, кажется, нравятся они, потому что они кратки и элегантны. Вы можете знать, что они немного отличаются от нормальных функций Но, может быть, вы не совсем знаете, какова разница.

Возможно, самый простой способ описать, как функции arrow разные это:

Что бы ни это относится к тому, где объявляется функция стрелки, это Относится к тому же, внутри этой функции стрелки.

Давайте объясним с нашими Инициализировать подруги пример. Допустим, мы хотели добавить функцию небольшого помощника в … приветствие : 

function initializeFriend(data) {
  return {
    lastTenPosts: data.lastTenPosts,
    birthday: data.birthday,
    username: data.username,    
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from this.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use this.birthday to get the num days until birthday
    },
    greeting: function() {
      function getLastPost() {
        return this.lastTenPosts[0]
      }
      const lastPost = getLastPost()           
      return `Hello, this is ${this.fullName}'s data!
             ${this.fullName}'s last post was ${lastPost}.`
    },
    onFriendClick: function() {
      window.open(`https://facebook.com/${this.username}`)
    }
  };
}

Будет ли эта работа? Если нет, как мы можем изменить его, чтобы сделать это работать?

Нет, это не будет работать. Потому что getlastpost не вызывается в контексте объекта, Это внутри getlastpost Падает в правило по умолчанию, который является глобальным объектом.

Я знаю, что «в контексте объекта» является расплывчатой терминологией. Возможно, хороший способ определить, называется ли функция «в контексте объекта» – это поговорить о том, как вызывается функция и определить, будет ли объект «прикреплен» к функции.

Давайте поговорим через то, что происходит, когда мы выполняем bobrossobj.onfriendclick () Отказ ” Хватаю мне объект Bobrossobj , ищите атрибут на сбросе и Позвоните в функцию, назначенную этому атрибуту “

Теперь давайте поговорим через то, что происходит, когда мы выполняем getlastpost () Отказ ” Возьмите мне функцию с именем getlastpost и назвать это ». Обратите внимание, как не было упоминания об объекте?

Хорошо, вот хитрый, чтобы проверить ваши знания. Допустим, есть функция FunctionCaller где все это происходит, это функции вызова:

functionCaller(fn) {
  fn()
}

Что если мы сделали это: FunctionCaller (Bobrossobj.onfriendclick) ? Вы бы сказали, что на сбросе был назван «в контексте объекта»? Будет Это. ИСПОЛЬЗОВАНИЕ быть определенным?

Давайте поговорим через это: «Возьми объект Bobrossobj и искать атрибут на сбросе Отказ Возьмите его значение (что происходит как функция), перенесите его в FunctionCaller и назвать это fn . Теперь выполните функцию имени FN ” Обратите внимание, что функция получает «отделение» от Bobrossobj Прежде чем это называется и поэтому не вызывается «в контексте объекта Bobrossobj «Это означает, что Это. Иногда будет неопределенным.

Стрелка функционирует на спасение:

function initializeFriend(data) {
  return {
    lastTenPosts: data.lastTenPosts,
    birthday: data.birthday,
    username: data.username,    
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from this.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use this.birthday to get the num days until birthday
    },
    greeting: function() {
      const getLastPost = () => {
        return this.lastTenPosts[0]
      }
      const lastPost = getLastPost()           
      return `Hello, this is ${this.fullName}'s data!
             ${this.fullName}'s last post was ${lastPost}.`
    },
    onFriendClick: function() {
      window.open(`https://facebook.com/${this.username}`)
    }
  };
}

Наше правило сверху:

Что бы ни это относится к тому, где объявляется функция стрелки, это Относится к тому же, внутри этой функции стрелки.

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

Заключение

Это Является иногда смущенным, но полезным инструментом для разработки приложений JavaScript. Это определенно не все есть для Это Отказ Некоторые темы, которые не были покрыты:

  • Звоните и подать заявление
  • Как Это изменения, когда Новый является вовлеченный
  • Как Это Изменения с ES6 класс

Я призываю вас задать себе вопросы о том, что вы думаете Это Должно быть в определенных ситуациях, а затем проверить себя, запустив этот код в браузере. Если вы хотите узнать больше о Это , проверить Вы не знаете JS: это и объектные прототипы Отказ

И если вы хотите проверить себя, проверить Упражнения YDKJS: это и объектные прототипы Отказ

Оригинал: “https://www.freecodecamp.org/news/a-deep-dive-into-this-in-javascript-why-its-critical-to-writing-good-code-7dca7eb489e7/”

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