반응형
5.4 생성자 함수
5.4.1 생성자 함수란?
생성자 함수(constructor function)는 일반 함수와 기능적인 차이는 없다. 그러나 일반 함수와는 달리 생성자 함수는 new 연산자와 함께 자바스크립트에서 객체를 생성하기 위해 사용된다. 생성자 함수를 정의할 때는 일반 함수와 구분하기 위해 첫 글짜를 영문 대문자로 시작한다.
| 예제 5-11. 생성자 함수의 객체 생성 예 | constructor1.html | 코드 원문 |
<p id="show"></p>
<script>
function Member(id, name, age) {
this.id = id;
this.name = name;
this.age = age;
}
const mem1 = new Member("kdhong", "홍길동", 25);
const mem2 = new Member("jyahn", "안지영", 32);
const mem3 = new Member("skkim", "김수경", 43);
let text = "";
text += mem1.name + "<br>";
text += mem2.name + "<br>";
text += mem3.name;
document.getElementById("show").innerHTML = text;
</script>| 예제 5-11. 생성자 함수의 객체 생성 예 | constructor1.html | 코드 분석 |
<p id="show"></p>
// 태그 p를 선언하고 id값에 "show"를 지정한다.
// 자바스크립트 코드 시작
<script>
function Member(id, name, age) {
// 생성자 함수 선언 매개변수는 id, name,age이다.
this.id = id;
// 매개변수 id의 값을 객체 자신의 속성인 id에 저장한다.
this.name = name;
// 매개변수 name의 값을 객체 자신의 속성인 name에 저장한다.
this.age = age;
// 매개변수 age의 값을 객체 자신의 속성인 age에 저장한다.
}
const mem1 = new Member("kdhong", "홍길동", 25);
// new 연산자를 이용해서 생성자 함수 Member()를 호출해서 객체 mem1를 생성한다.
const mem2 = new Member("jyahn", "안지영", 32);
// new 연산자를 이용해서 생성자 함수 Member()를 호출해서 객체 mem2를 생성한다.
const mem3 = new Member("skkim", "김수경", 43);
// new 연산자를 이용해서 생성자 함수 Member()를 호출해서 객체 mem3를 생성한다.
let text = "";
text += mem1.name + "<br>";
// 문자열 변수 text에 객체 mem1의 name 프로퍼티 값을 저장하고 개행한다.
text += mem2.name + "<br>";
// 문자열 변수 text에 객체 mem2의 name 프로퍼티 값을 저장하고 개행한다.
text += mem3.name;
document.getElementById("show").innerHTML = text;
/* document.getElementById("show").innerHTML를 이용해서 id 값이 show인
html 문서에 변수 text를 출력한다. */
</script>
// 자바 스크립트 코드 끝
5.4.2 생성자 함수의 메서드
다음은 생성자 함수에서 메서드를 정의해서 사용하는 예이다.
| 예제 5-12. 생성자 함수에서 메서드 사용 예 | constructor2.html | 코드 원문 |
<p id="show"></p>
<script>
function Member(id, name, age) {
this.id = id;
this.name = name;
this.age = age;
this.getName = function() {
return "나의 이름은 " + this.name + "입니다.";
}
};
const mem1 = new Member("kdhong", "홍길동", 25);
let text = "";
text += mem1.id + "<br>"
text += mem1.getName();
document.getElementById("show").innerHTML = text;
</script>| 예제 5-12. 생성자 함수에서 메서드 사용 예 | constructor2.html | 코드 분석 |
<p id="show"></p>
<script>
function Member(id, name, age) {
// 생성자 함수 Member 선언 매개변수는 id, name, age로 한다.
this.id = id;
// 매개변수 id 값을 생성자 함수 Member의 인자 id에 저장한다.
this.name = name;
// 매개변수 name의 값을 생성자 함수 Member의 인자 name에 저장한다.
this.age = age;
// 매개변수 age의 값을 인자 age에 저장한다.
this.getName = function() {
// 생성자 함수 Membem의 메서드 getName을 정의한다.
return "나의 이름은 " + this.name + "입니다.";
}
};
const mem1 = new Member("kdhong", "홍길동", 25);
//생성자 함수 Member의 객체 mem1를 선언한다. 매개변수로 "kdhong", "홍길동", 25를 가진다.
let text = "";
text += mem1.id + "<br>"
// 객체 mem1의 id값을 변수 text에 이어서 저장한다.
text += mem1.getName();
// 객체 mem1의 함수 getName()을 호출하고 반환값을 변수 text에 이어서 저장한다.
document.getElementById("show").innerHTML = text;
// 변수 text에 저장된 값을 html 태그의 id값이 "show"인 곳에 출력한다.
</script>
5.5 프로토타입
C++, 자바와 같은 클래스 기반의 객체지향 프로그램 언어와 달리 자바스크립트는 프로토타입(prototype)을 기반으로 객체지향 프로그래밍을 할 수 있다. 클래스를 기반으로 한 객체지향 프로그래밍에서는 클래스를 먼저 정의한 다음 객체를 생성한다. 그러나 자바스크립트에서는 클래스 없이도 프로토타입을 이용해서 객체를 생성할 수 있다.
자바스크립트에서도 ES6 버전부터는 클래스를 사용할 수 있다. 자바스크립트의 클래스에 대해서는 다음 절인 5.6절에서 자세히 설명한다.
모든 자바스크립트 객체들은 프로토타입 객체(prototype object)로부터 프로퍼티와 메서드를 상속받는다. 프로토타입 객체는 중여서 프로토타입(prototype)이라고 부른다. 먼저 프로토타입을 구체적으로 설명하기 전에 생성자 함수를 생성한 후 메서드를 추가하는 다음 코드를 살펴보자.
| 예제 5-13. 생성자 함수 생성 후 메서드 추가 | prototype1.html | 코드 원문 |
<p id="show"></p>
<script>
function Member(id, name, age) {
this.id = id;
this.name = name;
this.age = age;
};
Member.company = "현대";
const mem1 = new Member("kdhong", "홍딜동", 25);
let text = "";
text += mem1.name + "<br>";
text += mem1.company;
document.getElementById("show").innerHTML = text;
</script>| 예제 5-13. 생성자 함수 생성 후 메서드 추가 | prototype1.html | 코드 원문 |
<p id="show"></p>
<script>
function Member(id, name, age) {
// 생성자 함수 Member 선언 매개변수로 id, name, age를 가진다.
this.id = id;
this.name = name;
this.age = age;
};
Member.company = "현대";
/* 생성자 함수에 새로운 프로퍼티 company를 추가하는 코드를 입력했으나
이미 정의된 생성자 함수는 새로운 프로퍼티를 추가할 수 없다.
프로퍼티 생성은 생성자 함수 내 존재해야 한다. 생성자 함수 외부에서
프로퍼티나 메서드를 추가하려면 프로토타입을 이용해야 한다.*/
const mem1 = new Member("kdhong", "홍길동", 25);
/* new 연산자를 이용해서 생성자 함수 Member()를 호출해서 객체 mem를 선언하고
매개변수는 "kdhong", "홍길동", 25로 한다. */
let text = "";
text += mem1.name + "<br>";
text += mem1.company;
/* 객체 mem1에는 프로퍼티 company가 존재하지 않는다.
프로퍼티 company를 출력하려고 하면 undefined가 출력된다. */
document.getElementById("show").innerHTML = text;
</script>
다음은 프로토타입을 이용해서 기존의 생성자함수에 프로퍼티와 메서드를 추가하는 예이다.
| 예제 5-14. 프로토타입을 이용한 프로퍼티와 메서드 추가 | prototype2.html | 코드 원문 |
<p id="show"></p>
// html 태그 p 선언하고 id 값을 show로 한다.
<script>
function Member(id, name, age) {
// 생성자 함수 Member 선언하고 매개변수는 id, name, age로 한다.
this.id = id;
this.name = name;
this.age = age;
};
Member.prototype.company = "현대";
/* 프로토타입을 이용해서 생성자 함수 Member에 새로운 프로퍼티
company를 추가한다. company 프로퍼티의 값은 "현대"로 한다. */
Member.prototype.getId = function() {
/* 프로토타입을 이용해서 생성자 함수 Member에 새로운 메서드
getId()를 추가한다. */
return "아이디는 " + this.id + "입니다.";
}
const mem1 = new Member("kdhong", "홍길동", 25);
// 생성자 함수 Member로부터 새로운 객체 mem1를 생성한다.
let text = "";
text += mem1.company + "<br>";
text += mem1.getId();
document.getElementById("show").innerHTML = text;
</script>
5.6 클래스
클래스는 객체를 생성하기 위한 틀, 즐 템플릿(template)이다. 자바스크립트 ES6 버전부터 클래스를 지원하는데 이 클래스를 이용하면 자바나 C++에서와 같은 방식으로 객체지향 프로그래밍을 할 수 있다.
자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 프로토타입을 사용한 객체지향 프로그래밍과는 문법이 다르고 사용 방법 또한 다르다. 자바 스크립트에서 클래스는 함수와 유사한 구조를 가지며 클래스는 특별한 함수라고 볼 수 있다.
5.6.1 클래스 기본 구조
다음 코드를 통해서 자바스크립트 클래스의 구조와 간단한 사용법에 대해 알아보자
| 예제 5-15. 자바스크립트의 클래스 사용 예 | class1.html | 코드 원문 |
<p id="show"></p>
<script>
class Member {
constructor(name, age) {
this.name = name;
this.age = age;
}
getAge() {
return "나이는 " + this.age + "살 입니다.";
}
}
const mem1 = new Member("홍길동", 30);
let text = "";
text += mem1.name + "<br>";
text += mem1.getAge();
document.getElementById("show").innerHTML = text;
</script>| 예제 5-15. 자바스크립트의 클래스 사용 예 | class1.html | 코드 분석 |
<p id="show"></p>
// 태그 p에 id 값을 "show"로 선언
<script>
class Member {
// 클래스 Member 선언
constructor(name, age) {
/* 새성자 constructor() 선언 new 연산자에 의해서 자도응로 호출되서
객체의 기본 상태를 기본 상태를 설정한다.*/
this.name = name;
// 매개변수 name의 값을 객체 자신의 프로퍼티 this.name에 저장한다.
this.age = age;
}
getAge() {
// 클래스 메서드 getAge() 선언
return "나이는 " + this.age + "살 입니다.";
}
}
const mem1 = new Member("홍길동", 30);
/*new 생성자를 이용해서 클래스 Member의 객체 mem1를 선언
매개변수 값은 "홍길동", 30으로 한다. */
let text = "";
text += mem1.name + "<br>";
// .를 이용해서 객체 mem1의 프로퍼티 name에 접근한다.
text += mem1.getAge();
// .를 이용해서 객체 mem1의 메서드 getAge()에 접근한다.
document.getElementById("show").innerHTML = text;
</script>
5.6.2 클래스 상속
클래스 상속은 다른 클래스에 있는 프로퍼티와 메서드를 상속받아 사용하는 것을 말한다. 이렇게 함으로써 하나의 클래스에서 부모 클래스가 가지고 있는 자원과 기능을 확장해서 사용할 수 있다. 클래스 상속에는 키워드 extends를 사용한다.
| 예제 5-16. 클래스의 상속 | class2.html | 코드 원문 |
<p id="show"></p>
<script>
class Member {
constructor(name, age){
this.name = name;
this.age = age;
}
getName() {
return "나의 이름은 " + this.name + "입니다.";
}
}
class Student extends Member {
constructor(name, age, school) {
super(name, age);
this.school = school;
}
intro() {
return this.getName() + " " + this.school + " 학생입니다.";
}
}
const stud1 = new Student("홍길동", 30, "한국대학교");
document.getElementById("show").innerHTML = stud1.intro();
</script>| 예제 5-16. 클래스의 상속 | class2.html | 코드 원문 |
<p id="show"></p>
// html 태그 p를 선언하고 id 값을 show로 한다.
<script>
class Member {
// 클래스 Member를 선언한다.
constructor(name, age){
// 생성자 함수 constructor를 선언한다.
this.name = name;
this.age = age;
}
getName() {
// 메서드 getName()를 선언한다.
return "나의 이름은 " + this.name + "입니다.";
}
}
class Student extends Member {
// 클래스 Member를 상속하는 클래스 Student를 선언한다.
constructor(name, age, school) {
super(name, age);
// 틀별한 메서드 super()를 사용해서 부모 클래스인
Member()의 생성자 constuctor()를 호출한다.
this.school = school;
}
intro() {
// 메서드 intro()를 선언한다.
return this.getName() + " " + this.school + " 학생입니다.";
// 인자와 문자열를 리턴한다.
}
}
const stud1 = new Student("홍길동", 30, "한국대학교");
// 객체 stud1를 선언한다.
document.getElementById("show").innerHTML = stud1.intro();
</script>
5.6.3 정적 메서드
자바스크립트 클래스의 정적 메서드(static method)는 클래스 자체에서 정의된다. 정적 메서드는 객체를 통해 호출하는 것이 아니라 클래스에서 호출해서 사용하는 메서드이다.
다음 예제를 통해서 정적 메서드의 사용법에 대해서 알아보자.
| 예제 5-17. 클래스의 정적 메서드 | class3.html | 코드 원문 |
<p id="show"></p>
<script>
class Member {
constructor(name, age) {
this.name = name;
this.age = age;
}
getName() {
return "나의 이름은 " + this.name + "입니다.";
}
static getCountry() {
return "한국인입니다.";
}
}
const mem1 = new Member("홍길동", 30);
let text = "";
text += mem1.getName() + "<br>";
text += Member.getCountry();
// text = mem1.getCountry(); // 오류 발생됨
document.getElementById("show").innerHTML = text;
</script>| 예제 5-17. 클래스의 정적 메서드 | class3.html | 코드 분석 |
<p id="show"></p>
<script>
class Member {
// 클래스 Member 선언
constructor(name, age) {
// 생성자 함수 constructor 선언
this.name = name;
this.age = age;
}
getName() {
// 메서드 getName() 선언
return "나의 이름은 " + this.name + "입니다.";
}
static getCountry() {
// 정적 메서드 getCountry() 선언
return "한국인입니다.";
}
}
const mem1 = new Member("홍길동", 30);
let text = "";
text += mem1.getName() + "<br>";
text += Member.getCountry();
/* 정적 메서드 getCountry()를 호출하기 위해서 클래스 이름 옆에 .를
넣어서 호출했다. */
// text = mem1.getCountry(); // 오류 발생됨
/* 정적 메서드 getCountry()를 호출하려 했으나 클래스에서만 호출되기 때문에
객체에서 호출은 실패해서 오류가 발새되게 된다. */
document.getElementById("show").innerHTML = text;
</script>위와 같이 정적 메서드는 어떤 특정한 객체가 아닌 클래스에 속한 메서드를 구현하는데 사용된다. 그리고 정적 메서드는 클래스를 통해 호출될 수 있다.
반응형
'프로그래밍 > 예제로 배우는 자바스크립트 요약 및 분석(IT 전공 서적)' 카테고리의 다른 글
| 예제로 배우는 자바스크립트 요약 및 코드 분석 6장 6-3~6-4 (0) | 2023.10.11 |
|---|---|
| 예제로 배우는 자바스크립트 요약 및 코드 분석 6장 6.1~6.2 (0) | 2023.10.10 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 5장 5.1~5.3 (0) | 2023.10.09 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 4장 - 4.3~4.6 (0) | 2023.10.09 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 4장 4.1~4.2 (0) | 2023.10.08 |