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

Question

Почему бы просто не использовать let total в нижнем регистре? Я знаю, что целью является демонстрация того, как функция стрелки решает дилемму this, но в реальном мире у нас есть реальный вариант использования для этого?

function sum() {
  this.total = 0;

  arr.forEach((item) => {
    this.total+= item;  // all is well `this` points to outer function
  })
  return this.total;
} 

Answer 1

Локальная переменная имеет смысл в вышеприведенном случае. Но эта (лексическая область), использующая функцию стрелки, имеет более широкое применение.

В наши дни вы используете фреймворк для вашего проекта, в котором есть компоненты и все. У нас есть переменные на уровне компонентов, а затем они связаны с html.

class component {
  constructor() {
   this.data  = {};
  }
  // lets say you bring data and have to assign to above this.data
  getData() {

      somePromise.then((res) => {
        this.data = res // you can access parent. No this dra,a
      })
  }     

 }

Но в случае нормальной функции

  getData() {
      const self = this; // save parent this to local variable
      somePromise.then(function(res) {
           self.data = res // now you can set data as function'this is different here
      })
   }

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

Таким образом, в реальном мире функция стрелки блестяще решила эту дилемму.