[WEB] 자바스크립트 this

this

클래스 단위의 Java에서의 this는 클래스 안의 변수를 참조하기 위해서 쓰인다. 하지만 자바스크립트의 this는 그 역할이 조금 다르다.

this는 기본적으로 chorme에서는 window이다. (nodejs에서는 빈 객체이다. {})

this;
- Window {0: global, window: Window, self: Window, document: document, name: "", location: Location, …}

1. 기본바인딩

function foo() {
	console.log(this.a);
}
var a = 2;
foo(); // 2

기본바인딩에서 엄격모드’use strict’에서는 undefined이고 그 밖에는 전역 객체로 바인딩 된다.

2. 암시적 바인딩

호출부에 콘텍스트 객체가 있는지, 즉 객체의 소유/포함 여부를 확인하는 것이다. 무슨말인지 어렵다. 아래 코드를보자.

function test() {
  console.log(this.a);
}

var obj = {
  a: 20,
  func1: test,
  func2: function() {
    console.log(this.a);
  }
};

obj.func1(); // 20 
obj.func2(); // 20

어떤 객체를 통해 함수가 호출된다면 그 객체가 바로 this의 객체가 된다.

위 코드의 func1, func2는 obj를 통해 호출되었으므로, obj가 this가 된다는 뜻이다.

3. 명시적 바인딩

call(), apply() 함수로 객체바인딩 시켜준다.

function foo(){
	console.log(this.a);
}
var obj = {
	a : 2
};

foo.call( obj ); //2

4. new 바인딩

전통적인 클래스 지향언어의 생성자는 클래스에 붙은 특별한 메서드로, 다음과 같이 클래스 인스턴스 생성시 new 연산자로 호출된다.

something = new MyClass();

아래 코드를 보면 이해하기 더 쉽다.

function foo(a) {
	this.a = a;
}
var bar = new foo(2);
console.log( bar.a ); // 2

this의 우선순위

new바인딩 > 명시적바인딩 > 암시적바인딩 순이다.

1. new로 함수를 호출 했는가?
2. call과 apply로 함수를 호출, 이를테면 bind 하드 바인드 내부에 숨겨진 형태로 호출되는가? (명시적 바인딩)
3. 함수를 콘텍스트, 즉 객체를 소유 또는 포함하는 형태로 호출했는가? (암시적 바인딩)
4. 그외의 경우는 this는 기본 바인딩으로 세팅.

예외상황 this

화살표 함수의 this의 4가지 규칙을 따르지 않는다.

function foo() {
	return (a) => {
    	console.log( this.a );
    }
}

var obj1 = { a:2 };
var obj2 = { a:3 };

var bar = foo.call(obj1);
bar.call( obj2 ); //2 3이 아니다.

foo() 내부에서 생성된 화살표 함수는 foo() 호출 당시 this를 무조건 어휘적으로 포착한다. 화살표 함수의 어휘적 바인딩은 절대로 오버라이드 될 수 없다.

참조

자바스크립트 this