자바스크립트 객체 - Do It 자바스크립트 기본편
객체(Object)
자바스크립트에서 데이터를 저장하고 처리하는 기본 단위. (자바스크립트는 객체 기반 언어)
하나의 변수에 여러 데이터를 담기 위해 사용하는 데이터타입.
자바스크립트 프로그램에서 인식할 수 있는 모든 대상을 가리킴. (ex- 웹 브라우저나 웹 문서와 관련된 것들)
객체의 종류 in Javascript
-
내장 객체(Built-in Object) : Number, Boolean, Array, Math, Date객체 등
-
문서 객체 모델(DOM) : 객체를 사용해 웹 문서를 관리하는 방식. 웹 문서뿐만 아니라 웹 문서에 포함된 모든 요소들(이미지, 링크, 텍스트필드 등)도 각각 별도의 객체로 미리 만들어 놓고 관리. ex) Document객체, Image객체 등
-
브라우저 객체 모델(BOM) : 웹 브라우저 정보(주소 표시줄, 창 크기 등)을 객체로 다루는 것.
ex) Navigator객체(사용 중인 브라우저 종류, 버전 정보), History객체(브라우저에서 방문한 기록), Location객체(주소 표시줄 정보), Screen객체(화면 크기 정보) 등
-
사용자 정의 객체
객체의 속성(Property)과 메서드(Method)
속성 : 값을 담고 있는 정보. '객체.속성이름'으로 속성에 담긴 값을 불러올 수 있다.
메서드 : 객체가 어떻게 동작할지를 선언해 놓은 함수. '객체.메서드이름()'으로 메서드를 실행할 수 있다. *Window 객체의 메서드는 'window.'을 생략하고 메서드 이름만으로 실행가능
객체의 프로토타입과 인스턴스
프로토타입(Prototype): 기본 틀이 되는 객체
인스턴스(Instance) : 프로토타입을 사용해 만들어낸 객체
ex) Image 객체 : 모든 웹 이미지가 공통으로 가지는 속성과 기능을 모아놓은 것.
→ 웹 이미지를 만들기 위한 기본 틀, 프로토타입
→ Image 객체를 사용해 만든 객체에 원하는 웹 이미지를 담은 것, 인스턴스
객체의 인스턴스 만들기
var now = new Date();2019
now.toLocaleString();Date객체의 인스턴스를 만들어서 변수 now에 담는다. → 변수 now를 통해 Date 객체에 정의된 속성과 함수를 사용할 수 있다.
developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_objects
ㄴ자바스크립트 내장 객체 정보
*Math객체는 다른 객체와 달리 인스턴스를 생성하지 않고 사용할 수 있음.
(Math객체의 모든 속성과 메서드는 정적.)
사용자 정의 객체 만들기
1) 객체 리터럴 표기법
리터럴 : 프로그래밍에서 자료를 표기하는 방식. 변수를 선언하면서 동시에 값을 지정해 주는 표기 방식을 말함.
객체 리터럴 표기법 : 객체를 선언하면서 동시에 값을 지정하는 것. 프로토타입(객체 틀)을 만들지 않고 개별적으로 객체를 선언하고 사용하는 방법.(일회용 객체 만들기)
공통으로 들어가는 속성과 메서드가 별로 없어서 각 객체를 따로 정의하는 것이 편할 때 사용.
var book = {
title: "자바스크립트",
author: "고쌤",
price: 15000,
info: function() {
alert(this.title + "책의 가격은 " + this.price +"원 입니다.");
}
};
book.title;
book.info();
book.field = "IT"; //객체 생성 후 새로운 속성 추가
2) 생성자 함수
생성자 함수(Constructor) : 객체를 만들어 내는 함수.
function Book(author, pages, price, title) {
this.author = author;
this.pages = pages;
this.price = price;
this.title = title;
}
//생성자 함수 선언해 객체 만들기
var jsBook = new Book("문선경", 500, 15000, "자바스크립트");
//생성자 함수를 실행해 객체의 인스턴스 만들어 jsBook 변수에 담기