[JavaScript] this
우리가 일반적으로 언어에서 사용하는 this는 Java의 경우 객체의 레퍼런스 변수를 의미한다.
하지만 javascript에서는 전혀 다른 의미를 갖는다.
Window
일반적으로 javascript에서 this는 window를 의미한다.
하지만 예외적으로 this의 의미가 바뀌는 경우가 있다.
Object
this가 객체를 가리키는 경우이다.
Java에서의 this처럼 생성자나 {}로 생성한 객체 내부에서 작성한 this는 해당 객체 혹은 객체 인스턴스를 가리키게 된다.
1 | const obj = function(name, age) { |
2 | this.name = name; |
3 | this.age = age; |
4 | } |
5 | |
6 | const newObj = new obj('sangjin', 28); |
7 | console.log(newObj.name); //'sangjin' |
8 | console.log(newObj.age); //28 |
참고로, 생성자가 아닌 {}로 생성한 객체에 대하여 임시변수에서 해당 객체를 참조할 경우 본래의 객체를 그대로 참조하기 때문에 원본객체를 보존할 수 없게 된다.
이 객체로 참조하여 조작을 할 경우 특정 문법들을 이용하여 객체를 복사하는 방법으로 작업하기를 권장한다.
1 | const obj = { |
2 | name: 'sangjin', |
3 | age: 28, |
4 | getName: function() { |
5 | return this.name |
6 | } |
7 | } |
8 | |
9 | const newObj = obj; |
10 | |
11 | //권장: obj가 새롭게 복사된다. obj내부에 속성으로 객체나 배열이 존재할 경우 복사가 아닌 참조를 하게됨 => 얕은복제(Shallow Copy). |
12 | const newObj = Object.assign({}, obj); |
Event 객체
또다른 this의 독특한 예외는 이벤트를 발생시키는 대상을 가리키는 경우이다.
1 | document.body.addEventListener('click', function(){ |
2 | console.log(this) // body |
3 | }) |
위의 예제를 실행하면 this는 window가 아닌, body를 호출하는 결과를 볼 수 있다.
클로저에서의 this
그렇다면, 객체 내부 클로저나 특정 이벤트의 콜백클로저 내부에서는 어떨까
1 | //Object |
2 | const obj = function(firstName) { |
3 | this.firstName = firstName; |
4 | const names = ['sangjin', 'jihye'] |
5 | names.map(function(name, index){ |
6 | console.log(firstName + name) //firstName = undefined |
7 | console.log(this)// window를 가리킨다. |
8 | }) |
9 | } |
10 | const newObj = new obj('hwang'); |
11 | |
12 | const obj2 = { |
13 | option : function() { |
14 | function test() { |
15 | console.log(this) |
16 | } |
17 | test(); |
18 | } |
19 | } |
20 | |
21 | //Event |
22 | document.body.addEventListener('click', function() { |
23 | const test = function() { |
24 | console.log(this); //window를 가리킨다. |
25 | } |
26 | test(); |
27 | }) |
모두 window를 가리키고 있다.
이러한 예외를 해결하기 위하여 객체 내부에 this를 임시변수에 담아, 인자로 함께 전달해줄 수도 있고.
call, apply, bind함수를 이용하여 this를 인자로 담아 사용하면 window를 가리키는 예외를 해결할 수 있다.
1 | const obj = function(firstName) { |
2 | this.firstName = firstName; |
3 | const names = ['sangjin', 'jihye']; |
4 | const newThis = this; |
5 | names.map(function(name, index){ |
6 | console.log(firstName + name); |
7 | console.log(newThis); // obj를 가리킨다. |
8 | }) |
9 | } |
10 | |
11 | const newObj = new obj('hwang'); |
화살표 함수
위에서 클로저나 콜백함수의 경우 작업시 혼동을 줄 여지가 있는 예외가 발생함으로써 그에 대한 몇몇 방안을 소개했다.
이번에는 화살표함수를 이용해 이 예외를 해결할 수 있는 방법을 확인해보자.
화살표함수에 대하여 간략하게 소개하자면, ECMA2015부터 새로 생긴 함수 문법이다.
일반적으로 함수를 생성하는 표현을 보다 간략하게 할 수 있다.
1 | //일반적인 함수선언 |
2 | const func = function(param) { |
3 | return param; |
4 | } |
5 | //화살표함수 |
6 | const func2 = (param) => param |
화살표함수의 특징중 하나는 자신만의 this를 생성하지 않는다는 점이다.
javascript에서 일반적인 function은 자기 자신만의 this를 생성한다.
하지만 화살표함수에서는 자기 자신의 this를 생성하지 않고 상위 스코프를 탐색하여 this를 가져오게 된다.
1 | const obj = { |
2 | test : () => { |
3 | console.log(this) // window |
4 | } |
5 | } |
6 | |
7 | obj.test(); // window |
8 | |
9 | document.body.addEventListener('click', () => { |
10 | console.log(this); // window |
11 | }) |
때문에 객체의 값이나 이벤트의 콜백함수로 화살표함수를 사용할 경우 this를 일반적인 객체호출이나 이벤트객체 호출을 하지않는 결과가 나온다.
따라서 this의 활용에 따라 주의해서 사용해야 할 것 같다.
