`bind()`에 대한 바인드에서?

간단한 (그리고 도움이 되었으면 하는) 예 및 설명

Flatiron School 동료들과 저는 JavaScript 단원에서 서로의 코드와 프로젝트를 존경하면서 bind() 를 오해한 것이 저 혼자가 아니라는 것을 깨달았습니다. 결국 그것을 사용하여 내 응용 프로그램인 Ear Trainer를 만드는 데 도움을 준 사람으로서, 여기서 정확히 무슨 일이 일어나고 있는지 이해하기 위해 bind()의 개념을 파악하는 데 도움이 필요할 수 있는 귀하 또는 다른 사람을 돕기 위해 잠시 시간을 갖기로 결정했습니다. ..

가장 간단하게 bind() 는 무엇입니까? 음, 우선 bind()는 JavaScript 방법입니다. 그리고 그것은 무엇을합니까? 음, MDN 웹 문서는 다음과 같이 말합니다.

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

그리고 Mozilla 문서의 시작 부분을 읽은 것은 모두 훌륭하고 좋은 일이었지만 지원.bind()을 하기 전까지는 이 문서의 강력함을 실제로 보고 감사하게 되었습니다.

Ear Trainer는 JavaScript 프런트엔드와 Rails API 백엔드가 포함된 전체 스택 애플리케이션이며, 음악가가 아닌 사람들을 위해 음악가가 멜로디 간격을 식별하는 능력을 향상시키는 데 도움이 되는 도구입니다( 한 음에서 다른 음까지의 거리)를 귀로(일명 들음으로써). 나는 질문이 소리이고 사용자에게 간격이 얼마인지에 대한 4개의 객관식 옵션이 제시되는 퀴즈 응용 프로그램처럼 작동하도록 프로그램을 설계했습니다. 그래서 당연히 이것을 구축할 때 클릭한 버튼(있는 경우)을 등록한 다음 원하는 결과로 반영하는event listeners이 필요했습니다.

내 renderQuestion() 함수 내에서 for 루프를 사용하여 응답에 대한 이벤트 리스너를 추가했습니다.

class Question {
    constructor(id, interval, answer_1, answer_2, answer_3, answer_4, correct_answer, game){
        this.id = id
        this.interval = interval
        this.answer_1 = answer_1
        this.answer_2 = answer_2
        this.answer_3 = answer_3
        this.answer_4 = answer_4
        this.correct_answer = correct_answer
        this.game = game
    }

    renderQuestion(){
        ... 
        for (let index = 0; index < 4; index++) {
            const answer = document.querySelectorAll(".answer")[index];
            answer.addEventListener("click", this.handleAnswer.bind(this))
        }
        ... 
        }
    ... 
}

이제 for 루프의 이벤트 리스너를 보면 this.handleAnswer 뒤에 .bind(this) 가 오는 것이 왜 필요한지 궁금할 것입니다. .bind(this) 가 없으면 코드의 의도는 매우 명확합니다. 답변을 클릭하면 handleAnswer 가 트리거되고 조건을 사용하여 이 질문에 대해 취해야 할 조치를 결정합니다.

    handleAnswer(){
            if (event.target.innerText === this.correct_answer) {
                this.gameScore()
            }
            else { 
                event.target.style.color = "red";
            }
    }

다음 예를 들어보세요.

.bind(this) 가 없으면 handleAnswer() 의 this 가 실제로 전체 질문이 아니라 button.button.answer 가 되기 때문에 추가해야 합니다. 예를 들어 오른쪽 상단의 답변을 클릭하면 this는 <button class="button answer">Tritone</button> )가 됩니다. 이 경우 이것이 우리에게 의미하는 바는 correct_answer에 this가 없기 때문에 대상의 innerText와 질문의 correct_answer를 실제로 비교할 수 없다는 것입니다! .bind(this) 를 추가하여 this에 대한 handleAnswer() 값을 바인딩 시 this 값으로 변경합니다! 이제 this 의 값을 보면 다음과 같습니다.

Question {id: undefined, interval: "/assets/audio/min9.mp3", answer_1: "M2", answer_2: "Tritone", answer_3: "M9", …}
answer_1: "M2"
answer_2: "Tritone"
answer_3: "M9"
answer_4: "m9"
correct_answer: "m9"
game: Game {id: 1, score: 0, questions: Array(17)}
id: undefined
interval: "/assets/audio/min9.mp3"
__proto__: Object

이제 모든 클래스 속성에 액세스할 수 있으며 원하는 대로 진행할 수 있습니다!

여기서 중요한 점은 무엇입니까? 우리는 .bind(arg)를 호출하고 대상에 새로운 값this을 인수로 제공하여 애플리케이션 전반에 걸쳐 더 많은 제어와 도달 범위를 제공할 수 있습니다!
.bind() 에 대해 곤경에 처한 경우 이것이 유용한 예였기를 바랍니다. 이제 가서 활용하세요!

2021년 1월 5일에 처음 게시됨