JavaScript

객체

내장 객체
브라우저 객체
문서 객체(DOM)
사용자 정의 객체

사용자 정의 객체

사용자가 직접 필요한 객체를 생성해서 사용하는 것

사용자 정의 객체 생성 방법

리터럴 이용
생성자 함수 (function()) 이용
new Object() 이용 (ES6에 추가)
class 정의하고 객체 생성 (ES6에 추가)

1. 리터럴 이용

객체 선언: 멤버 추가
- property(속성): 속성값
- 멤버 메소드 추가
객체 사용(호출)
- 객체.속성;
- 객체.메소드();
- person.getName(); // 객체의 멤버 메소드 사용(호출)
형식

var 객체 = {
    // 변수: 프로퍼티(속성)
    속성명1: 값1;
    속성명2 : 값2;

    // 멤버 메소드
    메소드명 : function() {
        수행 코드;
    }
};

// 객체 선언
var person = {
    name: "홍길동",
    age : 20,
    getName : function() {
        return this.name;
    }
};

리터럴 이용 예제1

object1-literal.html

<script type="text/javascript">
    // 객체 선언
    var person = {
        name: "홍길동",
        age : 20,
        getName : function() {
            return this.name;
        }
    };
    // 객체 사용
    console.log(person.name);
    console.log(person.age);
    console.log(person.getName());

    // 프로퍼티 존재 여부 확인
    console.log("name" in person);

    // 객체 생성2: 프로퍼티만 존재
    let car = {
        no:'11가1111',
        name: '소나타',
        maker:'현대',
        cc:2000,
        year:2021
    };

    // 전체 프로퍼티 값 출력
    for(let i in car){
        console.log(car[i]);
    }

    // 객체 생성3
    var circle = {
        center: {x:1.0, y:2.0},
        radius:2.5,
        getArea: function() {
            return this.radius * this.radius * 3.14;
        }
    };

    console.log(circle.center.x, circle.center.y);
    console.log(circle.getArea());
</script>

2. 생성자 함수 (function()) 이용

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

function 함수명() {
    // 프로퍼티 추가
    this.프로퍼티1 = 값1;
    this.프로퍼티2 = 값2;

    // 메서드 추가
    this.메서드 = function() {
        수행 코드;
    }
};

function People() {
    // 멤버변수 : 프로퍼티(속성)
    this.name = "홍길동";
    this.age = 20;

    // 메서드
    this.getName = function() {
        return this.name;
    }
}

// new 연산자 사용해서 객체(인스턴스) 생성
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());

    // 생성자 함수 변경 없이 function() { }외부에서 프로퍼티(속성) 추가 가능
    person.address = "서울";

    // 메소드 추가 가능
    person.getAddress = function() {
        return this.address;
    }

    // 새로 추가된 메소드 호출
    console.log(person.getAddress());
</script>

object3-function.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <script type="text/javascript"> 
        function ListTag() {
            this.ulTag = document.createElement("ul");
            this.ulTag.type = "square";

            for(var i = 0; i<=5; i++) {
                var listItem = document.createElement("li");
                var itemInput = prompt("꽃" + i + "입력");
                listItem.innerHTML = itemInput;

                this.ulTag.appendChild(listItem);
            }

            this.getListItem = function() {
                return this.ulTag;
            }
        }

        window.onload = function() {
            var list = new ListTag(); // 객체 생성

            var box = document.getElementById("box");
            box.appendChild(list.getListItem());
        }
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>

프로토타입(prototype)

객체를 만드는 원형
함수도 객체이고, 객체인 함수가 기본으로 갖고 있는 프로퍼티
함수의 객체가 생성될 때 모든 객체가 공유하는 공간
자바의 static 개념

prototype에 멤버 정의

멤버를 함수 외부에 선언
여러 객체가 공유하게 여는 방법

property 사용 시 이점

생성자 함수 이용해서 객체 생성할 때
- 프로퍼티와 메서드는 객체마다 생성
- 사용하지 않을 경우에도 생성되기 때문에 메모리 낭비
프로퍼티와 메서드를 미리 만들어 놓지 않고 필요 시 추가한 후 모든 객체에서 공유함으로써 메모리 낭비를 줄일 수 있다.

프로토타입 예제

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;
    }

    // prototype property에 setAge() 메서드 정의
    People.prototype.setAge = function() {
        this.age += 1;
    }

    // prototype property에 getAge() 메서드 정의
    People.prototype.getAge = function() {
        return this.age;
    }

    person1.setAge();
    person2.setAge();
    person3.setAge();

    /*  console.log(person1.age);
        console.log(person2.age);
        console.log(person3.age); */

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

3. new Object() 이용 (ES6 추가)

new Object()로 빈 객체 생성한 후
프로퍼티, 멤버 메서드 추가
객체.메서드() // 객체의 멤버 메서드 사용
형식

var 객체 = new Object(); // 빈 객체 생성 (new 생략 가능)
// 프로퍼티 추가
객체.프로퍼티 값;

// 멤버 메서드 추가
객체.메서드명 = function() {
    수행 코드;
}

// 객체의 멤버 메서드 호출 (사용)
객체.메서드();

4. Class 정의하고 객체 생성 (ES6에 추가)

class 키워드 사용
생성자 / Getters / Setters 가능
- getters: 함수명 앞에 get 붙임 (프로퍼티 사용 시 앞에 _ 붙여서 사용!!)
- Setters: 메서드 앞에 set 붙임 (프로퍼티 사용 시 앞에 _ 붙여서 사용!!))
getter / setter 호출 시 괄호( ) 붙이지 않음
호이스팅 불가
형식

class 클래스명 {
    생성자() { }
    getters
    setters
    메서드();
}
// 객체 생성
let 객체 = new 클래스();
객체.메서드();

object6-class.html

<script type="text/javascript"> 
    class Person{
        // 생성자
        constructor(name, age){
            // 프로퍼티 정의
            this.name = name;
            this.age = age;
        }
        // getter : 프로퍼티 반환
        get name() {
            return this._name;
        }

        get age() {
            return this._age;
        }

        // setter: 프로퍼티 값 설정
        set name(name) {
            this._name = name;
        }

        set age(age) {
            this._age = age;
        }

        // 필요한 메서드 추가
        toString() {
            return this.name + "은 " + this.age + "살 입니다.";
        }
    }

    // 객체 생성
    let person1 = new Person("홍길동", 25);
    let person2 = new Person("이몽룡", 30);

    // getter 호출
    console.log('성명: ' + person1.name + ', 나이 : ' + person1.age);
    console.log('성명: ' + person2.name + ', 나이 : ' + person2.age);

    // toString() 메서드 호출
    console.log(person1.toString());
    console.log(person2.toString());

    person1.age = 27;
    console.log(person1.toString());

    person2.name = "성춘향";
    person2.age = 20;
    console.log(person2.toString());
</script>

저작자표시 비영리 동일조건

'Front > JavaScript' 카테고리의 다른 글

JavaScript - JSON (0)	2021.12.13
JavaScript - 사용자 정의객체 연습문제 (0)	2021.12.13
JavaScript - 폼 유효성 확인 (0)	2021.12.10
JavaScript - 이벤트 핸들러와 이벤트 처리 (0)	2021.12.10
JavaScript - 문서 객체 모델(DOM) (0)	2021.12.10

여행하는 개발자

JavaScript - 사용자 정의 객체

JavaScript

객체

사용자 정의 객체

사용자 정의 객체 생성 방법

1. 리터럴 이용

리터럴 이용 예제1

object1-literal.html

2. 생성자 함수 (function()) 이용

object2-function.html

object3-function.html

프로토타입(prototype)

prototype에 멤버 정의

property 사용 시 이점

프로토타입 예제

object4-prototype.html

3. new Object() 이용 (ES6 추가)

4. Class 정의하고 객체 생성 (ES6에 추가)

object6-class.html

'Front > JavaScript' 카테고리의 다른 글

티스토리툴바

JavaScript - 사용자 정의 객체

JavaScript

객체

사용자 정의 객체

사용자 정의 객체 생성 방법

1. 리터럴 이용

리터럴 이용 예제1

object1-literal.html

2. 생성자 함수 (function()) 이용

object2-function.html

object3-function.html

프로토타입(prototype)

prototype에 멤버 정의

property 사용 시 이점

프로토타입 예제

object4-prototype.html

3. new Object() 이용 (ES6 추가)

4. Class 정의하고 객체 생성 (ES6에 추가)

object6-class.html

'Front > JavaScript' 카테고리의 다른 글

관련글

티스토리툴바