[EcmaScript6] ArrorFunction과 prototype

 

1.Arrow Function

​

우선, ES5의 함수 사용법이다.

var hello = function(x){ return x*2; }

그리고 ES6의 ArrowFunction 사용예시이다.

const hello = (x) => { return x*10; }

매개변수가 1개인 경우에는 다음과 같이 소괄호를 생략 가능하다.

const hello = x =>{ return x*10 }

또한, 함수가 한 줄로 표현 가능하다면, 중괄호 생략이 가능하고, 자동으로 리턴된다. 이는 매개변수가 두 개 이상일때도 같다.

const hello = x => x * 10 const hi = (x,y) => x * y

매개변수가 없을 경으 다음과 같이 사용한다.

() =>{ .... }

이 arrow function은 콜백 함수에서 사용하면 아주 간결하게 표현하기 좋다는 장점이 있다.

---

2. Arrow Function과 setTimeout()

let Hello = function(){

this.count = 20;

};

Hello.prototype = {

adds : function(){

this.count +=1;

},

gets: funtcion(){

setTimeout(() =>{

this.adds();

console.log(this.count); }, 1000);

},

};

let newHello = new Hello();

newHello.gets(); // 실행결과 21

Hello 객체개 생성되고, Hello.prototype 에 gets 메서드를 arrowFunction을 이용하여 정의하였다.

newHello.get()을 호출하면, gets() 함수에 작성된 setTimeout()이 실행되며, 1초 후에 콜백 함수가 실행된다.

이 코드에서, Hello.prototype의 gets 메서드를 arrowFunction을 이용하여 정의하였다고 하였는데, 화살표 함수 블록에서 this가 newHello.get()형태의 newHello 인스턴스를 참조한다.

this.adds();

이 this가 newHello 인스턴스를 참조하므로 adds()가 호출된다. plus()에서 this.count에 1을 더하고, 이 때 this 는 newHello 인스턴스를 참조한다.

우리가 콜백 함수를 function 키워드로 작성하면 this가 window오브젝트를 참조하는 것과는 차이가 있다.

​

예시로,

https://dlaxodud2388.tistory.com/3

이 때, this가 window 오브젝트에 참조되는 것을 막기 위해 that이라는 변수를 이용했던 것과는 다르다는 것을 알 수 있다.

 

---

3. ArrowFunction과 Prototype

​

ArrowFunction을 prototype에 연결하면 화살표 함수 블록에서 this가 인스턴스를 참조하지 못한다. 예시를 들겠다.

예시 코드)

let Hello = function(){

this.count = 10;

};

Hello.prototype = {

add: () => {

this.count += 1;

}

};

let newHello = new Hello();

newHello.add();

console.log(newHello.count);

console.log(winodw.count); //결과 : 10 // NaN

new Hello 인스턴스의 add()를 호출하므로 add()에서 this로 newHello 인스턴스 참조가 가능하다. add()에서 this.count 에 1을 더하므로 newHello.count에서 11을 출력해야하는데 10이 출력된다.

​

add :() =>{ this.count += 1; }

이 부분의 this.count에서 this가 newHello 인스턴스를 참조해야 하는데, winodw 오브젝트를 참조한다. 따라서, newHello 인스턴스의 count에 1을 안더하고 window의 count에 1을 더하려고 하기 떄문에 이런 결과가 발생한다.

​

그런데, 이 때, 오브젝트에서 프로퍼티 값을 구할 때 프로퍼티가 없으면 undefined를 반환하는데 이 때문에, window.count는 undefined값이 대입된 것이다.

그런데 이 곳에 1을 더하려 했으니, undefined+1의 형태가 된 것이고, 이 결과로

NaN(Not a Number)이 된 것이다.

자바스크립트의 보편적인 처리방법이다.