[javascript] 객체 정의 / 프로토타입 기반 언어 / 객체 만들기 (생성)

[javascript] 객체 정의 / 프로토타입 기반 언어 / 객체 만들기 (생성)

---

✔️ 객체란?

: 객체는 자바스크립트 언어 만이 가지고 있는 특징의 기초를 이루는 자료형이다!

⭐ 데이터를 저장하고 있는 프로퍼티 

⭐ 프로퍼티에 저장된 데이터를 조작할 수 있는 메소드로 구성된다.

: 객체는 (이름:값) 형태의 프로퍼티들을 저장하는 컨테이너이다.

: 기본 타입은 하나의 값만 가지지만, 참조 타입의 객체는 여러 프로퍼티를 포함할 수 있다.

: null 과 undefined 를 제외한 모든 원시 타입도 객체로 취급된다. 원시 타입들도 프로퍼티가 추가될 수 있고, 모두 객체의 특징을 갖는다!

⭐ 객체 사용시 속성 이름을 가지고 속성 값을 읽거나 쓸 수 있다~

⭐ 실행 시점에 특정 객체에 속성을 추가하거나 제거할 수 있다~

 

 

✔️ 프로토타입 기반 언어

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

: 프로토타입 기반 언어는 프로토타입 객체 라는 개념이 있으며, 새로운 객체의 초기 속성을 가져오는 템플릿으로 사용되는 객체이다.

: 프로토타입을 이용해 새로운 객체를 만들고, 생성된 객체는 또 다른 객체의 원형이 될 수 있다. 

: ⭐ 클래스 없이 객체 생성이 가능하다. 

: 모든 객체를 다른 객체의 프로토타입으로 연결해 두번째 객체가 첫번째 객체 속성을 공유할 수 있다.(연결연결....)

 

📓 특징

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

- 생성자 함수를 이용하여 객체 세트를 정의하고 생성할 수 있다.

- class 와 마찬가지로 new 연산자로 하나의 객체를 생성 가능

- 하나의 객체를 생성자 함수와 결합된 프로토타입에 할당하면 객체의 계층구조를 생성한다.

- 프로토타입 체인에 따라 속성을 상속받음~

- 동적으로 속성을 추가 삭제 할 수 있다.

 

 

✔️ 객체 만들기 - 리터널

1) 객체 리터널로 만들기

var s;

// 1. 객체 이니셜라이저(객체 리터널)를 이용한 객체 만들기
var obj = {name:'홍길동', age:20}; //프로퍼티:값

console.log( typeof obj); //object
console.log(obj);

console.log(obj.name) // 홍길동

💡 동적으로 속성 추가가 가능하다. 속성명 틀리면 추가가 된다;

 

1-1) 객체 이니셜라이저(객체 리터널)를 이용한 객체 만들기 - 빈객체

var obj2 = {}; //빈객체
console.log(typeof obj2); // object

obj2.subject = '자바'; // 동적으로 속성 추가
console.log(obj2.subject); // 자바

 

1-2) 객체 이니셜라이저(객체 리터널)를 이용한 객체 만들기 - 메소드

var obj3 = {
	name : '홍길동',
	age : 20,
	state : function() {
		return this.age>=19 ? '성인' : '미성년자';
	},
	msg: function() {
		let s = `${this.name}님은 ${this.state()} 입니다.`;
		console.log(s);
	}
};

obj3.msg();

💡 메소드에서!!!!!!!!! 프로퍼티나 다른 메소드 호출시!!!!!!!!!!!!!
this 생략 절대 불가. 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());
	};
}

//객체 만들기
var obj = new User('김자바', 17);
obj.msg();

💡 생성자를 통해 생성된 객체를 그 생성자의 인스턴스라고 한다. 
obj 는 User 생성자의 인스턴스!

 

+ instanceof

: 해당 연산자를 사용하면, 객체가 특정 생성자의 인스턴스인지 확인할 수 있다.

//생성자 함수
function User(name) {
	this.name = name;
	
}

var obj = new User('자바');
console.log(obj instanceof User); // true
console.log(obj instanceof Object); // true, User의 상위 객체는 Object

//객체 리터널
var obj2 = {};
console.log(obj2 instanceof Object ); //true;