как использовать вызов этого аргумента с обычной функцией?

#javascript #this #arrow-functions

#javascript #это #стрелка-функции

Вопрос:

Я пытаюсь вызвать элемент divRepo с помощью метода forEach(), но я в замешательстве из-за этого аргумента. Я могу использовать этот аргумент с функцией стрелки. Но я получаю неопределенный текст в качестве вывода, когда я использую этот аргумент с обычной функцией. можно ли вызвать divRepo с помощью обычной функции? Спасибо…

С помощью обычной функции

     class UI {
      constructor() {
        this.divRepo = document.querySelector("#repos");
        
      }
    
      showUserRepositories(repos) {
        repos.forEach(function (repo) {

       console.log(this) //output : undefined

          this.divRepo.innerHTML = `
            <div class="mb-2 card-body">
                            <div class="row">
                                <div class="col-md-2">
                                <a href="${repo.html_url}" target = "_blank" id = "repoName" >${repo.name}</a>
                                </div>
                        </div>
        
                        </div>
            `;
        });
      }
    
      
    }

С помощью функции со стрелкой

 class UI {
constructor() {
  this.divRepo = document.querySelector("#repos");
  
}

showUserRepositories(repos) {
  repos.forEach( (repo) => {
    console.log(this) // output : UI {divRepo: div#repos}
    this.divRepo.innerHTML = `
      <div class="mb-2 card-body">
                      <div class="row">
                          <div class="col-md-2">
                          <a href="${repo.html_url}" target = "_blank" id = "repoName" >${repo.name}</a>
                          </div>
                  </div>
  
                  </div>
      `;
  });
}

}

Ответ №1:

Непонятно, почему вы не можете использовать функцию со стрелкой, поскольку она была разработана для решения проблем такого типа. Если по какой-либо причине вам нужно использовать функцию, отличную от стрелки, одним из вариантов является использование второго аргумента, для forEach которого устанавливается this контекст:

 repos.forEach(function (repo) {
  // ...
}, this);

Существуют и другие альтернативы, такие как захват ссылки this в замыкании:

 const that = this;
repos.forEach(function (repo) {
  // ...
  console.log(that);
});

…или привязать:

 const processRepo = function (repo) {
  // ...
};
repos.forEach(processRepo.bind(this));