JAVASCRIPT ) this

this는 함수가 어디서 호출되었느냐에 따라 그 값이 달라집니다. 이는 자바스크립트에서 유연하면서도 혼동될 수 있는 중요한 개념 중 하나입니다.

this는 기본적으로 다양한 상황에서 가리키는 대상이 달라집니다.

 

객체안에서의 this

객체안에서의 this는 객체 자신을 가리킵니다.

const adder = {
	inV1: 1,
    inV2: 2,
    totalV: 0,
    print: function(){
    	this.totalV = this.inV1 + this.inV2;
        document.write(this.totalV);
    }
}

adder.print()

//3

 

const adder = {
	inV1: 1,
    inV2: 2,
    totalV: 0,
    print: function(myV){
    	this.totalV = this.inV1 + this.inV2 + myV;
        document.write(this.totalV);
    }
}

adder.print(10);

 

 

전역 문맥(Global Context)에서의 this

전역 스코프에서 this는 전역 객체를 가리킵니다.

• 브라우저 환경에서는 전역 객체가 window 객체입니다.
• Node.js 환경에서는 전역 객체가 global 객체입니다.

console.log(this); // 브라우저에서는 window 객체, Node.js에서는 global 객체

 

기본 함수 호출에서의 this

함수 내부에서 this는 함수를 호출한 주체를 가리킵니다.

기본적으로 함수를 호출할 때 this는 전역 객체를 가리킵니다.

function showThis() {
  console.log(this);
}

showThis(); // 브라우저에서는 window 객체, Node.js에서는 global 객체

 

메서드 문맥에서의 this

객체의 메서드 내부에서 this는 그 메서드를 호출한 객체를 가리킵니다.

const person = {
  name: 'Alice',
  greet: function() {
    console.log(this.name); // this는 person 객체를 가리킴
  }
};

person.greet(); // 'Alice'

 

여기서 this.name은 person 객체의 name 속성에 접근하는 것을 의미합니다. greet 함수는 person 객체의 메서드로 호출되었기 때문에, this는 person 객체를 가리킵니다.

 

생성자 함수에서의 this

생성자 함수에서 this는 새로 생성되는 객체를 가리킵니다. 생성자 함수는 보통 new 키워드와 함께 호출됩니다.

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

const john = new Person('John');
console.log(john.name); // 'John'

 

이벤트 핸들러에서의 this

이벤트 핸들러에서 this는 이벤트가 발생한 요소를 가리킵니다. 예를 들어, 버튼 클릭 시 이벤트 핸들러 내부에서 this는 그 버튼 요소를 가리킵니다.

<button id="myButton">Click me</button>

<script>
  document.getElementById('myButton').addEventListener('click', function() {
    console.log(this); // 클릭된 버튼 요소를 가리킴
  });
</script>

 

Arrow 함수에서의 this

화살표 함수는 일반 함수와 달리 자신만의 this 바인딩을 가지지 않습니다. 화살표 함수에서의 this는 외부 스코프에서 상속됩니다.

const obj = {
  name: 'Bob',
  greet: function() {
    const innerGreet = () => {
      console.log(this.name); // 화살표 함수는 외부의 this를 상속받음
    };
    innerGreet();
  }
};

obj.greet(); // 'Bob'

 

 

• 여기서 innerGreet은 화살표 함수로 선언되어 있기 때문에, greet 함수의 this를 그대로 상속받아 obj를 가리킵니다.
• 만약 일반 함수로 innerGreet을 선언했다면 this는 전역 객체를 가리켰을 것입니다.

 

bind, call, apply를 사용한 this 제어

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

• call(): 함수를 호출하면서 this를 명시적으로 지정할 수 있습니다.
• apply(): call()과 거의 동일하지만, 인자를 배열로 받습니다.
• bind(): this가 고정된 새로운 함수를 반환합니다.

const person1 = { name: 'Alice' };
const person2 = { name: 'Bob' };

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

greet.call(person1); // 'Alice' (this가 person1로 지정됨)
greet.apply(person2); // 'Bob' (this가 person2로 지정됨)

const boundGreet = greet.bind(person1);
boundGreet(); // 'Alice' (this가 person1로 고정됨)