[JavaScript] This

Javascript에서의 This키워드는 다른 언어와 다르게 동작한다.

또한 엄격모드와 비엄격모드에서도 차이가 있다.

 

엄격모드

가끔 엄격하지않은 기본값을 "느슨한 모드"라고 부르기도 한다.

엄격모드는 Javascript의 제한된 버전을 선택하여 암묵적인 "느슨한모드"를 해제하기위한 방법이다.

엄격모드에서의 시멘틱들의 변경사항

 

1. 기존에는 조용히 무시되는 에러들을 throwing한다.

2. ECMAScript의 차기 버전들에서 정의될 문법을 금지한다.

 

다시 this로 돌아와서

대부분의 경우 this의 값은 함수를 호출한 방법에의해 결정된다.

 

전역문맥에서의 this

전역실행 맥락에서 this는 엄격모드에 관계없이 전역객체를 참조한다.

 

함수문맥에서의 this

함수 내부에서 this값은 함수를 호출한 방법에의해 좌우된다.

 

함수 vs 메서드

 

함수는 그 자체로 독립적이다, 반면에 메서드는 자신을 호출한 대상객체에 관한 동작을 수행한다.

 

반면에, 메서드는 자신을 호출한 대상 객체에 관한 동작을 수행한다.

 

메서드

"객체의 프로퍼티에 할당된 함수"

=> 반은맞고 반은 틀리다

=> 어떤 함수를 객체의 프로퍼티에 할당한다고 해서 무조건 메서드가 되는것은 아니다.

=> 객체의 메서드로서 호출할때만 메서드, 그렇지 않으면 함수로 동작한다.

 

메서드 내부에서의 this

 

this는 호출한 주체에 대한 정보가 담긴다.

어떤 함수를 메서드로서 호출하는 경우 => 호출 주체는 함수면(프로퍼티명)앞의 객체이다.

 

메서드의 내부 함수에서의 this를 우회하는 방법

=> 호출 주체가 없을 때, 자동으로 전역객체를 바인딩

=> this의 의도와 많이 다르다

=> 호출당시 주변환경의 this를 그대로 상속받아 사용하면 좋다.

 

1. 변수를 활용 상위 컨텍스트의 this를 변수(self)에 할당하는 방법

var obj ={
	outer: function() {
    	console.log(this); // (1) { outer: f}
        var innerFunc1 = function () {
        	console.log(this); // (2) Window { ... }
        };
        innerFunc1();
        
        var self = this; // this를 변수에 할당
        var innerFunc2 = function () {
        	console.log(self); // (3) { outer : f }
        };
        innerFunc2();
    }
};

obj.outer();

 

2. call, apply, bind 함수를 적용하는 방법

 

call

call의 첫번째인자는 this로 지정한객체, 두번째 인자부터는 함수에 넘겨줄 매개변수를 지정한다.

 

apply

call과 유사하지만, 두번째에 배열을 받는다(여러 인수를 묶어 하나의 배열로 전달하고 싶을때 유용)

 

bind

기본적으로 call과 비슷하다.

차이점 => 넘겨받은 this 및 인수들을 바탕으로 새로운 함수를 반환한다.

 

bind는 this를 미리적용, 부분적용 함수 구현

두가지의 기능을 가진다.

bind는 name 프로퍼티에 bound가 붙는 특징이 존재한다.