구글맵 API 사용하기
2014-06-15
Javascript #4 자바스크립트의 this
2018-02-05
Explanation
자바스크립트의 this 는 선언 시점이 아닌 호출에 따라, 그리고 어떻게 호출했는지에 따라 가리키는 것이 달라집니다.
이글은 짧게나마, 설명보단 간단한 예로 몇가지 상황에 대해 정리해보려 합니다.
|
1 2 3 4 5 6 |
var aaa = 'aaa'; function a() { console.log(this.aaa); } a(); // 'aaa'; |
|
1 2 3 4 5 6 7 |
"use strict"; var aaa = 'aaa'; function a() { console.log(this.aaa); } a(); // TypeError |
가장 단순한 함수에서의 this는 전역을 가르킵니다. 전역에서의 변수 var aaa는 window.aaa와 같습니다(브라우저). 하지만 엄격모드(‘use strict’) 에서는 선언되지 않은 프로퍼티로 타입 오류입니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var a = { aaa: 'aaa', bbb: function() { console.log(this.aaa); } }; a.bbb(); // 'aaa'; var a = { aaa: 'aaa', bbb: { aaa: 'ccc', ddd: function() { console.log(this.aaa); } } }; a.bbb.ddd(); // 'ccc'; |
객체의 프로퍼티에 값으로 있는 함수 (메소드)의 this는 자신히 속한 객체를 가르킵니다.
|
1 2 3 4 5 6 7 8 |
function a() { console.log(this.aaa); } var aaa = { aaa: 'aaa' }; a.call(aaa); // 'aaa' |
call(), apply() 메서드를 이용하여 함수를 호출하면 this를 지정한 객체로 바인딩 할 수 있습니다.
|
1 2 3 4 5 6 |
function a(b) { this.bbb = b; } var aaa = new a('bbb'); console.log(aaa.bbb); // 'bbb' |
new 생성자로 선언한 함수 역시 만들어지는 객체로 this가 가르킵니다.
|
1 2 3 4 5 6 7 8 9 10 11 |
var a = { aaa: 'aaa', bbb: function() { (function() { console.log(this.aaa); })(); } } a.bbb(); // undefined // 엄격모드("use strict") 에서는 TypeError |
적당한 예인지는 모르겠지만 Amtn, 객체의 메서드 함수 안에 있는, 함수의 this가 객체를 가르킨다고 생각하거나 그렇게 기대하는 경우가 많은데, 기본적으로 단일 함수의 this는 전역을 가르키기 때문에 undefined, 엄격모드에서는 타입오류 입니다.
|
1 2 3 4 5 6 7 8 9 10 11 |
var a = { aaa: 'aaa', bbb: function() { var self = this; (function() { console.log(self.aaa); })(); } } a.bbb(); // 'aaa' |
그리하여 일반적으로 var self (또는 _this, that ..) 등의 임의의 변수로 this를 참조하여 사용하는 경우가 많았던것 같습니다.
ES6에서 새롭게 추가된 구문으로 화살표 함수에서는 위에서 기대하던대로 자신만의 this를 생성하지 않고 this를 감싸고 있는 컨텍스트로부터 대상을 찾습니다.
|
1 2 3 4 5 6 7 8 9 10 |
var a = { aaa: 'aaa', bbb: function() { (() => { console.log(this.aaa); })(); } } a.bbb(); // 'aaa' |
