[OOP]constructor, prototype 연습문제

1. 다음 코드의 출력 결과는 무엇일까요

 

'Kim' 입니다.

첫 4줄에 의해서 a = { name : 'Kim' } 이 되고 

a.__proto__.name = 'Park'; 이건 부모 prototype에 { name : 'Park' } 이걸 추가하라는 뜻입니다.

그럼 이제 a.name 이라고 사용했을 때 

내가 직접 가지고 있는 { name : 'Kim' } 이걸 우선 출력해줍니다.

 

 

 

 

 

2. 함수가 안들어가요

위에 0번 문제에서 Student라는 부모에 sayHi라는 함수를 하나 추가하라고 했죠?

그래서 sayHi()라고 사용하면 "안녕 나는 ~~이야" 라고 내 이름을 출력해주는 함수를 prototype에 추가했습니다. 

하단처럼 만들었는데 의도한 대로 이름이 출력되지 않고 있습니다. 

원인은 무엇일까요? 

 

 

 

sayHi() 라는 함수를 prototype에 추가할 때 arrow function을 사용했습니다 .

결론부터 말하자면 arrow function은 그냥 일반 function 대체품이아닙니다.

arrow function은 this를 바깥에 있는 this를 그대로 사용하고 싶을 때 쓰는 함수라고 했었습니다. 

암튼 그런데 sayHi() 함수를 만들 때 arrow function을 사용해서

내부에 있던 this라는 값이 이상해진 것이었습니다. 

 

sayHi 함수에 그냥 this 하나만 출력해보시면 window 같은게 출력될 것입니다. (strict mode에선 undefined)

이전 강의내용에 따르면 arrow function을 사용하시면 그냥 바깥 아무데나 있던 값을 가져와서 사용합니다.

바깥 this 값은 window이며,

그 window를 그대로 저기 함수 안에다가 적용했기 때문입니다. 

그래서 this가 이상해서 그랬던 문제였습니다. 

 

 

this 잠깐 복습하자면 

함수안에서 this 키워드의 뜻은 매번 재정의됩니다. 

object안에 들어있는 함수안에 있는 this는 함수를 부른 object가 된다고 했습니다.

하지만 arrow function의 경우 함수 안에서 this 뜻이 재정의되지 않고 바깥에 있던 this를 사용합니다. 

 

 

 

 

 

3. 모든 array에 적용할 수 있는 함수를 직접 새로 만들려면 어떻게 해야할까요?

모든 array에 붙일 수 있는,

array 내에 있는 3이라는 값을 제거해주는 유용한 함수를 하나 만들고 싶습니다. 

 

이렇게 array뒤에 붙이기만 하면 array 내의 3이라는 모든 숫자 자료들이 삭제됩니다.

멋있게 이름은 remove3() 이라고 하겠습니다. 

remove3()함수는 어떻게, 어디에 만들어야 모든 array에 쓸 수 있을까요?

 

 

일단 모든 array에 pop(), sort(), push() 이런 함수를 붙일 수 있는 이유 혹시 기억나십니까.

모든 array 자료형은 부모가 Array로 부터 new Array() 이런 식으로 만들어지기 때문에 

Array라는 부모의 prototype에 있는 함수들을 자유롭게 가져다 쓸 수 있어서 그렇습니다. 

 

 

그럼 우리도 Array의 prototype에 remove3라는 함수를 하나 추가해주면 되는게 아닐까요?

맞습니다.

 

 

이렇게 코드를 짜면 되겠군요.

위의 코드에서의 this라는 키워드는 현재 remove3이라는 함수를 작동시키는 object (여기서는 array) 라는 뜻입니다.

 

 

그냥 어려운거 아니고 remove3()함수는

1. this라는 array의 길이만큼 반복문을 돌리는데, 돌리는 과정에서 this[i] 라고 쓰면서 this 안에 있는 모든 데이터를 출력해봅니다. 

2. 만약에 this[i]가 3이면 

3. this라는 array에서 i번째 자료를 제거해주세요 

라고 썼습니다. (splice 라는 함수는 array안에 뭘 제거할 때 가끔씁니다. 구글 검색하시면 나와염)

 

 

 

 

 

 

출처 : 코딩애플의 매우쉽게 이해하는 JavaScript 객체지향 & ES6 신문법