[JavaScript] 객체(Object)

객체(Object)

---

생성자를 통해 객체를 만들 수 있으며, 객체를 직관적으로 선언하여 사용할 수 있다.

Key, Value로 구성된 속성(프로퍼티)들의 집합이다.

자바스크립트의 함수를 프로퍼티에 사용할 수 있으며, 객체 내부에 선언된 함수를 메서드라 한다.

자바스크립트의 객체는 프로퍼티와 그 객체에 관련된 동작(메서드)를 모두 포함할 수 있다.

프로토타입 객체의 프로퍼티와 메서드를 상속받는 것이 가능하다.

var obj2 = {
	prop1: "this",        // 프로퍼티
	prop2: "is",          // 프로퍼티
	prop3: "property",    // 프로퍼티
	hello: function () {  // 행동을 정의하는 메서드
    	console.log("메서드");
	}
}
obj2.hello();
>> 메서드

---

 

 

 

 

객체 생성

---

리터럴 표기

var obj2 = {
    prop1: "this"
    prop2: "is",
    prop3: "property",
    hello: function () {
      console.log("메서드");
    }
}

 

 

Object를 이용

 

해당 객체에 프로퍼티가 존재하지 않아도 바로 추가할 수 있다.

let cat = new Object();
    cat.hungryYn = 'Y';
    cat.howl = function(){
        console.log("배고파");
    }
    console.log(cat.hungryYn); // Y
    beomsu.howl();             // 배고파
}

 

 

생성자 이용

function 키워드를 이용해 선언하는 객체 타입이며 일반 생성자 함수의 경우 파라미터(프로퍼티)를 미리 지정

생성자 함수 내 선언된 일반 변수들은 외부참조 불가능 ( = 자바 메서드 내에 선언된 변수)

function cat(name, type) {
        this.name = name;
        this.type = type;
        this.act = function(){
            console.log(name+"가 열심히 밥을 먹고있음");
        }
    }
    let dog = new cat("구찌", "포메");
    let kitty = new cat("키티", "러시안블루");
    
    console.log(dog.name);    // 구찌
    console.log(kitty.type);  // 러시안블루
    dog.act();                // 구찌가 열심히 밥을 먹고있음
}

---

 

 

 

 

프로토타입

---

자바스크립트는 프로토타입 기반(prototype-based)의 객체 지향 언어이다.

프로토타입 기반의 객체 지향 언어이기 때문에 상속의 개념이 클래스 기반의 객체 지향 언어와는 다른점이 있다.

자바스크립트에서는 현재 존재하고 있는 객체를 프로토타입으로 사용하여, 해당 객체를 복제하여 재사용하는 것을 상속이라고 한다.

 

자바스크립트의 모든 객체는 프로토타입(prototype)이라는 객체를 가지고 있다.

모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받는다.

자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체를 프로토타입(prototype)이라고 한다.

var obj = new Object(); // Object.prototype
var arr = new Array();  // Array.prototype
var date = new Date();  // Date.prototype

 

Object.prototype 객체는 어떠한 프로토타입도 가지지 않으며, 아무런 프로퍼티도 상속받지 않는다.

자바스크립트에 내장된 모든 생성자나 사용자 정의 생성자는 Object.prototype을 가진다.

var date = new Date(); // Date.prototype과 Object.prototype을 가진다

 

 

프로토타입 생성

function Dog(color, name, age) {
    this.color = color;       
    this.name = name;           
    this.age = age;            
}
var myDog = new Dog("흰색", "구찌", 5); // 이 객체는 Dog라는 프로토타입을 가짐.

 

MyDog 객체에 프로퍼티 및 메서드 추가

새롭게 추가된 family프로퍼티와 breed() 메소드는 오직 myDog 인스턴스에만 추가됐다.

이미 생성된 다른 Dog 객체나 차후에 생성되는 어떠한 다른 Dog 객체에도 추가되지 않는다.

(...생략...)
myDog.family = "포메라니안";       // 품종에 관한 프로퍼티 추가
myDog.breed = function() {        // 털색을 포함한 품종을 반환해 주는 메서드 추가
    return this.color + " " + this.family;
}
document.write("우리 집 강아지는 " + myDog.breed() + "입니다.");

 

프로토타입에 프로퍼티 및 메소드 추가

생성자 함수에 직접 추가해야만 이후에 생성되는 모든 다른 객체에도 적용할 수 있다.

// 현재 존재하고 있는 Dog 프로토타입에 family 프로퍼티를 추가함.
Dog.prototype.family = "시베리안 허스키";
// 현재 존재하고 있는 Dog 프로토타입에 breed 메소드를 추가함.
Dog.prototype.breed = function() {
    return this.color + " " + this.family;
};

var myDog = new Dog("흰색", "구찌", 5);
var hisDog = new Dog("갈색", "콩이", 3);
 
document.write("우리집 강아지의 품종은 " + myDog.breed() + "이다.");
document.write("친구집 강아지의 품종은 " + hisDog.breed() +  이다.");
document.write("우리집 강아지는 " + myDog.family + "이고, 친구집 강아지도 " + hisDog.family + "이다.");

 

프로퍼티 삭제

// delete 객체이름.프로퍼티이름
delete myDog.age // age 프로퍼티 삭제

직접 생성한 프로토타입은 위와 같이 새로운 프로퍼티나 메소드를 마음껏 추가하거나 삭제할 수 있다.
물론 자바스크립트 표준 객체의 프로토타입도 임의로 수정할 수 있으나, 심각한 오류가 발생할 가능성이 있다.
따라서 자바스크립트 표준 객체의 프로토타입은 수정해서는 안된다.

---

 

 

 

 

 

객체 프로퍼티 루프(순회)

---

프로퍼티 루프 수행방법

• for-in :객체의 모든 열거할 수 있는 프로퍼티 루핑
• Object.keys() : 해당 객체가 가진 고유 프로퍼티 중에서 열거할 수 있는 프로퍼티 이름을 배열에 담아 반환
• Object.getOwnPropertNames() : 해당 객체가 가진 고유 프로퍼티 이름을 배열에 담아 반환

 var obj2 = {
    prop1: "this",
    prop2: "is",
    prop3: "property",
    hello: function () {
        console.log("메서드");
    }

    for(var i in obj2){
   	 console.log(i + ":" + obj2[i]);
    }
}

>> prop1:this
>> prop2:is
>> prop3:property
>> hello:function() {
	 console.log("메서드");
   }

function Dog(color, name, age) {
    this.color = color;
    this.name = name;
    this.age = age;
}

// color 프로퍼티의 enumerable 속성을 false로 설정함.
Object.defineProperty(myDog, 'color', {enumerable : false} );
 
// 객체가 가진 고유 프로퍼티 중에서 열거할 수 있는 프로퍼티 이름을 배열에 담아 반환함.
document.write(Object.keys(myDog) + "<br>");       // [name, age]
 
// 객체가 가진 모든 고유 프로퍼티의 이름을 배열에 담아 반환함.
document.write(Object.getOwnPropertyNames(myDog)); // [color, name, age]

 

 

 

참조

http://www.tcpschool.com/javascript/js_object_concept