이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다.
자세한 내용은 https://www.opentutorials.org/course/743 이곳에서 확인할 수 있다.
모든 내용의 출처는 이곳이다. 다른 언어를 알고있는 상태로 공부한 내용이다.
C++에서 상속은 부모 클래스의 내용이 자식 클래스에서 사용할 수 있다고 간단하게 이해할 수 있다. 이와함께 가상함수 오버라이딩, 다형성 등의 개념이 나오게 되며 객체지향 프로그래밍 이라고 한다.
자바스크립트에서 상속또한 비슷한 개념이며 여기서는 사용법만을 확인해보자
우선 상속은 로직의 재활용을 위해 사용한다. 이를 위해 'prototype' 이라는 것을 사용하며 이 내용은 다음 장에서 살펴볼 것이다. 우선은 코드를 보며 어떻게 이루어지고 동작하는지를 확인하자.
|
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
32
33
34
35
36
37
38
39
40
41
42
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
//상속을 통해 로직을 재활용 할수있다. 부모의 객체를 물려받을 뿐만 아니라 수정 및 변경이 가능하다
function per(name) {
this.name = name;
}
per.prototype.name = null;
per.prototype.introduce = function () {
return 'my name is ' + this.name;
}
function pro(name) {
this.name = name;
}
pro.prototype = new per(); //얘가 상속임 없으면 에러
//pro생성자가 가지고 있는 prototype으로 new per생성자에 의해 객체생성
pro.prototype.coding = function () {
return 'hello world';
}//pro객체만 가지고 있는 메서드, 메서드 추가
function die(name) {
this.name = name;
}
die.prototype = new per();
die.prototype.die = function () {
return "Sad.....";
}
// die라는 생성자를 만드는데 그 생성자는 per을 상속받는다. 그리고 design이라는 메서드를 추가
var p = new pro('Hur'); //객체생성
var p2 = new die('kkk'); // 객체생성
document.write(p.introduce() + '<br />');
document.write(p.coding() + '<br />');
document.write(p2.introduce() + '<br />');
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5; text-decoration:none">Colored by Color Scripter
|
'JavaScript' 카테고리의 다른 글
| [JavaScript]표준 내장 객체 (0) | 2019.05.29 |
|---|---|
| [JavaScript]프로토타입_Prototype (0) | 2019.05.29 |
| [JavaScript]전역객체 와 this 키워드 (0) | 2019.05.27 |
| [JavaScript]생성자와 new (0) | 2019.05.27 |
| [JavaScript] Closure_클로저 (0) | 2019.05.27 |