Удаление ключевого слова JavaScript "Это" делает его лучшим языком. Вот почему.

Автор оригинала: Cristian Salcescu.

Читать Функциональная архитектура с реагированием и redux И научитесь создавать приложения в стиле функций.

это Конечно, это источник много путаницы в JavaScript. Причина в том, что это Зависит от того, как была вызвана функция, не где была определена функция.

JavaScript без это Похоже на лучший функциональный язык программирования.

Это теряющее контекст

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

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

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

class Timer {
 constructor(callback, interval){
    this.callback = callback;
    this.interval = interval;
    this.timerId = 0;
  }
  
 executeAndStartTimer(){
   this.callback().then(function startNewTimer(){
       this.timerId =  
       setTimeout(this.executeAndStartTimer, this.interval);
   });
 }
    
 start(){
   if(this.timerId === 0){
     this.executeAndStartTimer();
   }
 }
 stop(){
   if(this.timerId !== 0){
     clearTimeout(this.timerId);
     this.timerId = 0;
   }
 }
}

const timer = new Timer(getTodos, 2000);
timer.start();
function getTodos(){
  console.log("call");
  return fetch("https://jsonplaceholder.typicode.com/todos");
}

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

class SearchForm extends React.Component {
  handleChange(event) {
    const newQuery = Object.freeze({ text: event.target.value });
    this.setState(newQuery);
  }
  search() {
    const newQuery = Object.freeze({ text: this.state.text });
    if (this.props.onSearch) this.props.onSearch(newQuery);
  }
  render() {
    return (
      
      
      
      
    );
  }
}

Есть много решений для этих вопросов: Bind () Способ, то/самоподъемность, функция стрелки.

Для получения дополнительной информации о том, как исправить это Сопутствующие вопросы проблемы, посмотрите на Что делать, когда «это» теряет контекст .

Это не имеет инкапсуляции

это создает проблемы с безопасностью. Все члены объявили на это публичные.

class Timer {
 constructor(callback, interval){
    this.timerId = "secret";
  }
}

const timer = new Timer();
timer.timerId; //secret

Нет этого, никаких пользовательских прототипов

Что если, вместо того, чтобы пытаться исправить это Потерять контекст и проблемы с безопасностью, мы избавляемся от всего этого вместе?

Удаление это имеет набор последствий.

Нет это в основном означает нет Класс , нет конструктора функции, нет Новый нет Object.Create. () .

Удаление это Не означает никаких пользовательских прототипов в целом.

Лучший язык

JavaScript – это как функциональный язык программирования, так и на основе прототипа языком. Если мы избавимся от это Мы остались с JavaScript в качестве функционального языка программирования. Это еще лучше.

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

Объектно ориентированное программирование без этого

Вопросы – это как строить объекты без это Отказ

Будут два вида объектов:

чистые данные объекты
Объекты поведения

Чистые данные объекты

Объекты чистых данных содержат только данные и не имеют поведения.

Любое вычисленное поле будет заполнено при создании.

Объекты чистых данных должны быть неизменными. Нам нужно Объект () их при создании.

Объекты поведения

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

Давайте создадим Объект таймера в это неактивный подход.

function Timer(callback, interval){
  let timerId;
  function executeAndStartTimer(){
    callback().then(function makeNewCall(){
      timerId = setTimeout(executeAndStartTimer, interval);
    });
  }
  function stop(){
    if(timerId){
      clearTimeout(timerId);
      timerId = 0;
    }
  }
  function start(){
    if(!timerId){
      executeAndStartTimer();
    }
  }
  return Object.freeze({
    start,
    stop
  });  
}

const timer = Timer(getTodos, 2000);
timer.start();

Таймер Объект имеет два публичных метода: Начать и Стоп Отказ Все остальное является частным. Нет это Потерять контекстные проблемы, так как нет это Отказ

Подробнее о том, почему для предпочтения это неактуальный подход, когда объекты поведения поведения посмотрите на Функция класса VS Factory: исследуя путь вперед .

объем памяти

Система прототипа лучше при сохранении памяти. Все методы создаются только один раз в объекте прототипа и совместно используются всеми случаями.

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

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

Компоненты без этого

это Может потребоваться многими каркатами компонентов, таких как React или Vue, например.

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

function ListItem({ todo }){
  return (
    
      { todo.title}
      { todo.userName }
    
  );
}

Мы также можем создавать компоненты штата без это с Реактивные крючки Отказ Посмотрите на следующий пример :

import React, { useState } from "react";
function SearchForm({ onSearch }) {
  const [query, setQuery] = useState({ text: "" });
  function handleChange(event) {
    const newQuery = Object.freeze({ text: event.target.value });
    setQuery(newQuery);
  }
  function search() {
    const newQuery = Object.freeze({ text: query.text });
    if (onSearch) onSearch(newQuery);
  }
  return (
    
      
      
    
  );
};

Удаление аргументов

Если мы избавимся от это Мы также должны избавиться от аргументы Поскольку у них такое же динамическое поведение связывания.

Избавиться от Аргументы довольно просто. Мы просто используем новый синтаксис параметра отдыха. На этот раз параметр покоя является объектом массива:

function addNumber(total, value){
  return total + value;
}

function sum(...args){
  return args.reduce(addNumber, 0);
}

sum(1,2,3); //6

Заключение

Лучший способ избежать это Связанные проблемы – не использовать это вообще.

JavaScript без это может быть лучшим функциональным языком программирования.

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

С реактивными крючками мы можем создать это неактуальные составляющие.

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

Откройте для себя функциональный JavaScript был назван одним из Лучшие новые функциональные программирования книги BookAuthority Действительно

Для получения дополнительной информации о применении методов функциональных программиров в реакции посмотрите на Функциональный реагировать Отказ

Учить Функциональный реагировать в проекте, основанном на проекте, с Функциональная архитектура с реагированием и redux Отказ

Следуйте в Twitter

Оригинал: “https://www.freecodecamp.org/news/removing-javascripts-this-keyword-makes-it-a-better-language-here-s-why-db28060cc086/”