자바스크립트 Object
내장 객체는 모든 객체의 루트 객체입니다. Object
객체는 객체 상수 및 생성자 함수처럼 Object()
생성자로 객체를 만들 수 있으며 new
는 생략할 수 있습니다.
자바스크립트 내장 객체의 종류와 Object 객체
자바스크립트에서는 객체 리터럴이나 생성자 함수를 이용한 사용자 정의 객체 이외에도, 이미 정의된 내장 생성자 함수를 사용해서 내장 객체를 만들 수 있습니다.
Object
객체, Date
객체, Number
객체, String
객체, Math
객체 그리고 Array
객체입니다. 이 중에서 Object
객체를 살펴보겠습니다.
Object
객체 모든 객체의 최상위 객체입니다.
Object() 생성자로 빈객체 생성
Object()
내장 함수를 생성자로 사용하면, Object
객체를 만들 수 있습니다.
var fruit = new Object();
Object()
생성자 앞에는 new
를 생략할 수 있습니다.
var fruit = Object();
프로퍼티 및 메서드 삽입
Object()
생성자로 만든 객체에 속성(property)나 메서드를 삽입할 경우 아래 처럼 객체명.멤버명 = "값";
형식을 사용합니다. 변수에 값을 대입하는 것 처럼 대입 연산자 =
를 사용합니다.
//빈객체 생성
var fruit = new Object();
//멤버 설정
fruit.name = "apple";
fruit.price = 1200;
fruit.upup = function()
{
this.price += 100;
}
//출력 확인
document.write(fruit.name + "<br>");
document.write(fruit.price + "<br>");
//함수 작동 확인
fruit.upup();
document.write(fruit.price + "<br>");
결과
apple
1200
1300
Object() 객체 생성의 목적
Object
객체는 객체를 만드는 목적보다는 모든 객체의 루트 객체라는 개념적 관점이 주요 사용 목적입니다.
HTML을 예로 들면, <body>
태그 내부에 존재하는 하위 태그들은 자동으로 <body>
태그의 속성을 상속받습니다. <body>
태그의 글씨색을 파랗게 변경시키면, 하위 태그도 같은 속성을 상속받습니다.
일반 생성자 함수로 객체를 만들 때 프로토타입(prototype)이라는 기능을 살펴봤습니다. 프로토타입은 생성자 함수로 만든 멤버중에서 메서드나 속성이 반복된다면 따로 추출을 해서 프로토타입으로 만들어서 메모리의 낭비를 줄여주는 기능을 함과 동시에 하나의 속성이 여러 객체에서 공유될 수 있습니다.
만약 Object
객체가 모든 객체의 최상위 객체 즉, HTML 태그의 상위 태그 처럼 하위 태그를 포함하는 개념이라면, Object
에서 만든 프로토타입도 하위 객체들에게 상속될 것입니다.
그래서 Object
에서 프로토타입으로 정의한 속성(property)이나 메서드는 하위에 속한 모든 객체에서 공유될 수 있습니다. 따라서 지금부터는 Object
최상위 객체에서 만든 프로토타입을 중심으로 살펴보겠습니다.
Object.prototype.메서드
Object
객체에서 프로토타입을 만들면, 다른 모든 객체에 자동으로 공유가 될 수 있습니다. 일반 객체라면, 프로토타입에 정의된 메서드나 속성은 자신과 같은 객체명에서만 공유되지만, Object
객체는 루트 객체이기 때문에 자동으로 하위에 모두 상속됩니다.
hello라는 메서드를 만들었고, Object
객체의 프로토타입으로 지정했습니다. 그런데 nihao라는 전혀 새로운 객체에서 hello 메서드를 호출할 수 있습니다.
//Object에서 프로퍼티 메서드 생성
Object.prototype.hello = function()
{
document.write("Hello!");
};
//새로운 nihao 객체에서 hello 메서드 호출
var nihao = {};
nihao.hello();
결과
Hello!
Object.prototype.내장메서드
프로토타입으로 메서드를 직접만드는 것 이외에도 Object
루트 객체에는 이미 내장된 속성이나 프로토타입이 있습니다.
객체명.constructor
▶Object.prototype.속성
에서 속성을 원하는 객체로 호출합니다. 해당 객체를 만든 생성자 함수를 조회합니다.객체명.toString()
▶Object.prototype.메서드
에서 메서드를 원하는 객체로 호출합니다. 객체를 문자 자료형으로 변경해서 표현합니다.
constructor
는 Object
프로토타입의 속성(property)입니다. 작성된 객체의 생성자 함수를 조회하는 기능입니다.
tesla라는 객체명의 생성자 함수의 멤버가 궁금하다면, 뒤에 .constructor
속성을 붙여주면 생성자 함수의 멤버가 조회됩니다.
//생성자 함수 선언
function Stock ( name, price )
{
this.name = name;
this.price = price;
}
//객체 생성
var tesla = new Stock ( "테슬라", 269872 );
//tesla 객체의 생성자 함수 조회
document.write ( tesla.constructor );
결과
function Stock ( name, price ) { this.name = name; this.price = price; }
toString()
는 Object
프로토타입의 메서드입니다. 작성된 객체의 자료형을 문자 형태로 잠시 변경합니다.
정수 100에 1을 더하면, 101이 됩니다.
var fruit =
{
name : "apple",
price : 100,
}
//변경전
document.write( fruit.price + 1 + "<br>");
//toString() 메서드 결합 후
document.write( fruit.price.toString() + 1 + "<br>" );
결과
101
1001
하지만 toString()
을 문자형으로 자료를 변경하면 1001이 됩니다.