OOP in JavaScript (1)

 

 

일단 oop 는 객체 지향 프로그래밍으로 모든건 객체로 이루어져있고 물리고 물려서 위에서 본인이 필요한것도 쓸수있는 

트리구조 같은 느낌으로 만 알고 있었다.

 

사용은 기존에 함수를 이용해서 만드는 방법(생성자함수)이 있었고 , 지금은 주로 class 키워드를 이용하여 만들어서 쓴다.

생성자 함수같은경우는 구조는 그냥 함수와 똑같다 그러나 사용시 에 new 키워드를 이용하여 this 가 가르키는 것이 하나의 새로운 인스턴스를 가리키고 우리는 그것에 접근하여 해당 this 에 속성과 method 를 추가하여 필요한 객체를 함수를 통해 비슷한 객체들을 편리하게 생성해낼수 있게되었다. 

 

이때 신경써줘야 할점은 생성자 함수같은경우 첫글자를 대문자로 써주고 생성시에는 new 키워드를 붙여줘야 하는 정도이다.

 

이러한 방법으로 비슷한 객체를 생성해낼수 있었지만  상황에 따라 다른 메서드를 추가하거나 새롭게 만들거나 해야하는 작업이 필요했고 또한 쓰지 않는 메서드도 일일이 생성이 되어 메모리를 차지하는 상황들이 문제였다.

 

매번 필요하지않은경우 까지 메서드를 생성하지 않기위해 생성자 함수에서 메서드를 함수내에 저장하지 않고 생성자 함수의 prototype에 메서드를 저장을 해주었다. 그로인해 새롭게 만들어진 인스턴스는 해당매서드를 바로 가지고 있는것이 아니라 그객체의 __proto__속성 안에 서 필요할때에만 메서드를 찾아갈수있게 되었다.  이러한 형태로 객체를 찍어내는것을 class 형태로 재정의 한거다

 

따라서 (class 문법) = (기존의 생성자함수) + (method를 밖에서 prototype 에 저장)하는 것과 같다. 이렇게 하면 일단 메모리 적으로도 좋은데 가장 효율이 있는 경우는 상속에 있다. 

 

상속의 경우를 이야기 하자면 복잡하니까 다음글에 쓰고 일단은 oop 특징과 필요한 개념들을 하나씩 정리를 해보자

 

1.oop 의 4가지 장점?? 특징을 보자면은 1.encapsulation   2.abstraction   3.inheritance/.polymorpism

 

   1.encapsulation : 캡슐화 즉 비슷한 객체를 하나의 공장에서  생성해내는 것을 말한다 필요한것을 묶어놓는 작업이라고 보면된다 코드로                                는 생성자함수나 class 를 만드는 작업이 속한다 > **가장중요한건 재사용성이다.

 

   2.abstraction: 추상화 흠 .. 솔직히 추상화 라는 건 딱 와닿지는 않는다 그냥 억지로 이해하기로는 복잡한 부분은 생성자함수나 class 안쪽                            에 넣어놓고 우리는 그걸 이용해서 인스턴스 찍고 속성이랑 메서드를 이용할수있다는거?

 

   3.inheritance/polymoripism :  상속/다형성 인데 이건 우리가 각각 다른 캡슐이여도 상위개념하고 하위 개념 식으로 뭔가 포함된 특징이                                                     있을때 음... 보편적인 특징과 세부적인 특징이 있을때 보편적인 개념은 상속을 통해서 가져와서 사용할                                                       수있고 또 다른 특징이필요하거나 기존의 특징을 상황에 맞게 변환할수 있는 것이 다형성에 관한 부분이                                                     될수있다.

 

2.Object를 생성하는 다양한 방법

    

   1.객체 리터럴 : {내용}

   2.new 키워드를 이용하여 내장된 기본객체 생성자 함수 와 new 를 더해서 new Object() 이후에 해당객체에 필요한거 추가

   3.객체를 생성하는 생성자 함수를 따로 만들어서 2와 거의 흡사

 

   별도.  Object.create(proto.) 메소드란?  (proto=새로 만든 객체의 프로토타입이어야 할 객체.) 즉 새로만들어진 객체의 prototype 이 인                자로 들어온다고 보면된다(prototype 이 원형을 뜻함으로 그의미를 생각하면좋다)

   

   일단 복제하는거 개념인데 이게 복제를 안하면 참조형 데이터타입이라 막 의도하지 않은부분도 변형이 와서 필요한 부분만 고칠때 복제를 해서 쓰는건데 이것이 원래는 OOP를 구현 할때 상속이나 다형성 을 만들어 낼때 쓰이는 메소드다. 이작업을 통해서 상속이나 다형성을 만들어 낼경우에는 기존의 prototype 역시 바뀌기 때문에 constructor를 재설정해줘야 하고 또한 상속받을때는 call 이나 apply 를 이용하여 this 를 재지정 해주어야한다.  이러한 것들이 다 합쳐진것이 새로운 class 문법이다. 좋은 설명은 developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create 링크에 고전적인 상속 방법 부분에 아주 잘 나와 있다.

 

 

3.__proto__와  prototype 의 관계

 

   일단 어디서 사용햇는지 살펴보고 이후에 정의를 해보자 

   __proto__ 는 생성자함수(or class) 를 통해 생성이 되어진 인스턴스를 콘솔을 찍어보면 맨아래 __proto__라는 속성을 찾아볼수 있다.

이때 생성자함수를 통해 생성된 인스턴스의 경우에는 __proto__ 에는 constructor 라는 키에 생성자 함수가 들어있는것을 확인할수있고 class 를 통해서 생성된 인스턴스는 __proto__의 객체에 class 내부에서 선언한 함수와 constructor 자리에 class 이름이 들어있는것을 확인 할수 있다.  

 

여기에서 메서드가 담긴위치가 다른것을 보면 추측할수 있는것이 있는데 생성자.prototype.메서드 를 하게 되면 해당 메서드가 인스턴스 자체내부에 저장되는 것이 아니라 인스턴스의 __proto__ 자리에 접근한다는 것을 알수 있다. 따라서 생성자의 원형에 내용을 저장을 하면은 그생성자만 만들어낸 인스턴스는 그값을 찍어내는것이 아니라 생성자의 원형에 접근해서 가져온다는 것을 알수있다 ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ 다소 틀린 부분이 있을수 있으므로 주의요함..

 

다시한번 요약을 해보면 __proto__ 는 본인이 인스턴스가 되어 생성자를 가르키는 거고 prototype은 생성자의 원형에 값을 저장하는 그런거?????????????????????????????????????????????????????????????

opentutorials.org/module/4047/24629

prototype vs __proto__ - JavaScript 객체 지향 프로그래밍

헤깔려서 찾아보니까 다시요약을 하자면 1.자바스크립트에서 함수또한 객체다. 2. 함수를 선언하게 되면 그 함수 자체의 객체와 또다른 객체즉 함수의 prototype 이라는 객체가 생성이 된다 즉 2개가 생성이됨 3. 생성자 함수자체의 객체는 prototype 이라는 속성을 이용하여 그 또다른 객체(함수의 prototype)에 접근할수 있고 생성자 함수를 통해 생성된 인스턴스는 __proto__라는 속성을 통해 함수의 prototype 에 접근한다. 4. 함수의 prototype 은 constructor에서 함수자체를 가르켜 둘은 서로 연결되어있다.

중요 . 함수는 선언하면서 두개의 객체를 만든다. 함수 자체도 객체다.

 

 

일단 여기서 일단락을 짓고 다음에 class 이전의 인스턴스 생성법 과 class 그리고 사용법 및 상속 에대한 구체적인 내용을 적어보자