[Web] 웹 기초 (16) - JavaScript #9 객체 (생성자함수)

객체를 생성하는 방법

1. 객체 리터럴을 사용하여 객체를 생성 : let obj={ ... }
2. function을 사용하여 객체를 생성 : function ABC { ... }
3. (자바의 static과 같은 개념) prototype을 사용하여 객체를 생성 (메소드를 생성) ⇒ 객체 생성할때마다 메소드도 새로 생성되는 것이 아니라 prototype으로 공유하는 것
4. class를 사용하여 객체를 생성 (자바의 class와 유사함. ECMAScript 6 이상)

 

리터럴 사용하여 객체 생성하기

기본형 리터럴 객체

• 리터럴로 만든 obj1은 재사용할 수 없다. 일회성이 아니면 잘 사용하지 않는다.

 

기본형 + 메소드가 있는 리터럴 객체

결과

 

Setter 만들기 (본인 필드는 무조건! this 쓰기)

 

code와 codeName을 다시 set 하고

 

출력해보면 값이 바뀌어있음

 

리터럴 객체를 map으로 생성 (리터럴 안에 key와 value값이 있다)

 

---

 

function을 이용한 객체생성

⇒ 가장 많이 쓰는 타입

 

function 안에 function

• Setter역할을 하는 function, Getter역할을 하는 function, toString 역할 function
• 나중에 Student를 100개 만들면 안에 있는 function도 100개 만들어짐
• 추후 공통적으로 쓸 setter, getter, toString은 프로토타입으로 쓸 수 있음
• 객체를 new로 만들어 쓸 수 있다. (literal은 new 안 됨)

 

결과

• new로 인스턴스 생성 후
• setter로 필드값 설정
• toString으로 출력

 

JSON타입으로도 만들어보기

출력

• 주의 : java에 넘길때는 키값, value값 큰따옴표로!!
• { "id" : "aaa", "name" : "gil"}

 

HTML 태그 씌워서 넘길때 쓰는 function

• 웹브라우저 안에 다음과 같이 나온다고 예상하면 됨.

---

다른 인스턴스 s2 생성

이번에는 초기값 넣어서

출력

 

만든 인스턴스를 배열에 담아보기

• toString, toHTML 도 마찬가지로 모든 객체가 찍힐것임

 

for-of 로 찍으면 이렇게!

---

 

프로토타입을 사용한 메소드 선언

✔ 객체를 생성할때마다 속성은 다른 값을 갖지만 메소드는 모두 같은 값을 가지고 있을 때, 공통으로 사용할 메소드만 따로 빼서 프로토타입 공간에 넣으면 객체 생성할때마다 메소드도 같이 생성하지 않아도 됨. (메모리 효율성)

 

• 필드는 다음과 같이 객체 내에 선언하고, 공유 메소드는 prototype에 따로 담는다.

 

일반적인 JSON & backtick 이용한 JSON

 

div 안에 span넣고 각각 클래스명 지정해준 것 핵심

 

객체 생성 후 배열에 push

 

for-of 이용하여 하나씩 출력

• JSON타입은 콘솔에 찍을때는 함수명만 넣어도 괜찮지만, div에 출력할때에는 JSON().code 이런 식으로 하나씩 하나씩 출력해야함

 

---

클래스를 사용한 객체 생성

필드는 동적으로 생성된다.

• 자바스크립트에서의 생성자 : constructor (캡쳐화면에 대문자 오타! 소문자입니다)

 

toString, toJSON, toHTML

 

• 클래스에 값 집어넣고 array 배열에 집어넣기
• 다양한 방법 쓸 수 있음
• for-of 이용해서 콘솔에 출력

 

정상적으로 출력!