Почему функции JavaScript объявлены по-разному

Question

Извинения, если это кажется новичком, я сейчас изучаю Javascript и натолкнулся на различные способы структурирования объявлений функций.Пример ниже

function mapStateToProps(state) {
    console.log(state);
}

const mapStateToProps = state => {
    console.log(state);
}

В чем выгода использования одного или другого;в какой ситуации вы бы использовали один поверх другого?

Answer 1

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

Лучшим примером является следующий:

const team = {
	members: ['Dolly', 'Billy'],
  teamName: 'Hacking Crew',
  teamSummary: function() {
  	return this.members.map(function(member) {
    	return `${member} is on team ${this.teamName}`;
    });
  }
};

console.log(team.teamSummary());

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

Прежде чем я предоставлю решение, поймите, что функции жирной стрелки используют то, что называется лексическим this.Я предоставлю рефакторинг ниже, а затем распакую мое предыдущее предложение:

const team = {
	members: ['Dolly', 'Billy'],
  teamName: 'Hacking Crew',
  teamSummary: function() {
  	return this.members.map((member) => {
    	return `${member} is on team ${this.teamName}`;
    });
  }
};

console.log(team.teamSummary());

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

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

Так что если вместо использования .bind(this) и необходимости кэшировать ссылку на this, вы можете заменитьфункция жирной стрелки как решение.

Answer 2

Функции стрелок - это новый синтаксис ES2015, для меня основным отличием является изменение this контекста, о котором вы можете прочитать здесь https://medium.com/@thejasonfile/es5-functions-vs-es6-fat-arrow-functions-864033baa1a