js 상황에 따라 달라지는 this

 

JavaScript에서 this 키워드는 함수가 호출되는 방식에 따라 다르게 동작합니다.

 

 

 

 

전역 공간에서의 this

전역 컨텍스트에서 this는 전역 객체를 참조합니다. 브라우저 환경에서는 전역 객체가 window입니다.

console.log(this); // 브라우저에서는 window 객체를 출력

 

 

함수에서의 this

일반 함수에서 this는 호출 방식에 따라 다릅니다.

 

일반 함수 호출: this는 전역 객체를 참조합니다. (strict mode에서는 undefined)

function showThis() {
    console.log(this);
}
showThis(); // 브라우저에서는 window 객체 (strict mode에서는 undefined)

 

 

메서드 호출: 객체의 메서드로 호출될 때, this는 해당 메서드를 호출한 객체를 참조합니다.

const obj = {
    name: 'Alice',
    greet: function() {
        console.log(this.name);
    }
};

obj.greet(); // "Alice"

 

 

화살표 함수에서의 this

화살표 함수는 자신만의 this를 가지지 않고, 

외부 스코프의 this를 lexically(렉시컬하게) 바인딩합니다. 

즉, 화살표 함수가 정의된 위치의 this를 사용합니다.

const obj = {
    name: 'Bob',
    greet: function() {
        const inner = () => {
            console.log(this.name);
        };
        inner();
    }
};

obj.greet(); // "Bob"

 

 

 

call, apply, bind 메서드

this의 값을 명시적으로 설정할 수 있는 방법도 있습니다.

 

call: 함수를 호출하면서 this를 지정합니다.

function showName() {
    console.log(this.name);
}

const user = { name: 'Charlie' };
showName.call(user); // "Charlie"

 

apply: call과 비슷하지만, 인수를 배열로 전달합니다.

function showFullName(surname) {
    console.log(this.name + ' ' + surname);
}

const user = { name: 'Charlie' };
showFullName.apply(user, ['Brown']); // "Charlie Brown"

 

bind: 새로운 함수를 생성하고, this를 고정합니다.

const user = { name: 'Charlie' };
const showNameBound = showName.bind(user);
showNameBound(); // "Charlie"

 

this는 호출되는 컨텍스트에 따라 다르게 동작합니다.

전역 공간에서는 전역 객체를 참조하고, 

일반 함수 호출에서는 전역 객체(또는 strict mode에서는 undefined)를 참조합니다.

메서드 호출 시에는 해당 메서드를 호출한 객체를 참조합니다.

 

화살표 함수는 외부 스코프의 this를 사용합니다.

call, apply, bind 메서드를 사용하여 this를 명시적으로 설정할 수 있습니다.

 

 

 

콜백 함수에서의 this 우회

콜백 함수는 일반적으로 this가 예상과 다르게 동작할 수 있습니다. 예를 들어, 메서드로서의 this가 아닌 전역 객체를 참조할 수 있습니다. 이를 우회하는 방법은 여러 가지가 있습니다.

 

 

bind 메서드 사용

bind 메서드를 사용하여 콜백 함수의 this를 명시적으로 설정할 수 있습니다.

const obj = {
    name: 'Alice',
    greet: function() {
        setTimeout(function() {
            console.log(this.name); // undefined
        }, 1000);
    }
};

obj.greet(); // 1초 후 undefined

// bind를 사용하여 this를 obj로 설정
const obj2 = {
    name: 'Alice',
    greet: function() {
        setTimeout(function() {
            console.log(this.name); // undefined
        }.bind(this), 1000);
    }
};

obj2.greet(); // 1초 후 Alice

 

화살표 함수 사용

화살표 함수는 자신만의 this를 가지지 않고, 외부 스코프의 this를 사용합니다. 

이를 통해 this 문제를 쉽게 해결할 수 있습니다.

const obj3 = {
    name: 'Bob',
    greet: function() {
        setTimeout(() => {
            console.log(this.name); // Bob
        }, 1000);
    }
};

obj3.greet(); // 1초 후 Bob

 

 

생성자 함수에서의 this

생성자 함수는 new 키워드와 함께 호출될 때, this가 새로 생성된 객체를 참조합니다. 

생성자 함수에서 this를 사용하는 방법은 다음과 같습니다.

 

생성자 함수는 대문자로 시작하는 이름을 가지며, this를 사용하여 새 객체의 속성을 초기화합니다.

function Person(name) {
    this.name = name; // this는 새로 생성된 객체를 참조
}

const person1 = new Person('Charlie');
console.log(person1.name); // Charlie

 

메서드 추가

생성자 함수로 생성된 객체에 메서드를 추가할 때, this는 해당 객체를 참조합니다.

function Person(name) {
    this.name = name;
    this.greet = function() {
        console.log(`Hello, my name is ${this.name}`);
    };
}

const person2 = new Person('Diana');
person2.greet(); // Hello, my name is Diana

 

콜백 함수에서 this 우회: bind 메서드나 화살표 함수를 사용하여 this를 명시적으로 설정할 수 있습니다.

생성자 함수에서 this: new 키워드로 호출할 때 this는 새로 생성된 객체를 참조하며, 

생성자 함수 내에서 속성을 초기화하거나 메서드를 정의할 수 있습니다.