[JS]this

자바스크립트의 this

this는 자바스크립트에서 함수가 호출되는 방식에 따라 다르게 해석되는 키워드이다. this는 주로 객체의 메서드에서 사용되며, 해당 메서드가 호출될 때의 컨텍스트를 참조한다.

1. 전역 컨텍스트

전역에서 this를 사용하면, 브라우저 환경에서는 전역 객체인 window를 가리킨다.

console.log(this); //window(브라우저 환경)

2. 함수 호출

2-1. 일반 함수 호출
일반 함수로 호출할 경우, this는 전역 객체를 가리킨다.

function showThis() {
    console.log(this);
}
showThis(); //window(브라우저 환경)

2-2. 메서드 호출
객체의 메서드로 호출할 경우, this는 해당 메서드를 호출한 객체를 가리킨다.

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

obj.greet(); //신짱구

3. 생성자 함수

new 키워드를 사용하여 생성자 함수를 호출하면, this는 새로 생성된 객체를 가리킨다.

function Person(name) {
    this.name = name;
}

const p = new Person('신짱구');
console.log(p.name); //신짱구

4. call, apply, bind 메서드

call, apply, bind 메서드를 사용하여 this의 값을 명시적으로 설정할 수 있다.
4-1. call
함수를 호출하면서 this를 지정한다.

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

const obj = { name: '신짱구' };
greet.call(obj); //신짱구

4-2. apply
call과 비슷하지만, 인자를 배열로 전달한다.

function greet(greeting) {
    console.log(greeting + ', ' + this.name);
}

const obj = { name: '신짱구' };
greet.apply(obj, ['Hello']); // Hello, 신짱구

4-3. bind
새로운 함수를 생성하고, this를 고정한다.

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

const obj = { name: '신짱구' };
const boundGreet = greet.bind(obj);
boundGreet(); //신짱구

https://yje44428.tistory.com/41

apply, call 메서드