es6에서는 arrow function을 사용한다.
근데 arrow function과 일반 function은 엄연히 다르다.
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
this.test = "global variable";
var normalFunctionTest = {
test : "mung",
c : function(){
console.log(this.test);
}
}
var arrowFunctionTest = {
test : "mung",
c : ()=>{
console.log(this.test);
}
}
normalFunctionTest.c();
arrowFunctionTest.c();
| cs |
$ node app.js mung global variable
가장 상단에 arrow function은 this를 바인딩 하지 않는다라고 설명이 되어있다. 그렇기 때문에 arrow function은 객체 메서드를 생성할 때 쓰지 않는 것이좋다.
문서를 보면 중간에 new와 함께 생성자로 사용하지 말라고 명시가 되어있다.
Use of the new operator
Arrow functions cannot be used as constructors and will throw an error when used with new.
이제 생성자에서 this 바인딩을 확인을 해보자.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
this.test = "global variable";
function t(){
this.test = "mung";
this.a = function(){
console.log(this.test);
};
this.aa = ()=>{
console.log(this.test);
}
}
new t().a();
new t().aa();
| cs |
위 코드에서는 this가 계속 t()를 가르키게 된다. 위에서는 arrow function과 일반 function의 차이를 못 느낄 것이다.
$ node app.js mung mung
하지만 js에서는 위와같은 방식을 선호하지 않는다.
1
2
3
4
5
6
7
8
9
10
|
function t(){
this.test = "mung";
}
t.prototype.a = function(){
console.log(this.test);
}
t.prototype.aa= ()=>{
console.log(this.test);
}
| cs |
위 코드를 실행을 하면....
$ node app.js mung global vriable
this가 바인딩 되지 않아 전역 this가 된다.
결론 콜백함수 내부에서 this를 사용하지 말자.
댓글
댓글 쓰기