Javascript의 this

Seokki Oh·2021년 11월 12일

JS에서의 this

JS에서 쓰이는 this는 Java에서 쓰이는 this와 다르다
다른 언어의 개발자들이 JS에서 this를 처음 혼동을 많이 한다고 한다
Java의 경우엔 this각 객체 자신을 참조하기 위한 용도로 사용된다
그렇기 때문에 자신의 class에 name을 선언했을 경우 this.name을 통해서 name에 접근한다
하지만 JS의 경우 this에 바인딩되는 객체는 무조건 자기 자신이 아니라 함수 호출 방식에 따라서 바인딩 된다

함수 호출 방식에 의한 this 동적 바인딩

함수가 호출될 때, 즉 런타임에서 this가 바인딩된다
함수의 상위 스코프를 결정하는 방식인 Lexical scope와는 ㅈ반대되는 개념이라고 할 수 있다
함수 호출 방식은 아래와 같다

함수 호출 방식

함수 호출
메소드 호출
생성자 함수 호출
apply/call/bind 호출

함수 호출 방식별 this 바인딩

1. 함수 호출

기본적으로 this는 전역객체에 바인딩된다
함수의 내부 함수에서도 마찬가지도, 콜백함수에서도 마찬가지다

var abc = 'log91';
const foo = function() {
  console.log(this); // window
  console.log(this.abc); // log91
}

const bar = function () {
	console.log(this.abc); // log91
	function deep () {
      console.log(this.abc);
    }
  	deep(); // log91
}
const obj = {
  fn() {
    setTimeout(function() {
      console.log(this.abc); // log91
    })
  }
}

2. 메소드 호출

함수가 객체의 프로퍼티 즉 메소드이면 this는 해당 메소드를 소유한 객체에 바인딩된다

const obj = {
  name: 'log91',
  callName() {
	console.log(this.name); // log91
  }
}

3. 생성자 함수 호출

JS의 생성자 함수는 말 그대로 객체를 생성하는 역할을 한다
기존 함수에 new 연산자를 붙여서 호출하게 되면 새로운 객체가 생성되고 this가 바인딩된다

📌 생성자 함수 동작 방식
1. 빈 객체 생성 및 this 바인딩
2. this를 통한 프로퍼티 생성
3. 생성된 객체 반환

4. apply/call/bind 호출

this는 함수 호출 방법에 따라 암묵적으로 바인딩 된다 하지만 명시적으로 해줄 수 도 있다
Function.prototype.apply, Function.prototype.call 메소드를 이용하는 것이다
이 메소드들은 모두 함수 객체의 프로토타입 객체인 Function.prototype 객체의 메소드다

var name = 'log91';

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

callName(); // log91

let obj = { name: 'log9991' };
callName.apply(obj, []); // log9991