JavaScript - 사용자 정의 객체 생성자 함수 (function, prototype)

사용자 정의 객체

• 사용자가 직접 필요한 객체를 생성해서 사용
• 사용자 정의 객체 생성 방법
  • 리터럴 이용
  • 생성자 함수(function()) 이용
  • new Object() 이용
  • class 정의하고 객체 생성

생성자 함수 (function) 이용

• 함수 선언과 같은 방식으로 function 키워드 사용하여 선언(정의)
• 함수를 클래스처럼 사용
  • function 함수명() : 생성자 기능
• 프로퍼티 사용 : this.프로퍼티
• new 연산자를 사용해서 객체 생성
• 형식

// 함수(클래스로 이용) 선언 (생성자 기능)
function 함수명() {
    // 프로퍼티 추가
    this.프로퍼티 : 값 1,
    this.프로퍼티 : 값 2,
    // 메소드 추가
    this.메소드 = function() {
        수행 코드;
    };
}
// 객체 생성
var 객체(인스턴스) = new 함수명(); // 생성자 생성하듯.
객체.메소드();
객체.프로퍼티1;

// 함수(클래스로 이용) 선언 (생성자 기능)
function People() {
    //프로퍼티 추가
    this.name : "홍길동",
    this.age = 20,
    // 메소드 추가
    this.getName = function() {
        return this.name;
    };
}
// 객체 생성
var person = new People(); // 생성자 처럼 사용
person.getName(); // 메소드 호출

생성자 함수 이용 예제 - object2-function.html

        <script type="text/javascript">
            // 멤버변수 : 프로퍼티(속성)
            function People() {
                this.name = "홍길동";
                this.age = 20;
                this.getName = function() {
                    return this.name;
                };
            }
            // new 연산자를 사용해서 객체(인스턴스) 생성
            var person = new People();
            console.log(person.name);
            console.log(person.age);
            console.log(person.getName());
            // 홍길동
            // 20
            // 홍길동

            // 생성자 함수를 변경하지 않고도 function() { } 외부에서 프로퍼티(속성) 추가 가능.
            person.address = "서울";
            // 메소드 추가
            person.getAddress = function () {
                return this.address;
            }
            // 새로 추가된 메소드 호출
            console.log(person.address);
            console.log(person.getAddress());
            // 서울
            // 서울

            // person2 객체 새로 생성
            // address는 person에만 추가한 것이기 때문에 person2에는 없다 -> 호출하면 오류 발생
            var person2 = new People();
            // console.log(person2.getAddress());

            function Book(title, author, price, date) {
                this.title = title;
                this.author = author;
                this.price = price;
                this.date = date;

                // 메소드
                this.getBook = function() {
                    return this.title + " " + this.author + " " + this.price + " " + this.date;
                }
            }

            let book = new Book("자바스크립트", "홍길동", 2000, "2021-11-11");
            console.log(book.getBook());
            // 자바스크립트 홍길동 2000 2021-11-11

            // 함수이므로 호이스팅 가능
            // function Book(title, author, price, date) {
            //     this.title = title;
            //     this.author = author;
            //     this.price = price;
            //     this.date = date;

            //     // 메소드
            //     this.getBook = function() {
            //         return this.title + " " + this.author + " " + this.price + " " + this.date;
            //     }
            // }
        </script>

생성자 함수 이용 예제 ul태그 객체 생성 - object3-function2.html

        <script type="text/javascript">
            // 생성자 함수를 이용해서 객체 정의(선언)
            function ListTag() {
                //프로퍼티 지정
                this.ulTag = document.createElement("ul");
                this.ulTag.type = "square";
                // li 태그 생성해서 ul 태그에 추가
                for(var i = 1; i <= 5; i++) {
                    var listItem = document.createElement("li");
                    var itemInput = prompt("꽃" + i  + "입력");
                    listItem.innerHTML = itemInput;
                    // u l태그에 li 추가
                    this.ulTag.appendChild(listItem);
                }
                // 멤버 메소드
                this.getListItem = function() {
                    return this.ulTag;
                }
            }
            // 객체 생성
            window.onload = function() {
                var list = new ListTag(); // 객체 생성
                // div 태그에 ul 태그(객체) 추가
                var box = document.getElementById('box');
                box.appendChild(list.getListItem());
            }
        </script>
</head>
<body>
    <div id="box"></div>
</body>

프로토타입

• 객체를 만드는 원형
• 함수도 객체이고, 객체인 함수가 기본으로 갖고 있는 프로퍼티
• 함수의 객체가 생성될 때 모든 객체가 공유하는 공간
• 자바의 static 개념
• 프로토타입 멤버 정의
  • 멤버를 함수 외부에 선언
  • 여러 객체가 공유하게 하는 방법
• 프로토타입 사용 시 이점
  • 생성자 함수 이용해서 객체를 생성할 때 프로퍼티와 메소드는 객체마다 생성
    • 사용하지 않을 때도 생성되기 때문에 메모리 낭비가 생길 수 있다.
  • 프로퍼티와 메소드를 미리 만들어놓지 않고 필요 시 추가한 후 모든 객체에서 공유함으로써 메모리 낭비 줄일 수 있다.

프로토타입 예제 - object4-prototype.html

        <script type="text/javascript">
            function People() {
                this.age = 20;
            }
            var person1 = new People();
            var person2 = new People();
            var person3 = new People();

            // person1 객체에 메소드 추가
            person1.setAge = function() {
                this.age += 10;
            }

            // 프로토타입 프로퍼티에 setAge() 메소드 정의
            People.prototype.setAge = function() { // People의 모든 객체에 사용하는 것.
                this.age += 1;
            }

            // 프로토타입 프로퍼티에 getAge() 메소드 정의
            People.prototype.getAge = function() { // People의 모든 객체에 사용하는 것.
                return this.age;
            }

            person1.setAge(); // person1.setAge() 호출됨
            person2.setAge(); // People.prototype.setAge() 호출
            person3.setAge(); // People.prototype.setAge() 호출

            // console.log(person1.age); // 30
            // console.log(person2.age); // 21
            // console.log(person3.age); // 21

            console.log(person1.getAge()); // 30
            console.log(person2.getAge()); // 21
            console.log(person3.getAge()); // 21
        </script>