콜백 함수 내에서 올바른 `this`에 접근하는 방법

저는 이벤트 핸들러를 등록하는 생성자 함수를 가지고 있습니다:

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', function () {
        alert(this.data);
    });
}
// 가짜 transport 객체
var transport = {
    on: function(event, callback) {
        setTimeout(callback, 1000);
    }
};
// 다음과 같이 호출됩니다.
var obj = new MyConstructor('foo', transport);

하지만, 콜백 함수 내에서 생성된 객체의 data 속성에 접근할 수 없습니다. 이는 this가 생성된 객체를 가리키지 않고 다른 객체를 가리키기 때문입니다.

또한, 익명 함수 대신 객체 메소드를 사용해 보았지만 실패했습니다:

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', this.alert);
}
MyConstructor.prototype.alert = function() {
    alert(this.name);
};

하지만 동일한 문제를 보여줍니다.

올바른 객체에 어떻게 접근할 수 있을까요?

답변 1

해결책은 위에서 언급한 것과 동일합니다: 가능한 경우, .bind를 사용하여 this를 특정 값에 명시적으로 바인딩하십시오.

document.body.onclick = this.method.bind(this);

또는 콜백/이벤트 핸들러로 익명 함수를 사용하여 객체(this) 를 다른 변수에 할당하여 method로서 명확히 호출합니다:

var self = this;
document.body.onclick = function() {
    self.method();
};

또는 화살표 함수를 사용합니다:

document.body.onclick = () => this.method();

답변 2

어떻게 콜백 함수 내에서 올바른 `this`에 접근할 수 있는지
자바스크립트에서 콜백 함수를 사용하는 동안, `this` 키워드를 올바르게 이해하고 사용하는 것은 중요한 부분입니다. 콜백 함수 내에서 올바른 `this`에 접근하기 위해 몇 가지 방법을 살펴보겠습니다.
첫 번째 방법은 `bind` 메소드를 사용하는 것입니다. `bind` 메소드는 함수를 호출할 때 해당 함수 내에서 `this` 키워드가 항상 원하는 객체를 참조하도록 설정합니다. 예를 들어, 다음과 같이 `bind` 메소드를 사용하여 콜백 함수 내에서 올바른 `this`를 참조할 수 있습니다.
```javascript
function MyObject() {
this.name = John;
}
MyObject.prototype.printName = function() {
setTimeout(function() {
console.log(this.name); // MyObject의 인스턴스에서 변수에 접근
}.bind(this), 1000);
};
var obj = new MyObject();
obj.printName(); // John을 1초 후에 출력
```
두 번째 방법은 화살표 함수(`arrow function`)를 사용하는 것입니다. 화살표 함수는 자동으로 주변 범위의 `this`를 가져오기 때문에 `bind` 메소드를 사용할 필요가 없습니다. 따라서 다음과 같이 콜백 함수를 작성할 수 있습니다.
```javascript
function MyObject() {
this.name = Jane;
}
MyObject.prototype.printName = function() {
setTimeout(() => {
console.log(this.name); // MyObject의 인스턴스에서 변수에 접근
}, 1000);
};
var obj = new MyObject();
obj.printName(); // Jane을 1초 후에 출력
```
마지막으로, 이벤트 리스너에 콜백 함수를 등록하는 경우에도 올바른 `this`에 접근하기 위해 화살표 함수를 사용할 수 있습니다. 예를 들어, 다음과 같이 이벤트 리스너 콜백 함수를 작성할 수 있습니다.
```javascript
function Button() {
this.count = 0;
this.element = document.createElement(button);
this.element.innerText = Click me;
this.element.addEventListener(click, () => {
this.count++; // Button의 인스턴스에서 변수에 접근
console.log(this.count);
});
}
var btn = new Button();
document.body.appendChild(btn.element);
```
이렇게 해서 우리는 콜백 함수 내에서 올바른 `this`에 접근하는 몇 가지 방법을 살펴보았습니다. `bind` 메소드를 사용하거나 화살표 함수를 사용하여 `this` 키워드를 올바르게 설정하는 것은 중요한 태스크이므로, 자바스크립트 개발자들은 이러한 방법에 익숙해져야 합니다.