this 바인딩

[ghdtjgus76]

this 바인딩

javascript에서는 함수 호출 방식에 따라 this가 참조하는 객체가 달라집니다.

this 바인딩 결과는 다음과 같이 분류할 수 있습니다.

1. 일반 함수 호출
2. 객체 내부 함수 -> 메서드 호출
3. 내부 함수 호출
4. 클래스 내부 생성자 함수 호출
5. 콜백 함수 호출

일반 함수 호출

function foo () {
    console.log(this); // this === window(전역 객체)
}

foo()

일반 함수 호출 시 this는 전역 객체에 바인딩됩니다.

메서드 호출

const person = {
    name: 'steven',
    age: 99,
    gender: 'Male',
    sayStack: function() {
        console.log(`${this.name} can use HTML, CSS, JS`);
    }
};

person.sayStack(); // steven can use HTML, CSS, JS

내부 함수 호출

let age = 1;
const animal = {
    name: 'tiger',
    age: 5,
    showAge: function() {
        console.log(`${this.name} is ${this.age} years old`);
        
        function plusAge() {
            this.age++;
            console.log(`in this func, ${this.name} is ${this.age} years old`);
        }
        plusAge();
    }
};

animal.showAge();
/*
tiger is 5
in this func,  is 2 years old
*/

위처럼 내부 함수를 호출했을 때 this는 전역 객체에 바인딩됩니다.
외부 함수인 showAge 함수는 객체의 메서드로 호출되어 this는 animal이라는 객체에 바인딩됩니다.
하지만 내부 함수인 plusAge 호출 시 this는 전역 객체에 바인딩됩니다.

우리가 원하는 대로 동작하기 위해서는 아래와 같은 방법을 사용하면 됩니다.
1.

let age = 1;
const animal = {
    name: 'tiger',
    age: 5,
    showAge: function() {
        let that = this; // this === animal
        console.log(`${this.name} is ${this.age} years old`);
        
        function plusAge() {
            that.age++;
            console.log(`in this func, ${that.name} is ${that.age} years old`); // that === this
        }
        plusAge();
    }
};

animal.showAge();

외부 함수 내에서 객체에 바인딩된 this를 새로운 변수에 담아주고 내부 함수에서는 이 변수를 접근하면 됩니다.

let age = 1;
const animal = {
    name: 'tiger',
    age: 5,
    showAge: function() {
        console.log(`${this.name} is ${this.age} years old`);
        
        const plusAge = () => {
            this.age++;
            console.log(`in this func, ${this.name} is ${this.age} years old`);
        }

        plusAge();
    }
};

animal.showAge();

화살표 함수를 사용하면 this라는 변수 자체가 존재하지 않아 상위 환경에서의 this를 참조하게 됩니다.
여기서도 외부 함수 showAge의 this를 참조하게 됩니다.

생성자 함수 호출

function Car(name, price){
    this.name = name;
    this.price = price;
}

Car.prototype.sayPrice = function() {
    console.log(this.price);
}

let benz = new Car('benz', '10');
let hyundai = new Car('hyundai', '5');

console.log(benz); // Car { name: 'benz', price: '10' }
benz.sayPrice(); // 10

위 예시에서는 this는 Car라는 생성자 함수를 가리키는데, 결국 호출한 인스턴스인 benz에 바인딩된다고 볼 수 있습니다.

콜백 함수 호출

const testTime = {
    timer: 50,
    setTimer: function (){
        setTimeout(function (){
            console.log(this.timer);
        }, 1000);
    }
}

testTime.setTimer(); // undefined

콜백 함수 호출 시에는 this는 전역 객체에 바인딩됩니다.

참고 자료

https://velog.io/@defaultkyle/js-this-1