[ JavaScript ] 자바스크립트 바인딩과 this | 자바스크립트 개념

 

 

 

이미지 출처 : https://dev.to/lawrence_eagles/understanding-first-class-functions-and-anonymous-functions-in-javascript-b2d

 

 

 

 

 

 

자바스크립트에서는 바인딩와 this 의 개념이 끊임없이 나옵니다.

바인딩과 this 는 많은 사람들이 혼동할 수 있고, 개발을 계속 하시는 분들도 헷갈릴만한 부분이라고 생각해

포스팅을 합니다!

 

 

 

 

 

 

 

자바스크립트 바인딩?

 

 

 

바인딩이란, 함수 또는 메소드를 호출한 대상에 실제 함수를 연결해주는 것입니다.

즉, 함수를 호출하는 부분에 함수가 위치한 메모리 번지를 연결시켜주는 것이라 할 수 있죠.

 

 

 

예시로 살펴봅시다. 코드가 더 이해하기 쉬우니까요.

 

 

 

 

var aObj = {
	num:'1'
    printNum:function(){
    	console.log(this.num);
    }
}

var bObj = {
	num:'2'
}

bObj.printNum = aObj.printNum;

aObj.printNum();  // 1
bObj.printNum();  // 2

 

 

 

aObj.printNum(); 에서 printNum은 aObj에 바인딩 되었다고 할 수 있습니다.

 

bObj.printNum(); 에서 printNum은 bObj에 바인딩 되었다고 할 수 있겠죠.

 

 

 

 

 

 

자바스크립트 this ?

 

 

아마 여러 언어로 프로그래밍을 해보신 분들은 this 가 친숙하실 지도 모르겠습니다.

하지만 자바에서 this 와는 약간 달라요.

 

 

 

자바스크립트에서 this는 상황에 따라 지칭하는 것이 다릅니다.

 

this 를 쓸 수 있는 상황들을 알아봅시다.

 

 

 

 

 

 

1. 일반 함수를 호출 했을 경우

 

 

var num = '1';
console.log(window.num);

var printNum = function(){
	var num = '2';
    console.log(this.num);
}
printNum();

 

 

 

일반함수 호출 과정에서 this는 전역 객체를 의미합니다.

전역 객체에 바인딩 된다고 표현할 수도 있겠죠.

 

위에 예시 코드의 출력값이 어떻게 될까요?

 

둘 다 1이 출력됩니다.

 

 

printNum 함수 안의 this는 전역객체의 num을 가리키고 있기 때문입니다.

 

 

 

 

2. 객체 속 메소드에서 호출 했을 경우

 

 

 

var aObj = {
	num:'1'
    printNum:function(){
    	console.log(this.num);
    }
}

var bObj = {
	num:'2'
}

bObj.printNum = aObj.printNum;

aObj.printNum();  // 1
bObj.printNum();  // 2

 

 

제일 처음의 예시를 다시봅시다.

 

객체 속의 메소드에서 호출 했을 때의 this 는 그 메소드를 호출한 객체에 바인딩 됩니다.

 

 

출력하는 부분을 보면,

 

aObj.printNum(); 에서 printNum 메소드는 aObj가 호출했고, 

bObj.printNum(); 에서 printNum 메소드는 bObj가 호출했기 때문에

 

같은 이름을 가진 메소드지만 각각의 객체에 바인딩 됩니다.

 

 

 

 

 

 

3. 생성자 함수를 호출 했을 경우

 

 

 

 

var Number = function(num){
	this.num = num;
}

var a = new Number('1');
console.log(a.num);

var b = new Number('2');
console.log(b.num);

 

 

 

생성자 함수에서 this는 해당 생성자 함수로 생성된 객체에 바인딩 됩니다.

 

Number 를 이용해 a 객체를 만들고,

this.num= num; 안에 this 는 a 객체에 바인딩 됩니다.

 

마찬가지로,

 

Number 를 이용해 b 객체를 만들고,

this.num= num; 안에 this 는 b 객체에 바인딩 됩니다.

 

 

따라서 출력값은 각각 1 과 2 가 되겠네요.

 

 

 

 

 

 

 

 

 

이번 포스팅이 도움이 되셨다면 좋겠습니다!

감사합니다.