Portfolio

Index

Index 7. this 7.1 this 란? 7.2 this 의 특징 7.3 this 값을 사용자의 의도대로 조작하기

7. this

7.1 this 란?

자신을 호출한 객체

자신이 생성할 객체

this는 이 두 경우에서 객체를 가리키는 자기 참조 변수입니다. 아래 예제에서 this는 window입니다.


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


let myObj = {
    val1: 100,
    func1: function () {
        console.log(this);
    }
}

myObj.func1();

예를 들어보도록 하겠습니다. 모든 함수는 실행할 때마다 this 라는 객체가 추가됩니다. this는 함수가 실행될 때 함수를 소유하고 있는 객체를 참조합니다.


/ * this */
function sayName(){
  console.log(this.name);
}

var name = 'Hero'; 
// 전역으로 선언한 name 변수의 앞에는 window 가 생략되어 있습니다. 
// 때문에 window.name === "Hero" 가 성립합니다.
let peter = {
  name : 'Peter Parker',
  sayName : sayName
}

let bruce = {
  name : 'Bruce Wayne',
  sayName : sayName
}

sayName();
peter.sayName(); 
bruce.sayName();

/* sayName() 함수를 실행했을 때와 
peter, bruce 객체의 sayName 함수를 호출했을 때의 결과를 비교해 보세요 */


/* this 사용 예시 */

let 호텔 = [{
  '이름' : '하나호텔',
  '위치' : '제주도 제주시 001',
  '가격' : {'A':50000, 'B':30000, 'C':15000},
  '방의개수' : 50,
  '예약자수' : 25,
  '남은방의개수' : function(){return this.방의개수 - this.예약자수}
},{
  '이름' : '둘호텔',
  '위치' : '제주도 제주시 002',
  '가격' : {'A':100000, 'B':60000, 'C':30000},
  '방의개수' : 100,
  '예약자수' : 30,
  '남은방의개수' : function(){return this.방의개수 - this.예약자수}
},{
  '이름' : '셋호텔',
  '위치' : '제주도 제주시 003',
  '가격' : {'A':80000, 'B':50000, 'C':30000},
  '방의개수' : 120,
  '예약자수' : 80,
  '남은방의개수' : function(){return this.방의개수 - this.예약자수}
}];
console.log(호텔[0].남은방의개수());
console.log(호텔[1].남은방의개수());
console.log(호텔[2].남은방의개수());

7.2 this 의 특징

this는 함수가 만들어질 때가 아닌 '실행'될 때 그 값이 결정됩니다.


function sayName(){
  console.log(this.name);
}
var name = 'Hero';

let peter = {
  name : 'Peter Parker',
  sayName : sayName
};

let bruce = {
  name : 'Bruce Wayne',
  sayName : peter.sayName
};

bruce.sayName();

7.3 this 값을 사용자의 의도대로 조작하기

함수의 apply(), call(), bind() 메소드를 사용하면 this를 조작하거나 고정해 둘 수 있습니다.

이는 사용자가 원하는 의도대로 binding을 통한 컨트롤을 할 수 있게 합니다.

7.3.1 call()

call() 메서드의 인수에 this 로 사용할 값을 전달할 수 있습니다.


var peter = {
  name : 'Peter Parker',
  sayName : function(){    
		console.log(this.name);
	}
}

var bruce = {
  name : 'Bruce Wayne',
}
peter.sayName.call(bruce);

// peter.sayName.call(bruce) 의 결과는 무엇이 될지 생각해 봅시다.

7.3.2 apply()

apply() 메서드의 인수에 this 로 사용할 값을 전달할 수 있으며, 배열의 형태로도 전달할 수 있습니다.


var peter = {
  name : 'Peter Parker',
  sayName : function(is, is2){    
		console.log(this.name+ ' is '+ is + ' or ' + is2);
	}
}

var bruce = {
  name : 'Bruce Wayne',
}

peter.sayName.apply(bruce, ['batman', 'richman']);

/* peter.sayName.apply(bruce, ['batman', 'richman']) 의 결과가 무엇이 될지 생각해보고 
apply 를 call로 바꾸어 호출했을 때와 비교해 봅시다. */

7.3.3 bind()

bind() 는 this가 고정된 새로운 함수를 반환합니다.


function sayName(){
  console.log(this.name);
}

var bruce = {
  name: 'bruce',
  sayName : sayName
}

var peter = {
  name : 'peter',
  sayName : sayName.bind(bruce)
}

peter.sayName();
bruce.sayName();

/* peter.sayName() 과 bruce.sayName() 의 결과 값이 무엇이 될지 생각해봅시다. */

다음과 같이 콜백의 this가 전역을 바라보고 있지 않은 경우도 있습니다.


[1, 2, 3].forEach(function(){console.log(this)}, [10, 20, 30])