일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- 컴공 #Swift #대학생 #iOS #앱개발 #앱디자인
- 컴공 #Swift #대학생 #iOS
- iOS #Swift #컴공 #공대생
- web #socket #polling #소켓 #폴링 #네트워크 #웹
- iOS #Swift #컴공 #대학생
- ios #swift #개발자 #apple
- java #android #xml #sqlite
- 컴공 #Swift #대학생 #iOS #앱개발
- iOS #Swift #대학생 #개발 #코딩
- iOS #대학생 #Swift
- node.js #npm #jest #test #웹테스트
- ios #boxoffice #영화진흥위원회 #swift #앱 #app #대학생
- iOS #Swift
- 컴공 #자바스크립트 #스터디 #JS #대학생
- Today
- Total
평범한 컴공 대학생의 공부일지
자바스크립트(JS) 객체(2) 본문
이번 글에서는 프로토타입, 인스턴스와 함께 사용자 정의 객체에 대해서 알아보겠습니다.
프로토타입과 인스턴스란?
- 프로토타입(Prototype)
프로토타입은 자바스크립트에서 객체 간 상속을 구현하는데 사용되는 객체입니다.
모든 객체는 프로토타입을 가지며, 프 로토타입은 다른 객체로부터 상속받은 메서드와 속성을 포함합니다.
객체는 프로토타입 체인을 따라 상위 프로토타입에 정의된 메서드와 속성을 사용할 수 있습니다.
=> 무언가를 만들기 위한 기본 틀을 의미합니다. 거푸집의 개념과 비슷하죠.
- 인스턴스(Instance)
인스턴스는 프로토타입을 기반으로 생성된 개별 객체를 의미합니다.
사용자 정의 객체를 만들 때, 생성자 함수를 통해 인스턴스를 생성합니다.
각각의 인스턴스는 자신만의 속성 값을 가지며, 같은 프로토타입을 공유합니다.
=> 프로토타입을 이용해 만들어낸 객체, 거푸집으로 형태를 만들어내어 사용자가 원하는 디자인(인스턴스)으로 완성
인스턴스를 생성할 때는 new를 사용한다.
2. 사용자 정의 객체 만들기
- 리터럴 표기법을 사용한 객체 만들기
리터럴이란 프로그래밍에서 자료를 표기하는 방식입니다.
객체 리터럴 표기법도 리터럴 표기법의 일종이며 객체를 선언하며 동시에 값을 지정해주는 것을 의미합니다.
리터럴 표기법을 사용하여 직접 객체를 생성하는 방법은 간단하고 자주 사용됩니다.
var person = {
name: "Taram",
age: 30,
greet: function() {
console.log("안녕하세요!");
}
};
위의 예제에서 person은 리터럴 표기법을 사용하여 객체를 만든 것입니다. name, age 속성과 greet 메서드를 가지는 객체가 생성되었습니다. 이처럼 속성 이름(name) : 값("Taram") 이렇게 한 쌍으로 지정하여 사용합니다.
이전 글에서 다루었던 것처럼 속성 값을 가져오려면 마침표(.)을 사용하여 person.name을 입력하면 Taram이 출력됩니다.
- 생성자 함수를 사용해 객체 만들기
생성자 함수를 사용하여 객체를 만드는 방법은 여러 개의 인스턴스를 생성할 때 유용합니다.
생성자 함수는 객체를 생성하는 템플릿 역할을 합니다.
그리고 리터럴 표기법과 다른 점이 있는데 리터럴 표기법은 정해진 값을 가진 객체를 1개만 만들어 낸다는 것입니다.
만약 도서관의 책들과 같이 형식은 같지만 내용이 모두 다른 자료들을 정리해야 할 때 리터럴 표기법을 쓰면 그 많은 자료들을 일일이 하나씩 값을 새로 넣어야 하겠죠? 이러한 경우에 생성자 함수를 사용하게 됩니다.
// 생성자 함수를 사용한 객체 생성
function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function() {
console.log("안녕하세요!");
};
}
// 인스턴스 생성
var person1 = new Person("John", 30);
var person2 = new Person("Alice", 25);
위의 예제에서 Person이라는 생성자 함수를 정의하고, this를 사용하여 속성과 메서드를 설정했습니다. 여기서 this는 Person(객체)을 의미하게 됩니다.
이후 new 키워드를 사용하여 Person 생성자 함수를 호출하여 person1과 person2 인스턴스를 생성했습니다. 각 인스턴스는 자신만의 속성 값을 가지고 있으며, greet 메서드를 공유합니다.
이렇게 된다면 여러 인적 사항을 수정하거나 관리하기에도 유용할 것 입니다.
'자바스크립트' 카테고리의 다른 글
자바스크립트(JS) Array 객체 함수 (0) | 2023.08.05 |
---|---|
자바스크립트(JS) Array 객체, 배열 (0) | 2023.08.05 |
자바스크립트(JS) 객체(1) (0) | 2023.08.05 |
자바스크립트(JS) 함수 표현식 (0) | 2023.08.05 |
자바스크립트(JS) 함수(let, constant), 전역 변수, 지역 변수 (0) | 2023.08.05 |