자바스크립트 This (feat. 코어자바스크립트)

JangGwon·2022년 8월 22일

This

자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때(함수를 호출할 때) 결정된다. 또 한 ,this는 상황에 따라 바뀝니다.

1-1. 전역 공간에서의 this

전역 공간에서 this는 전역 객체를 가리킨다. (전역 컨텍스트를 생성하는 주체가 전역 객체이기 때문)


var abc = 1;
console.log(abc);					// output : 1
console.log(window.abc);			// output : 1
console.log(this.abc);    			// output : 1

자바스크립트의 모든 변수는 실행 컨텍스트의 LexicalEnvironment 프로퍼티로 동작한다.
전역변수는 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로 할당한다.

1-2. 메서드로서 호출할 때 그 메서드 내부에서의 this

메서드 내부에서의 this에는 호출한 주체(함수명, 프로퍼티 명 앞의 객체)에 대한 정보가 담긴다.
점 표기법의 경우 마지막 점 앞에 명시된 객체가 곧 this가 된다.

1-3. 함수로서 호출할 때 그 함수 내부에서의 this

어떤 함수를 함수로서 호출한 경우 호출 주체를 명시하지 않고 개발자가 코드에 직접 관여해서 실행한 것이기 때문에 호출 주체의 정보를 알 수 없기 때문에 this가 지정되지 않는다. 하지만 실행 컨텍스트를 활성화할 당시 this가 지정되지 왆은 경우 this는 전역 객체를 가리키기 때문에, 함수에서의 this는 전역 객체를 가리킨다.

1-4. 콜백 함수 호출할 때 그 함수 내부에서의 this

콜백 함수 내부에서의 this는 기본적으로 전역 객체를 참조하지만, 제어권을 받은 함수에서 콜백 함수에 별도로 this가 될 대상을 지정한 경우 그 대상을 참조합니다.

1-5. 생성자 함수 내부에서의 this

* 생성자 함수를 통해 인스턴스가 만들어지는 과정

생성자 함수를 호출

생성자의 prototype 프로퍼티를 참조하는 __proto __라는 프로퍼티가 있는 인스턴스를 생성

미리 준비된 공통 속성 및 개성을 해당 객체(this)에 부여

즉, 어떤 함수가 생성자 함수로서 호출된 경우 내부에서의 this는 곧 새로 만들 구체적인 인스턴스 자신을 참조한다.

var Cat = function (name, age) {
  this.bark = "야옹";
  this.name = name;
  this.age = age;
};

var choco = new Cat("초코", 7);			// bark : '야옹', name '초코', age : 7}
var nabi = new Cat("나비", 5);			// bark : '야옹', name '나비', age : 5}
console.log(choco, nabi);

2. 명시적으로 this를 바인딩하는 방법

2-1 call 메서드

Function.prototype.call(thisArg[, arg1[, arg2[, ....]]])

call 메서드는 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령이다.
call 메서드의 첫 번째 인자를 this로 바인딩하고, 이후 나머지 인자들을 호출할 함수의 매개변수로 한다.

var func = function(a,b,c)
{
  console.log(this, a, b, c);
};

func(1,2,3);						//output : Window{...} 1 2 3
func.call({x:1},4,5,6);			    //output : { x : 1 } 4 5 6

2-2 apply 메서드

Function.prototype.apply(thisArg[, argsArray])

apply 메서드는 call 메서드와 기능적으로는 완전히 동일하다
차이점으로는 call 메서드는 첫 번째 인자를 제외한 나머지 인자들을 호출할 함수의 매개변수로 지정하지만, apply 메서드는 두 번째 인자를 배열로 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정한다.

var obj = {
  a: 1,
  method: function (x,y) {
    console.log(this.a,x,y);
  }
};

obj.method.apply({ a:4},[5,6]);		// output : 4 5 6

2-3 bind 메서드

Function.prototype.bind(thisArg[, arg1[,arg2[, ...]]])

bind 메서드는 call과 비슷하나 즉시 호출하지는 않고, 넘겨받은 this및 인수들을 바탕으로 새로운 함수를 반환만 한다.
bind 메서드의 목적으로는 함수에 this를 미리 적용하는 것과 부분 적용 함수를 구현하는 것이 있다.
bind 메서드를 통해서 새로 만든 함수는 name 프로퍼티에 bound가 붙는다.

var func = function(a,b,c,d)
{
  console.log(this, a, b, c, d);
};
func(1, 2, 3, 4);							//output : WIndonw{...} 1 2 3 4

var bindFunc1 = func.bind({ x: 1});
bindFunc1(5, 6, 7, 8);					   //output : { x: 1 } 5 6 7 8

var bindFunc2 = func.bind({ x: 1}, 4, 5);
bindFunc2(7, 8);					      //output : { x: 1 } 4 5 7 8

console.log(func);					//