[JavaScript] 자바스크립트의 객체(Object)란?

 객체 
  Object  

객체는 기능(함수)과 속성(프로퍼티)으로 이루어져 있다. 즉, 함수와 변수를 섞어 놓은 것을 말한다.

예를 들어 앞서 배웠던 html 태그들도 하나의 객체라고 볼 수 있다.

객체는 객체마다 사용할 수 있는 기능과 속성이 정해져 있다.

예시) a태그
기능	링크연결
속성	href, tille, target, inline 등

 

inline 속성을 가진 태그에게 넓이값를 지정하면 안되는 것처럼 해당 객체마다 올바른 기능과 속성을 적용해야한다.

자바스크립트는 유연한 프로그램이기 때문에 잘못된 속성과 값을 입력하면 오류 표시가 뜨는 것이 아니라 자동으로 값을 입력하여 출력한다. 이러한 문서는 오류를 찾기 힘들다는 단점이 있다.

만약 a태그에게 넓이값을 입력하면 값이 자동으로 undifined 로 입력되는 것이 예시이다. 

 

자바스크립트에서 객체의 속성이나 메서드를 사용하고자 할 때에는 아래 문법을 사용한다.

기본형
1	객체.메서드();	객체의 함수(메서드)를 실행할 때 사용한다.
2	객체.속성명;	객체가 가지고 있는 속성의 속성값을 반환한다.
3	객체.속성명 = 속성값;	객체의 속성값을 변환한다.

---

 객체의 종류 

자바스크립트의 객체는 크게 '내장 객체(Built-in Object)',  '브라우저 객체 모델(Browser Object Model)',  '문서 객체 모델(Document Object Model)'로 나눠진다.

종류
내장객체 (Built-in Object)	장 객체로는 문자객체(String), 날짜(Date), 배열(Array), 수학(Math)객체가 있다.
브라우저 객체 모델 (Browser Object Model)	브라우저 객체 모델은 계층 구조로 내장 되어있는 객체를 말한다. 브라우저 객체로는 window, screen(해상도), location(브라우저에 내장된 주소창), history(쿠키 등), navigator(운영체제) 객체 등이 있다. screen부터 navigator 까지 쓰지 않은 document 까지 window의 자식객체들이다.
문서 객체 모델 (Document Object Model)	문서 객체 모델은 HTML 문서 구조를 말한다. HTML 문서의 기본구조는 HTML 태그가 최상위 객체이며, 하위 객체로는 head, body가 있다. 하지만, 자바스크립트의 문서 객체 모델은 익스플로러(IE) 8 버전 이하에서는 문서 호환성이 떨어지기 때문에 사용하기 힘들다는 단점이 있다. 이러한 점을 극복하기 위해 나온 언어가 바로 '제이쿼리'이다.

---

1. 내장 객체(Built-in Object)

내장 객체로는 문자객체(String), 날짜(Date), 배열(Array), 수학(Math)객체가 있다.

내장 객체의 경우 자바스크립트 엔진에 내장되어 있어 필요한 경우 생성해서 사용할 수 있다.

내장 객체는 사용시에는 첫 글자를 대문자로 적어주여한다.

 

객체를 생성할 때에는 new 라는 키워드와 함께 생성함수를 사용한다. 

생성함수에는 보통 Object를 많이 쓴다.

// 기본형
        var 참조변수(인스턴스) = new 생성함수();

** 참조변수란? (클릭)
** 생성자 함수란? (클릭)

tv라는 변수를 생성하고 new Object()로 객체로 지정한다.
객체가 된 참조변수 tv는 아직 아무런 속성을 가지고 있지 않기 때문에 속성과 속성값을 입력해 주어야한다.
아래 예시에서는 색상과 가격을 입력하여 정보 값으로 묶어주었다.
function() 메서드로 화면에 입력할 값을 info에 담았기 때문에 마지막에 '객체.메서드()' 공식을 입력했을 때 info안의 내용이 호출되었다.

      // tv 라는 이름의 새로운 객체 생성
      var tv = new Object();

      tv.color = "blue"; // tv 객체에 색상이라는 속성(프로퍼티)과 값을 부여
      tv.price = 300000; // tv 객체에 가격이라는 속성(프로퍼티)과 값을 부여

      // tv 객체에 info라는 기능(메서드)추가
      // tv 기능 : 화면에 색상과 가격을 출력.
      tv.info = function () {
        // this 키워드는 이 상황에서는 '객체 tv'를 말한다.
        document.write("tv 색상 : " + this.color + "<br/>");
        document.write("tv 가격 : " + this.price + "<br/>");
      };

      // 함수를 실행시키는 것을 함수를 호출한다고 한다.
      document.write("<h3>tv 객체 메서드 호출</h3>");
      tv.info();

내장객체의 자세한 설명(클릭)

[Java Script] 내장 객체(Built-in Object)

---