[JavaScript] JS 객체생성과 프로토타입(prototype), DOM과 BOM

[자바스크립트 객체]

• 문자열(String), 숫자(Number), 배열(Array), 함수(Function) 등 

1. 내장객체(built-id)

Number, String, Date, Array, Boolean, Math, RegExp, JSON, BOM, DOM

BOM 윈도우 히스토리

2. 사용자 정의 객체

1) Object 인스턴스 생성 후 정의

var person = new Object();
person.name = "홍길동";
person.age = 30;

 

2) 생성자 함수

function Person(name, age) {
	this.name = name;
	this.age = age;
	this.setName = function(newName) {
		this.name = newName;
	}
}

• 자바에서는 생성자를 함수라고 하지 않지만 자바스크립트에서는 function키워드를 사용해 생성자 함수라고 함

 

3)리터럴 {JSON 형태}

 var person = { name: "Sunsin", age: 35};

 

4) ES6 class (권장)

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }


class Child extends Person{
  constructor(name, age, job) {
    super(name, age); // extends시 필수 
    this.job = job;
  }

}

• 자바스크립트에서 extends를 쓴 자식 클래스(derived class)는 부모 생성자를 먼저 실행해야 자기 자신(this)이 준비되어 사용 가능

 

[ 프로토타입 Prototype ]

1. 프로토 타입

• 자바스크립트에서 객체가 다른 객체의 속성과 메서드를 상속받기 위해 사용하는 구조
• 자바스크립트는 클래스 기반이 아니라 프로토타입 기반 객체지향 언어이기 때문에 객체들이 프로토타입 체인(prototype chain)을 통해 기능을 공유함.

1) [[Prototype]] 

• 모든 객체는 [[Prototype]]이라는 내부 슬롯(자바스크립트 엔진의 내부 로직)을 갖으며, 상속을 구현하는 프로토타입 객체를 가리킴
•  [[Prototype]] 내부 슬롯에는 직접 접근이 불가능하고 __proto__프로퍼티를 통해서만 접근 가능

 

2) 프로토타입을 사용하는 이유

• 모든 객체가 하나의 메서드를 공유하기 때문에 메모리 효율성이 높음

 

2. 프로토 타입 체인

• 자바스크립트에서 객체의 속성이나 메서드를 찾을 때 프로토타입을 따라 올라가며 검색하는 구조

// 객체에서 어떤 값을 찾을 때
객체 자신
 ↓
Prototype
 ↓
상위 Prototype
 ↓
Object.prototype
 ↓
null

 

[ DOM과 BOM ]

• 웹 브라우저에서 자바스크립트는 브라우저 환경을 객체 형태로 제공받음
• DOM은 HTML 문서를 객체 구조로 표현한 모델
• BOM은 브라우저 창 자체를 객체로 표현한 모델

구분	DOM	BOM
대상	HTML 문서	브라우저
대표 객체	document	window
주요 기능	요소 선택, 수정, 추가	브라우저 기능 제어

 

1. DOM (Document Object Model)

• DOM은 HTML 문서를 객체 트리 형태로 표현한 것
• HTML 태그 하나하나가 노드(Node) 또는 객체(Object) 로 변환
• 이 구조 덕분에 자바스크립트는 HTML 요소를 선택, 수정, 삭제, 추가 가능

1) Node 객체

element.appendChild(newNode);   // 자식 노드 추가
element.removeChild(childNode); // 자식 노드 제거
element.textContent = "텍스트"; // 텍스트 설정

 

2) Element 객체

element.getAttribute("src");
element.setAttribute("src", "img.png");
element.removeAttribute("class");

 

3) 스타일제어

// style 속성 직접 변경
element.style.backgroundColor = "blue";
element.style.borderRadius = "50%";

// class 속성으로 변경 (권장)
element.setAttribute("class", "active");
element.removeAttribute("class");

 

4) 요소 동적 추가

const li = document.createElement("li");
li.textContent = "새 항목";
document.querySelector("ul").appendChild(li);

 

2. BOM (Browser Object Model)

• BOM은 브라우저 창 자체를 제어하기 위한 객체 모델

1) window 객체

• 브라우저 창 자체를 나타내는 객체

alert("메시지");       // 알림창
confirm("확인?");      // 확인창
prompt("입력하세요");  // 입력창

 

2) location객체

• 현재 URL 정보 및 이동

location.href = "https://google.com"; // 페이지 이동
location.reload();                    // 새로고침
console.log(location.href);           // 현재 URL

 

 

3) history 객체

• 브라우저 방문 기록 제어

history.back();     // 뒤로가기
history.forward();  // 앞으로가기
history.go(-1);     // 뒤로 한 페이지

 

4) navigation 객체 

• 브라우저 정보

console.log(navigator.userAgent);
console.log(navigator.language);

 

5) screen 객체

• 사용자 화면 정보

console.log(screen.width);
console.log(screen.height);