javascript (prototype, __proto__)

 

java를 하다가 js코드에서 해당 keyword를 만나면서 혼란스러웠던 기억이 난다.

조금 정리를 해보려고 합니다.

 

1. 내가 혼란이 되었던 부분

1. 프로젝트 개발전에 프로토타입(prototype)을 만들어 보자고 한다.
   그런데 갑자기 동일한 이름이 코드에서 사용되고 있어서, 이건 뭐지 라고 생각을 했다.

2. http://prototypejs.org/ 아주 예전에 jquery와 같이 비슷한 오픈소스가 있었다.
    이름도 비슷해서 이것을 사용하는 줄 착각을 했다.

3. 코드 자체가 이해가 되지 않았다.

function dataCall(){};
dataCall.prototype.name = "홍길동"​

이런 코드의 패턴을 처음에는 받아들이기 쉽지 않았다.
함수에서 사용하려면, 이렇게 구성하면 되는데, 왜? 이상한 문법을 사용해서 구성을 했을까?

function dataCall(name){
    this.name = name;
    // 비지니스 로직 수행
}

dataCall("홍길동")

 

4. 그러다가 갑자기 __proto__라는 개념도 나와서 또 당황을 했다.

 

2. 그럼 왜 js에서는 이런 구조를 가지고 programe-language를 구성했을까?

개인적인 생각으로 js는 브라우저라는 엄청난 Device를 통해서 기술발전 속도가 매우 빠르게 진행된다.

ES6도입후에 class로 객체를 생성 할수 있었다. 일반적으로 객체지향처럼 코딩이 가능하다.

 

하지만 그 이전에는 js에서 객체지향 프로그램을 구성할 수가 없어서 이 prototype개념이 도입되었다고 생각한다.

최신 브라우저에서는 모두 최신 ES문법을 지원하지만,

- 아직 babel을 적용하지 않은 사이트나

- 예전 브라우저를 지원하는 경우

- 기존 소스가 유지되고 있으며

- SPA 프레임워크가 도움되지 않지만, 모바일등에서 Single Page Application개발이 필요한 경우

해당 js의 prototype을 사용하고 있을거 같다.

 

3. 참고 영상

도움되는 영상을 첨부드리며, 해당 영상에서 꼭 알고 가셨으면 좋을 keyword를 정리하려고 합니다.

 

■ prototype개념 잡고 넘어가기

JavaScript - prototype (1/2) : prototype이란?
https://www.youtube.com/watch?v=yXnbvyl04V4 

JavaScript - prototype (2/2) : prototype chain

https://www.youtube.com/watch?v=673mZ8rE9UY

 

 

함수란 무엇인가? JS에서는 객체이다.!!!

1) function Persion() {}

2) var Person = new function();

1), 2)가 같은 것이다. 

 

prototype은 js에서 상속을 지원하며, (ex : Super.prototype = new Ultra() 패턴 )

객체의 property(속성)값을 추가로 넣을수 있다. (ex : Ultra.prototype.ultraProp = true 패턴)

생활코딩 예제

 

그래서 JS에서  function은 단순 함수가 아닌 객체여서 prototype을 이용해서 property를 가질 수 있다.

function testProp() {
}
testProp.prototype.name = "테스트1"
testProp.prototype.age = "30"
testProp.prototype.job = "개발자1"

console.log(testProp.prototype.name);
console.log(testProp.prototype.age);
console.log(testProp.prototype.job);

//테스트1
//30
//개발자1

new를 생성해여서 prototype에 할당된 정보를 출력한다.
일반 함수가 new를 통해서 생성자가 된다.

function testProp2() {
}
testProp2.prototype.name = "테스트2"
testProp2.prototype.age = "32"
testProp2.prototype.job = "개발자2"

var testP2 = new testProp2()
console.log(testP2.name);
console.log(testP2.age);
console.log(testP2.job);

# 테스트2
# 32
# 개발자2

 

■ 함수와 prototype , new생성객체에 __proto__ 연결 흐름도

 

JavaScript 객체 지향 프로그래밍 - 15. prototype vs proto

https://www.youtube.com/watch?v=wT1Bl5uV27Y

생활코딩 화면 캡쳐

 

최신 문법을 사용중이시면 prototype을 사용하지 않고 class 문법을 사용하시면 됩니다.

class Product{
   constructor(item){
      ~~~
   }
}

 

전반적으로 Javascript의 객체지향 개념은 생활코딩에 잘 설명해주셔서, 한번 보시면 도움이 많이 됩니다.

https://www.youtube.com/watch?v=DHIlPmJUDzk&list=PLuHgQVnccGMAMctarDlPyv6upFUUnpSO3  

 - https://youtu.be/iFiKY8kp_FU

 - https://youtu.be/339RrPTZTEU