[생활코딩] JS문법(객체지향)- 생성자와 new

JavaScript 계열의 언어를 Prototype-based programming 으로 부르고 이 카테고리에 속해있습니다. 

• JS는 멀티 패러다임 언어로 명령형, 함수형, 객체지향형인 언어이다. 기본적으로는 함수가 일급시민으로 취급되는 언어이다. 자바스크립트를 이해하려면 객체 이전에 함수를 제대로 이해해야 합니다. 
• 객체란 서로 연관 변수와 함수를 그룹핑한 그룹이라고 이전 수업에서 설명했습니다.
• 객체 내의 변수를 property(속성) 그리고 함수를 method(메소드)라고 부릅니다. 

자바스크립트 생성자의 특징

• 일반적인 객체지향 언어에서 생성자는 클래스의 소속이다.(e.g. Java) 하지만, 자바스크립트에서 객체를 만드는 주체는 함수이다.
• 함수에 new키워드를 붙이는 것을 통해서 객체를 만들 수 있다는 점은 자바스크립트에서 함수의 위상을 암시하면서 자바스크립트가 추구하는 자유로움을 보여주는 사례라고 할 수 있음

객체 만들기

 /*person 객체 생성, propery- name, method - introduce()*/
      const person = {};

      person.name = "onecong";
      person.introduce = function () {
          //this 는 객체(person)를 가리킴 
        return `my name is ${this.name}`;
      };
      document.write(person.introduce());

위의 코드는 객체를 만드는 베이직한 방법이지만 코드가 분산되어 있기 때문에 좋지않아 보인다. 

const person1 = {
        name: "example2",
        introduce: function () {
          return "my name is " + this.name;
        },
      };
      document.write(person1.introduce());

이 코드는 좀 더 가독성이 높은 코드이다. 중괄호 안에 속성과 메소드를 담아서 이 객체의 소속임이 확실해보인다.

생성자(Constructor)

//메소드의 중복이 발생했을 때 어떻게 해야할까?
      const person1 = {
        name: "example1",
        introduce: function () {
          return "my name is " + this.name;
        },
      };
      const person2 = {
        name: "example2",
        introduce: function () {
          return "my name is " + this.name;
        },
      };

위의 코드의 introduce() 메소드는 정확히 같은 내용으로 서로 다른 두 개의 객체에서 중복이 되고 있다.

객체의 구조를 재활용하는 방법이 필요하며 이 때 사용하는 것이 바로 생성자이다. 

• 생성자(Constructor)는 객체를 만드는 역할을 하는 함수이다.
• 자바스크립트에서 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자(생성자)라고 할 수 있다. 
• 부연설명) Java의 경우엔 생성자가 클래스에 소속되어 있어서 객체를 만들어내는데 Javascript에서는 생성자가 어디에도 소속되어있지 않고 함수인 것입니다. 그래서 이 함수에 new를 붙여서 실행하면 객체를 만드는 것이죠. (클래스의 존재가 JS에는 없습니다.)
• 함수에 new를 붙이면 return값은 객체가 된다.

//생성자함수는 일반함수와 구별하기 위해 첫글자가 대문자입니다. 
function Person() {}
      const p = new Person();
      p.name = "cong";
      p.introduce = function () {
        return "my name is " + this.name + "</br>";
      };
      document.write(p.introduce());

      /*
      1.Korean()함수 정의  
     2.함수 앞에 new 키워드 붙이기 -> Korean()함수가 생성자가됨
     3. 인자로 ("이름")전달
     4. Korean함수는 객체를 만드는 역할을 하는 함수 즉, 생성자가 됨
     5.함수 내부의 실행이 완료된 뒤, 그 내용을 담은 객체를 리턴
     6. 생성한 객체를 변수(k1, k2)에 담아서 사용
     -----생성자 내에서 이 객체의 프로퍼티를 정의
     -----전문 용어로 객체를 "초기화"한다고 함  
      */
      function Korean(name) {
        this.name = name;
        this.introduce = function () {
          return "my name is " + this.name + "</br>";
        };
      }

      const k1 = new Korean("onecong");
      const k2 = new Korean("gamza");
      document.write(k1.introduce());
      document.write(k2.introduce());

• 맨 위의 예제(function Person() )는 함수를 호출할 때 new를 붙이면 새로운 객체를 만든 후에 이를 리턴하는 것을 보여줍니다. 객체를 하나만 사용할 경우 적합하다
• 주석 아래의 예시는 여러사람을 위한 객체를 만드는 경우이다. 생성자 내에서 객체의 프로퍼티를 정의하고 있으며 이러한 작업을 초기화(init)라고 한다. 
• 주의) 생성자 함수는 일반함수와 구분하기 위하여 첫글자를 대문자로 표시한다.