본문 바로가기

Programming Language/JS & JQuery

Javascript 객체 개요

자바스크립트는 자바처럼 객체 선언이 가능하다.

아래와 같은 방식의 객체생성이 여러 생성방법 중 한가지이다.


1
2
3
4
5
6
7
<script>
    var product = {
        name : 'mango',
        type : 'sweet',
        from : 'India'
    };
</script>
cs


자바스크립트 배열과 상당히 유사한데 객체의 atttribute에 접근하는것도 비슷하게 접근가능하다. 혹은 java처럼 접근도 가능하다


1
2
3
4
5
6
7
var name = product['name'];
var type = product['type'];
var name = product['from'];
//or
var name = product.name;
var type = product.type;
var from = product.from;
cs


attrubute와 method가 포함된 객체 생성방법은 아래와 같다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
    var student = {};
    //declare attribute
    student.name = 'wonyoung';
    student.hobby = 'lego';
    //declare method
    student.toString = function(){
        var output = '';
        for (var key in this){
            //do not print toString method
            if(key!='toString'){
                output += key + '\t' + this[key] +'\n';
            }
        }
        return output;
    }
 
 
    alert(student.toString());
</script>
cs


생성자를 이용한 객체 생성


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
    function Student(name, hobby){
        //declare attribute
        this.이름 = name;
        this.취미 = hobby;
 
        //declare method
        this.toString = function(){
            return this.이름 + '\t' + this.취미 + '\n';
        }
    }
 
    var students = [];
    students.push(new Student('wonyoung','lego');
    students.push(new Student('somin','origami');
    alert(students[0].toString());
</script>
cs


프로토타입(prototype)을 활용한 객체 생성 - 메서드를 하나만 생성해도 모든 객체가 해당 메서드 사용이 가능

(기존의 생성자를 이용하여 객체를 만들면 메모리를 쓸데없이 많이 잡아먹는다고 한다 - from 모던 웹을 위한 Javascript jQuery 입문)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
    function Student(name, hobby){
        //declare attribute
        this.이름 = name;
        this.취미 = hobby;
    }
    //declare method with prototype
    Student.prototype.toString = function(){
            return this.이름 + '\t' + this.취미 + '\n';
        };
    
    var students = [];
    students.push(new Student('wonyoung','lego');
    students.push(new Student('somin','origami');
    alert(students[0].toString());
</script>
cs



End of Document


반응형