[JavaScript] 자바스크립트 객체(object) (2) : 상속, 프로토타입, this 키워드, 삭제, 순회, 비교

 

---

상속 (inheritance)

- 상속 : 새로운 클래스에서 기존 클래스의 모든 프로퍼티와 메소드를 사용할 수 있는 것

- 클래스 기반의 객체 지향 언어인 C++과 달리 자바스크립트는 프로토타입 기반의 객체 지향 언어

- JS에서는 현재 존재하는 객체를 프로토타입으로 사용하여, 해당 객체를 복제하여 재사용하는 것을 상속이라고 한다

- JS의 모든 객체는 최소 하나 이상의 다른 객체로부터 상속을 받는다

 

 

 

 

 

---

프로토타입 (prototype)

- JS의 모든 객체는 프로토타입이라는 객체를 가진다

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

- 프로토타입 : 상속되는 정보를 제공하는 객체

 

 

 

프로토타입의 생성

- 가장 기본적인 방법은 객체 생성자 함수를 작성하는것

- 생성자 함수를 작성하고 new 연산자를 사용해 객체를 생성하면, 같은 프로토타입을 갖는 객체를 생성 가능

function Dog(color, name, age) { // 개에 관한 생성자 함수를 작성함.
    this.color = color;   
    this.name = name;        
    this.age = age; 
}
var myDog = new Dog("흰색", "마루", 1); // 이 객체는 Dog라는 프로토타입을 가짐.

 

 

 

프로퍼티 및 메소드 추가

> 객체에 프로퍼티 및 메소드 추가

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

var myDog = new Dog("흰색", "마루", 1);

myDog.family = "시베리안 허스키"; // 품종에 관한 프로퍼티를 추가함.
myDog.breed = function() {        // 털색을 포함한 품종을 반환해 주는 메소드를 추가함.
    return this.color + " " + this.family;
}

document.write("우리 집 강아지는 " + myDog.breed() + "입니다.");

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

 

 

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

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

function Dog(color, name, age) {
    this.color = color;
    this.name = name;
    this.age = age;
    this.family = "시베리안 허스키"; // 프로토타입에 프로퍼티를 추가할 때에는 기본값을 가지게 할 수 있음.
    this.breed = function() {
        return this.color + " " + this.family;
    };
}
var myDog = new Dog("흰색", "마루", 1);
var hisDog = new Dog("갈색", "콩이", 3);
document.write("우리 집 강아지는 " + myDog.family + "이고, 친구네 집 강아지도 " + hisDog.family + "입니다.");

 

 

> prototype 프로퍼티

- 현재 존재하고 있는 프로토타입에 새로운 프로퍼티나 메소드를 손쉽게 추가할 수 있다

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

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

var myDog = new Dog("흰색", "마루", 1);
var hisDog = new Dog("갈색", "콩이", 3);
 
document.write("우리 집 강아지는 " + myDog.family + "이고, 친구네 집 강아지도 " + hisDog.family + "입니다.");
document.write("우리 집 강아지의 품종은 " + myDog.breed() + "입니다.<br>");
document.write("친구네 집 강아지의 품종은 " + hisDog.breed() + "입니다.");

- 자바스크립트 표준 객체의 프로토타입도 수정이 가능하지만, 심각한 오류를 발생시킬 수 있으므로 권장하지 않는다

 

 

 

 

 

---

this 키워드

- 해당 키워드가 사용된 코드 영역을 포함하고 있는 객체를 가리킨다

- this는 변수가 아닌 키워드이므로, 가리키는 값을 바꿀 수 없다

 

 

 

 

 

---

객체 프로퍼티의 삭제

delete 객체이름.프로퍼티이름;

- delete 키워드를 사용하면 프로퍼티의 값뿐 아니라 프로퍼티 그 자체도 삭제된다

- 직접 생성한 프로토타입은 새로운 프로퍼티나 메소드를 마음껏 추가하거나 삭제할 수 있다

 

 

 

 

 

---

객체 프로퍼티의 순회

 

> for / in 문을 사용

 

> Object.keys()

: 해당 객체가 가진 고유 프로퍼티 중에서 열거할 수 있는 프로퍼티의 이름을 배열에 담아 반환

 

> Object.getOwnPropertyNames()

: 해당 객체가 가진 모든 고유 프로퍼티의 이름을 배열아 담아 반환

 

function Dog(color, name, age) {
    this.color = color;
    this.name = name;
    this.age = age;
}
var myDog = new Dog("흰색", "마루", 1);
 
// 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

 

 

 

 

 

---

객체간의 비교

- 별개의 두 객체에서 프로퍼티의 값이 모두 같아도 절대로 같다고 말할 수 없다

function Dog(color, name, age) {
    this.color = color;
    this.name = name;
    this.age = age;
}
var myDog = new Dog("흰색", "마루", 1);
var hisDog = new Dog("흰색", "마루", 1);      // 모든 프로퍼티의 값이 모두 같은 객체를 생성함.
document.write((myDog == hisDog) + "<br>");   // false
document.write((myDog === hisDog) + "<br>");  // false
 
var herDog = hisDog;                          // hisDog 객체를 변수 herDog에 대입함.
document.write((hisDog == herDog) + "<br>");  // true
document.write((hisDog === herDog) + "<br>"); // true

- herDog = hisDog 의 경우, 객체 레퍼런스를 대입하여 같은 객체를 가리키기 때문에 동등/일치 연산자로 비교하면 모두 true를 반환한다

 

 

 

 

 

 

 

 

[참고자료] http://tcpschool.com/javascript/intro