[JavaScript] 03.객체 - 객체 생성/클래스

객체란?

자바 스크립트는 모든 것이 객체라는 말이 있을 정도로 자바 스크립트에서 객체는 중요한 개념. 

자바 스크립트는 클래스 기반이 아닌 프로토타입(prototype)을 기반으로 하는 객체 기반 언어

언제나 객체를 추가하거나 삭제하는 것이 가능하다. (자바에서는 불가능)

 

프로토타입(prototype)

새롤운 객체의 초기 속성을 가져 오는 템플릿으로 사용되는 객체 

객체 원형인 프로토타입을 이용하여 새로운 객체를 만들며, 생성되니 객체는 또 다른 객체의 원형이 될 수 있음 

__proto__ : 상위에서 물려 받은 객체의 프로토 타입에 대한 정보 

prototype : 자신의 프로토타입의 객체, 하위롤 물려줄 프로토타입의 정보

 

자바 스크립트에서 사용하는 객체 

✔ 문서 객체 모델(DOM)

웹 문서와 그 안에 삽입되어 있는 이미지와 링크, 텍스트 필드 등

일반적으로 웹 문서에 삽입하는 요소는 document, image, link 객체

 

✔ 브라우저 관련 객체

웹 브라우저에서 사용하는 정보 

사용하는 브라우저 정보를 담고 있는 navigator 객체를 비롯해 history, location, screen 객체로 등

 

 

✔ 내장 객체

웹 프로그래밍을 할 때 자주 사용하는 요소로 자바 스크립트 안에 미리 객체로 정의되어 있음 

ex) 날짜, 시간과 관련된 프로그램을 개발하기 위해서는 Date 객체 이용

 

 

를 사용할 때는 속성을 이용해서 

자바스크립트는 언제든지 객체를 추가하거나 삭제 가능 (자바는 불가능)

클래스 기반이 아닌, 프로토타입(자식에게 물려줄 데이터를 가지고 있는 공간 - 상속) 기반

리액트는 클래스를 기반으로 함 

 

프로토타입을 이용하여 새로운 객체를 만들 수 있음 (프로토타입은 아버지가 될ㄹ 수 있다)

 

프로토는 아버지가 가지고 있음

프로토타입은 내가 가지고 있음 

 

특징 

모든 객체는 다른 객체로부터 상속

(최상위 객체 :Object - Object를 제외한 모든 객체는 Object를 아버지로)

 

객체 생성 방법

1), 2) 방법을 주로 사용 

1) 객체 이니셜라이저(object initializer) 또는 리터널

속성은 이름을 줄 때 ''/ " 있어도 되고 없어도 됨 

var obj = {
	name : '홍길동',
	age : 20
};

여러 프로퍼티를 가진 객체를 쉽게 정의할 수 있는 표기법 

{} 안에 '프로퍼티 이름: 프로퍼티 값' 형태로 표기 

 

console.log(typeof obj); 
console.log(obj);
console.log(obj.name);

 

빈 객체로 생성

var obj={ };

 

 

2) 생성자 함수(constructor function)

생성자 함수를 이용해서 객체를 만들 수 있음 

생성자 함수는 일반적으로 대문자로 만듦

생성자 함수에 있는 프로퍼티는 this 사용

function User(name, age){
	
	this.name = name; // 속성(프로퍼티)
	this.age = age;

	// 메소드 
	this.state = () => this.age >= 19? '성인':'초딩';
	
	this.msg = function(){
		console.log(this.name+ ":" + this.state());
	};
}

 

3) Object.create() 메소드

 

위의 방법으로 생성되어 메모리에 대입된 객체를 인스턴스(instance) 라고 함 

 

 

클래스란?

객체를 생성하기 위한 템플릿 

 

클래스 생성

class User {	
	constructor({name, age}){ // 생성자 함수
		this.name = name; // 필드
		this.age = age;
	}
		sayHello(){ // 메소드
			return '안녕 내 이름은 ' + this.name +'입니다';
		}
}

 클래스 안에서의 생성자는 constructor 라는 이름으로 만든다