[하나씩 알아가자] 자바스크립트의 this, 이거보다 더 친절한 설명은 없다

this는 굉장히 중요한 개념이다.

vue를 사용하면서도 굉장히 많이 사용하기도하고 (물론 조금 다르게 사용되는것 같긴하지만) 많이 듣기도 했는데

누군가가 나에게 this가 뭔가요 라고 묻는다면 대답을 정확히 할 수 없었다.

나의 기준은 ‘이걸 누군가에게 설명할 수 있느냐’ 이다. 설명할 수 없으면 제대로 아는거 아님

그래서 기술블로그 & 자바스크립트 딥다이브를 정독해가면서 몇개를 읽었는데…

머리빠개지겠다 헷갈려서…..

읽을수록

ㅇ_ㅇ….

ㅇ.ㅇ…?

ㅇ0ㅇ….?????????

8ㅇ8!!!!!!!!!!!!!!!??????????????????

(진심 표정 이랬을거임)

울고싶다 또르르… 나도 이정도로 헷갈리는데 처음접하는 사람들은 정말 읽다가 나가떨어지겠다 싶다…

하지만 반드시 반드시 반드시 무조건 알아두어야할 개념이니 천천히 정리해보도록 하자

미래의 나를 위한 친절한 설명 시작 ⸝⸝• ̫•⸝⸝

우선 this를 정확하게 알기위해서는 알고있어야할 용어들이 몇개 있다.

바로 객체, 객체의 메서드, 함수 인데, 이걸 구분할 줄 알아야 this를 설명할때 이해가 간다…

(이해가 ‘빠르다’가 아님. 이해가 ‘간다’ 이므로, this 배우기전 저 3개를 무조건 알아보고 this를 공부하도록 하자

조금 더 자세히 하자면 일반함수, 메서드, 생성자 함수에 대한 구별이 명확해야 한다)

우선 this에 대한 정의를 먼저 알아보자

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다

this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.

(자바스크립트 딥다이브 p.343)

……

정말 한 단어 한 단어씩 뜯어먹어야 이해가 갈듯말듯.. 헷갈린다.

그냥 간단하게 얘기하자면 자바스크립트에서의 this는

자신이 어디에 속해있느냐에 따라 할당되는 값이 달라진다는 것이다.

이 말인즉 this바인딩(this가 묶이는 상태)은 함수 호출 방식에 의해 동적으로(=가변적으로) 결정된다는 말임.

클래스기반의 언어들(ex 자바, C) 의 this는 언제나 클래스가 생성하는 인스턴스를 가리키는데 반해

자바스크립트는 함수가 호출되는 방식에 따라 this바인딩이 동적으로 결정된다.

그렇담 여기서 중요한 포인트를 발견할 수 있다.

함수가 호출되는 방식에 따라 바인딩이 달라진다고 했으니

함수가 호출되는 방식을 알아야하겠네?

함수가 호출되는 방식에는 이게있고 이게있고 이게있는데

이거에 따라는 이렇게 바인딩되고 이거에 따라 이렇게 바인딩되고… 이런식으로

매번 달라질거기 때문에 함수 호출방식에 대해 먼저 알아보도록 하자

잠깐 잠깐!! 렉시컬 스코프와 this바인딩의 차이를 알아보자
렉시컬스코프 : 함수 객체가 생성되는 시점에 생성
this바인딩 : 함수 호출 시점에 결정

같은 함수를 사용하더라도 우리는 다양한 방식으로 함수를 불러올 수 있다

일반 함수 호출
메서도 호출
생성자 함수 호출
Function.prototype.apply/call/bind 메서드에 의한 간접호출

이 방식들에 따라서 this가 묶이는 경우의 수가 갈라지므로 자세히 알아보자 (งᐖ)ว

아, 그리고 this는 기본적으로 전역 객체(global object)가 바인딩된다!

전역객체란 전역범위에 항상 존재하는 객체를 의미한다.
조금더 이론적으로 설명하자면 코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성디는 특수한 객체이며, 어떤 객체에도 속하지 않은 최상위 객체이다. (JS딥다이브 p.326)
쉽게 말하면… 이 광활한 우주같이 브라우저 환경에서는window(또는 self, this, frames)라고 불림
Node.js에선 global이라고 불림
그러니까 전역객체란 브라우저 어디에서도 갖다 쓸 수 있음

알고 시작해야함.

일반함수 호출

일반함수는 사실 제일 간단한듯 싶다.

일반함수는 그냥, 걍 this의 의미가 없다

이유는, 일반함수는 객체를 생성하지 않기 때문에 참조를 할 대상 자체가 없다.

그래서 무조건 전역객체로 바인딩됨.

설령 이게 메서드 안에 있는 중첩함수라 하더라도 일반함수로 호출하게 되면 내부에서의 this는 window가 된다

그러므로 어떠한 함수라도 일반함수로 호출되면 this에 전역객체가 바인딩된다고 생각하면 된다.

그런데, 생각해보자.

메서드 내에서 사용하는 중첩함수라던지, 메서드에게 전달한 콜백함수를 사용하려고 하는데,

이게 한개의 메서드 안에서도 어디는 x객체랑 바인딩되고 어디는 전역객체랑 바인딩되면

사실 사용하는 사람 입장에서는 참… ‘이게 뭐지’ 싶을거다.

생각해보라. 중첩함수 & 콜백함수 모두 외부함수를 도와주는 헬퍼함수의 역할을 하라고 있는건데..

중첩함수 & 콜백함수의 this와 외부메서드의 this의 대상이 다르면..

사실 그건 헬퍼가 아니고 짐덩이 아님?ㅋㅋㅋㅋㅋ 아무짝에도 소용없는 애들이 되어버리니까..

중첩&헬퍼함수가 가리키는 this와 외부함수가 가리키는 this가 같아야 뭘 같이 쓰던지 할것 아임니까..!

예를 한번 봅시다

만약에 아래와 같다면 setTimeout을 사용할떄, 콜백함수를 일반함수로 호출했기 때문에

콜백함수안에서의 this는 전역객체와 바인딩 되어서 this는 window로 찍힌다.

그래서 전역객체의 value프로퍼티는 var로 선언된 1임

(let, const로 선언하는건 또 다름. 이 둘은 전역으로 선언해도 전역 객체로 선언되지 않음.

let, const를 전역으로 선언한다고 하더라도 이 둘은 보이지 않는 개념적인 블록내에 존재하게 되므로

var로 선언해야지만 전역객체로 등록됨)

var value = 1;
const obj = {
	value : 100,
	foo(){
		setTimeout(function(){
			console.log(this);	//window
			console.log(this.value);	//1
		},100);
	}
}
obj.foo();

그래서 외부함수에서의 this와 중첩함수&콜백함수의 this를 똑같이 일치시켜주려면

변수를 하나 만들어서 this바인딩을 변수에 할당시켜주면 된다

var value = 1;
const obj = {
	value : 100,
	foo(){
		const that = this;

		setTimeout(function(){
			console.log(that.value);	//100
		},100);
	}
}
obj.foo();

const that = this; 을 넣어줌으로써 this를 that에 할당하고 그 뒤에는 that.value로 프로퍼티를 가져와서 사용하면 됨

이런식으로 일반함수에서 호출하는 경우에는 변수를 선언하고 값을 할당함으로써 this를 일치시켜주면 되고

그렇지 않은이상 this는 죄다 전역객체를 나타낸다고 생각하면 된다

메서드 호출

메서드를 호출하게 되면 메서드 이름 앞의 마침표(.) 연산자 앞에 기술한 객체가 바인딩 된다.

예시가 없으면 뭔 소린지 이해가 안가니 코드를 보도록 하자

const person = {
	name: 'Lee',
	getName(){
		return this.name;
	}
}

console.log(person.getName()); // Lee

console.log 로 person.getName() 이렇게 메서드를 호출하게 되면,

마침표 앞에 있는 person이라는 객체와 바인딩 된다는 소리이다.

여기서 주의해야할 점이 메서드를 ~~소유한 객체~~가 아니고, 호출한 객체에 바인딩 된다는게 중요함!!

근데 사실 여기서 정말 이해가 안됐던 부분이..

아니 소유한 객체가 아닐수가 있나?

person.getName이면 어쨌거나 person객체 안에 있는데, 어떻게 소유한 객체가 아닐 수가 있지?

라는 의문이 들었다.

그러다 다음날에 다시 읽어보니 쪼오금 이해가 간다 (역시 오늘 이해안되는건 덮고 내일 다시 봐야해)

이해가 안갔던 부분이니 더 자세히 설명해놓아야겠다(기술면접을 준비할 미래의 나를 위해….(˵ ͡~ ͜ʖ ͡°˵)ﾉ )

위의 코드의 getName메서드는 person객체의 메서드 이다. person = {} 괄호 안에 있으니까…

근데 메서드는 프로퍼티에 묶인 함수이므로

getName프로퍼티가 가리키는 함수객체는 person객체속에 있다고 하더라도

객체에 포함된 것이 아니라 독립적으로 존재하는 별도의 객체다!!!! (신기신기)

따라서 getName프로퍼티가 가리키는 함수객체 a.k.a. getName메서드는

다른 객체의 프로퍼티에 할당하는것으로

다른 객체의 메서드가 될 수도 있고

일반변수에 할당해서 일반함수로 호출될 수도 있음!!!!!!! (짱신기하구만)

예시를 보자

const person = {
	name: 'Lee',
	getName(){
		return this.name;
	}
}

const anotherParson = {
	name : 'kim'
};
anotherPerson.getName = pareson.getName;

console.log(anotherPerson.getName());	//kim

const getName = person.getName;

console.log(getName());	//''

anotherPerson.getName = pareson.getName; 는 person객체의 getName메서드를

anotherPerson객체의 메서드로 할당한다는 말이다

그러니까 이 말은 person객체의 메서드(다시한번 말하지만 이 메서드는

person객체에 포함된게 아니라

person객체 프로퍼티에 단지 바인딩된 함수로 독립적인 별도 객체임!!)를

anotherPerson객체에서 부른다는 말이고,

console.log로 anotherPerson.getName() 를 찍으면 getName을 호출한 객체,

그러니까 anotherPerson 객체에 바인딩 된다.

그러므로 person객체의 getName의 this는 anotherPerson 이 되는거임

(매일 헷갈렸던 개념…!)

const getName = person.getName; 는 getName메서드를 getName이라는 변수에 할당했다는 뜻이다.

그리고 console.log(getName()); 로 찍으면 객체가 없이 일반함수로 호출했기 때문에

저 위에 1.일반함수 호출에서 말했듯이 무조건 this는 전역객체와 바인딩되고,

그 말인즉, getName의 this.name 은 브라우저환경에서 window.name 과 같다

근데 window.name은 빌트인 프로퍼티이며 기본값은 ‘ ‘이므로 ‘ ‘ 를 찍는다

아, node.js에서 this.name찍으면 undefined남

생성자 함수 호출

생성자 함수 내부의 this에는 생성자 함수가 (미래에) 생성할 인스턴스가 바인딩된다.

생성자 함수 호출이 뭐냐믄,

생성자 함수를 먼저 알아야한다.

생성자 함수는 객체(인스턴스)를 생성하는 함수다

그왜… 맨날 붕어빵 틀로 설명되는 그 이론 있자나요….（￣ー￣）

function Circle(radius){
	this.radius = radius;
	this.getDiameter = function(){
		return 2 * this.radius;
	}
}

const circle1 = new Circle(5);

console.log(circle1.getDiameter());	//10

const circle2 = Circle(15);
console.log(circle2); //undefined
console.log(radius); //15

function Circle(radius){} 처럼 일반함수럼 생성자 함수를 정의하고

new 연산자와 함께 호출하면 해당함수는 생성자 함수로 동작하는 것과 같다

만약 new 와 함께 호출하지 않으면 일반함수를 호출하는것과 같다.

(여기서 잠깐 퀴즈 ~~ 일반함수로 호출하는거는 뭐다? 전역객체다~~~~ )

const circle1 = new Circle(5); => 생성자 함수로 호출

생성자 함수로 호출하게 되면 생성자 함수(function Circle) 내부의 this는

생성자 함수가 생성할 인스턴스(circle1)를 가리킨다.

그러므로 console.log(circle1.getDiameter()); //10 는 2 * 5(=this.radius) 로 10이됨

const circle2 = Circle(15); => 일반 함수로 호출

일반함수로 호출된 Circle은 반환문이 없으므로 암묵적으로 undefined반환

그래 여기까지는 좋았는데,

console.log(radius); //15 얘는 뭐임? 도대체 어디서 튀어나온건지

처음에는 한참동안 들여다보고있었음

설명하자면

const circle2 = Circle(15); 이렇게 Circle함수에 15를 매개변수로 받으면

this.radius 는 매개변수를 받으므로 15가 되는데,

이때 this가 전역객체가 되므로 radius는 15가 된다!!!

Function.prototype.apply/call/bind

apply,call,bind 메서드는 Function.prototype의 메서드다.

그래서 이 아이들은 모든 함수에서 상속받아 사용할 수 있다.

(Function.prototype은 치기 귀찮으니까 이하생략)

자바스크립트에서의 this는 동적이기 때문에 ‘난 널 쓸거야’ 라고

딱 지정할때 사용할 수 있는 메서드이기도 하다.

명시적으로 ‘너랑 바인딩할거임’ 이라는 의도를 가지고 사용할 수 있다!!

이 아이들을 큰 특징을 기준으로 둘로 나누자면 apply, call 과 bind 로 나눌 수 있다.

apply, call

apply, call은 this로 사용할 객체와 인수 리스트를 인수로 전달받아 함수를 호출한다.

이 메서드들의 본질적인 기능은 함수를 호출하는 거다.

그러면서 동시에 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this와 바인딩 시킨다

그렇다면 apply와 call메서드, 둘의 차이는?

apply : 호출할 함수의 인자를 배열로 묶어 전달

call : 호출함수의 인수를 쉼표로 구분한 리스트 형식으로 전달

bind

apply,call과는 다르게 함수를 호출하지 않는다. 객체만 전달할뿐!

마지막으로,

이 글을 봐도 이해가 안갈수 있다(미래의 지소라 잘 들어)

기억해야할것은

자바스크립트의 this는 동적이다

각 함수 호출방식의 형태를 꼭 구분할 줄 알아야 한다. 그래야 이게 일반함수 호출인지 메서드 호출인지, 생성자 함수 호출인지 바로바로 알 수 있음. 그래서 형태를 써 놓을테니 이게 어떤 방식의 함수 호출인지 구분해보면서 this바인딩을 맞춰보자….

일반 함수 호출

function foo(){
	console.log(this)
}
foo();	//window

메서드 호출

const person = {
    name:'lee'
    getName(){
        return this.name;
    }
}
console.log(person.getName());	//lee

생성자 함수 호출

function Circle(radius){
    this.radius = radius;
    this.getDiameter = function(){
        return 2 * this.radius;
    }
}
const circle1 = new Circle(5);
      
console.log(circle1.getDiameter()) //10

apply,call,bind메서드에 의한 간접호출

function getThisBinding(){
    return this;
}
      
const thisArg = { a : 1};
      
console.log(getThisBinding.apply(thisArg));	//{ a : 1 }
console.log(getThisBinding.call(thisArg));	//{ a : 1 }
console.log(getThisBinding.bind(thisArg)());	//bind메서드는 함수호출을 안하므로 명시적으로 호출해야함

이 4가지의 함수 호출방식을 보면서 어떻게 다른지,

어떤식으로 호출했는지 형태와 로직을 잘 보고 this와 잘 바인딩 시키면된다!

책 자바스크립트 딥다이브 22장 this

를 참조했음 (*ˊᵕˋo💐o

와 포스팅하나에 3일 걸림…. this 너… 이제 조금 알 것 같아 널 (feat.아이유)…

힘들다…

일반함수 호출

메서드 호출

생성자 함수 호출

Function.prototype.apply/call/bind

apply, call

bind

Share this post