-
[JavaScript] 자바스크립트의 객체, 프로토타입비전공자 공부일기/:: WEB & Front-End 2020. 6. 22. 14:32
자바스크립틍
자바스크립트에서 객체를 생성하는 방법은 다음 3가지가 있다.
1. 기본 객체(Object() 객체)의 생성자 함수를 이용
2. 객체 리터럴을 이용
3. 생성자 함수 이용
1. 기본객체의 생성자 함수를 이용
Object 객체를 생성하고, 여기에 새로운 프로퍼티를 추가하는 방법
// Object 형태로 객체 생성 let objSample = new Object() // 객체에 속성과 속성값을 추가 objSample.property1 = 'value1' objSample.property2 = 'value2' objSample.property3 = 'value3'
2. 객체 리터럴을 이용
변수를 생성할 때 중괄호 안에 생성할 객체의 프로퍼티를 정의하면 된다.
// 비어있는 객체 생성 let testObj = {} // 속성, 속성값을 가진 객체 생성 let sampleObj = { property1 : 'value1' property2 : 'value2' property3 : 'value3' }
3. 생성자 함수 이용
이미 정의된 함수를 new 키워드로 변수에 호출하면 그 자체로 생성자의 역할을 한다.
일반 함수와 생성자 함수는 딱히 형식이 따로 정해진 게 아니므로,
구분을 위해 생성자 함수의 첫 글자는 대문자로 쓰는 것을 권장하고 있다.
let TestFunc1 = function(value1, value2, value3) { this.property1 = value1; this.property2 = value2; this.property3 = value3; } let TestFunc2 = function(value1, value2, value3) { this.property1 = value1; this.property2 = value2; this.property3 = value3; return this; } let test = new TestFunc(valueA, valueB, valueC);
생성된 객체의 프로토타입
자바가 class 기반의 언어라면 자바스크립트는 prototype기반의 언어이다.
따라서 클래스 객체의 상속이란 개념을 사용하지 않고 프로토타입 모델의 상속을 지원한다.
프로토타입 기반 프로그래밍은 객체지향
prototype이라는 단어의 사전적 뜻은 '원형', '초기모델'이다.
자바스크립트에서는 객체를 생성하기 위해 사용되는 객체의 원형을 뜻한다.
prototype 프로퍼티는 함수들이 가지고 있는 속성이다.
함수 객체, 즉 1급 객체들만 가지고 있는 속성이므로
일반 객체에서 접근하려고 하면 syntax error가 발생한다.
자바스크립트는 객체를 생성할 때, 자동적으로 프로토타입 객체(__proto__)가
생성자의 프로토타입 프로퍼티로 설정된다.
그리고 new 키워드로 함수에서 찍어낸 객체들이 모두 이 프로토타입을 참조한다.
그래서 프로토타입은 '환경을 기억한다'고 말하기도 한다.
이 때 어떤 방식으로 객체를 생성하는지에 따라 프로토타입이 달라진다.
생성자 함수를 이용했을 때 프로토타입 객체는 생성자의 프로토타입 프로퍼티이다.
반면 객체 리터럴은 Object 객체의 프로토타입으로 설정된다.
객체 리터럴의 경우 Object() 생성자를 사용하여 객체를 생성했기 때문이다.
프로토타입은 굉장히 중요하고도 심오한 개념이므로
따로 글을 써보기로 한다.
도움받은 글 : https://hsp1116.tistory.com/10
'비전공자 공부일기 > :: WEB & Front-End' 카테고리의 다른 글
[jQuery] 제이쿼리 환경설정 (0) 2020.06.22 [JavaScript] 프로토타입 객체와 prototype, __proto__ (0) 2020.06.22 [JavaScript] 자바스크립트의 document 객체 (0) 2020.06.21 [JavaScript] HTML DOM 객체 (Document Object Model) (0) 2020.06.21 [JavaScript] 콜백함수 Callback Function (0) 2020.06.20