반응형
자바스크립트 프로토타입에 대해 간단하게 정리해보았다.
소스코드의 경우 대부분 Mdn을 바탕으로 작성하였다.
1. 프로토타입
자바스크립트는 프로토타입 기반의 객체 지향 언어이다.
- 자바스크립트의 모든 객체는 프로토타입(prototype)이라는 객체를 가지고 있으며,
- 모든 객체는 그들의 프로퍼티와 메소드를 상속 받는다.
- 자바스크립트에서는 현재 존재하고 있는 객체를 프로토타입으로 사용하여,
- 해당 객체를 복제하여 재사용하는 것을 상속이라고 한다.
2. 프로토타입 체인
- 자바스크립트에 내장된 모든 생성자나 사용자 정의 생성자는 바로 이 객체를 프로토타입으로 가진다.
- Object.prototype 객체는 이러한 프로토타입 체인에서도 가장 상위에 존재하는 프로토타입이다.
- Object를 상속받은 객체에서 사용 가능한 수 많은 메소드들이 Object의 prototype속성에 정의되어 있다.
아래와 같이 프로토타입이 상속되는 가상의 연결 고리를 프로토타입 체인(prototype chain)이라고 한다.
var date = new Date(); // 이 객체는 Date.prototype 뿐만 아니라 Object.prototype도 프로토타입으로 가진다.
3. 프로토타입의 생성
객체 생성자 함수(object constructor function) 를 작성하여 프로토타입을 생성할 수 있다.
function Person(name,age,gender){ //사람에 대한 생성자 함수 작성
this.name = name;
this.age = age;
this.gender = gender;
}
var person1 = new Person("JiWoo",24,"female"); // person1이라는 객체는 Person 이라는 prototype을 가짐.
4. 이미 생성된 객체에 새로운 프로퍼티, 메소드 추가
오직 person1 인스턴스에만 추가
function Person(name,age,gender){ //사람에 대한 생성자 함수 작성
this.name = name;
this.age = age;
this.gender = gender;
}
var person1 = new Person("JiWoo",24,"female"); // person1이라는 객체는 Person 이라는 prototype을 가짐.
person1.nationality = "korea"; // 국적에 관한 프로퍼티 추가
person1.greeting = function(){ // 인사 하는 메소드 추가
alert('Hi,I'm ${this.name}');
}
5. 프로토타입에 새로운 프로퍼티 및 메소드 추가
현재 존재하고 있는 프로토타입에 새로운 프로퍼티나 메소드를 손쉽게 추가
function Person(name,age,gender){ //사람에 대한 생성자 함수 작성
this.name = name;
this.age = age;
this.gender = gender;
}
//현재 존재하고 있는 Person prototype에 새로운 프로퍼티 추가
Person.prototype.nationality = "korea"
//현재 존재하고 있는 Person prototype에 새로운 매소드 추가
Person.prototype.greeting = function(){
alert('Hi,I'm ${this.name}');
}
참고자료:
TCP스쿨: http://www.tcpschool.com/javascript/js_object_prototype
블로그: https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67
반응형
'Java script' 카테고리의 다른 글
JavaScript_자바스크립트 Math.random() 활용-랜덤 뽑기 (0) | 2022.09.08 |
---|---|
JavaScript_자바스크립트 Math.random() 외 난수 생성하는 방법 (0) | 2022.08.16 |
Javascript_이메일 형식 확인 정규식, 핸드폰 번호 형식 자동 적용 정규식 (0) | 2022.08.09 |
JavaScript_두 INPUT 값 자동 합산 구현/ 숫자만 입력되도록 구현 하는 방법 (0) | 2022.08.08 |
JavaScript_if문, 삼항 연산자, switch 조건문 (0) | 2022.07.31 |