변수는 데이터 값을 하나 밖에 저장하지 못하지만,
객페는 데이터 값을 필요한 대로 만들어 사용할 수 있다
객체의 데이터는 '이름: 값'의 쌍으로 이루어 잇으며 이것을 속성이라고 함
변수에 {이름: 값, 이름: 값, ...}의 형태로 저장이 되면 변수는 객체가 됨
let 변수 = { name: '홍길동', // 프로퍼티 age: 20, // 프로퍼티 printOut: function( ) { // 메서드 }, .... }; |
객체의 속성은 객체의 속성 값을 저장하는 프로퍼티와 객체의 함수 메서드로 나누어짐
객체도 함수처럼 사용자가 직접 정의하는 '사용자 정의 객체'와 자바스크립트에서 제공해 주는 '내장 객체'로 나눈어짐
객체의 분류 | 종류 | 설명 |
사용자 정의 객체 | ▶ 객체 리터널 ▶ 객체 생성자 함수 ▶ 클래스 |
사용자가 직접 정의해서 사용하는 객체 |
내장 객체 | ▶ Number ▶ String ▶ Array ▶ Math ▶ Date ▶ RegExp |
자바스크립트에서 제공해 주는 객체 |
▶ 사용자 정의 객체
객체는 '객체 리터널'과 '객체 생성자 함수'로 만들 수 있음
** 객체 리터널
let 변수 = { 프로퍼티: 값, 프로퍼트: 값, 메서드: function( ) { }, .... }; console.log(변수.프로퍼티); console.log(변수.메서드( )); |
** '자신의 객체'를 의미할 때는 this 키워드를 사용
** 객체 생성자 함수
function 함수(매개 변수1, 매개 변수2) { this.프로퍼피 = 매개변수1; this.프로퍼피 = 매개변수2; this.메서드 = function( ) { }; }; let 변수 = new 함수( 매개변수1 값, 매개변수2 값); |
** '생성자 함수'는 일반 함수와 차이를 두기 위해 함수명의 첫 문자를 대문자로 표현
함수 안에 this는 함수를 통해 생성되는 객체를 의미
** prototype
'생성자 함수'로 생성된 객체들은 '생성자 함수'에서 정의한 속성을 그대로 상속
객체의 메소드의 경우 다른 속성처럼 값의 변화가 없기 때문에 불필요하게 상속 시켜 메모리를 낭비 할 필요가 없음
prototype를 이용하면 객체의 메서드를 '생성자 함수'내의 정의하지 않고도 생성된 객체에서 호출하여 사용할 수 있음
▶ class
class 클래스명 { constructor( 매개변수1, 매개변수2, ...) { this.이름 = 매개변수1; this.이름 = 매개변수2; ... } 메서드명 ( ) { } get 메서드명( ) { } set 메서드명( 매개변수 ) { } } let 변수1 = new 클래스명(매개변수1 값, 매개변수2 값, ...); let 변수2 = new 클래스명(매개변수1 값, 매개변수2 값, ...); |
form 객체 (0) | 2022.06.27 |
---|---|
이벤트 (0) | 2022.06.24 |
사용자 입력 폼 (0) | 2022.06.22 |
애니메이션 (0) | 2022.06.20 |
히스토리(history) 객체 (0) | 2022.06.13 |