Некоторые представления о функции стрелки JavaScript это

1. Отличие от обычной функции это

1. Стрелочная функция не имеет собственного this, поэтому она полагается на this внешней функции и нуждается в хосте. Если нет, она указывает на окно
   a. Новый конструктор не может быть использован
   b. Аргументов нет, супер, и new.target, которые указывают на соответствующую внешнюю функцию. Переменная
   c. Вы не можете использовать такие методы, как call(), apply() иbind(), чтобы изменить указатель this.

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

3. Это в анонимной функции обратного вызова без стрелки указывает на глобальный объект окна.

function Timer() {
    
    
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数,依赖宿主Timer
  setInterval(() => this.s1++, 1000);
  // 普通回调函数 指向全局
  setInterval(function () {
    
    
    this.s2++;
  }, 1000);
}

2. Использование стрелочных функций

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

var handler = {
    
    
  id: '123456',
  init: function() {
    
    
    document.addEventListener('click',
      event => this.doSomething(event.type), false);
  },
  doSomething: function(type) {
    
    
    console.log('Handling ' + type  + ' for ' + this.id);
  }
};

3. Неприменимые места

1. Первый случай — определить метод объекта, и метод включает его внутрь.

const cat = {
    
    
  lives: 9,
  jumps: () => {
    
    
    this.lives--;
  }
}

В приведенном выше коде метод cat.jumps() является стрелочной функцией, что неверно. При вызове cat.jumps(), если это обычная функция, это внутри метода указывает на cat; если она записана как стрелочная функция, как указано выше, это будет указывать на глобальный объект, поэтому ожидаемый результат не будет получен. . * Это связано с тем, что объект не представляет собой отдельную область видимости и должен иметь функцию *, которая приводит к тому, что область действия, когда функция стрелки перехода определена, является глобальной областью действия.

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

var button = document.getElementById('press');
button.addEventListener('click', () => {
    
    
  this.classList.toggle('on');
});

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

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