모던 웹을 위한 Javascript jQuery 책을 보면서 정리하는 내용이다.
자바스크립트에도 상속 개념이 있다.
주력이 자바 기반이라 자바스크립트는 제한적으로 사용하지만 모바일 업무를 하게 되면서 제 2의 주력으로 만들어야 하는 위험한(?) 상황에 처했다.
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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>상속</title> <script> /* 상속 */ function Rectangle (w, h) { this.width = w; this.height = h; // getter, setter 정리 this.getWidth = function () { return w; }; this.getHeight = function () { return h; }; this.setWidth = function (w) { if (w < 0) { throw '길이는 음수가 될 수 없습니다.'; } else { width = w; } }; this.setHeight = function (w) { if (h < 0) { throw '높이는 음수가 될 수 없습니다.'; } else { height = h; } }; } Rectangle.prototype.getArea = function () { return this.getWidth() * this.getHeight(); }; </script> <script> function Square (length) { this.base = Rectangle; this.base(length, length); } Square.prototype = Rectangle.prototype; Square.prototype.constructor = Square; // 생성자를 재정의, 작성하지 않으면 Rectangle을 바라봄 var rectangle = new Rectangle(5, 7); var square = new Square(4); alert(rectangle.getArea() + ' : ' + square.getArea()); </script> </head> <body> </body> </html> | cs |
이후 학습 예정인 ecmascript6 에서는 많은 변화가 있지만 지금 공부하는 책에서는 상속에 대해 간단하게 설명되어 있다.
상속 여부를 확인 하는 방법도 53라인에 alert(square instanceof Rectangle); 입력 시 true 가 나오면 상속이 정상적으로
되었다고 판단한다.
추가로 자바스크립트의 모든 기본 내장 객체는 오브젝트 객체의 상속을 받는다. 눈에 잘 보이지 않아도 자바스크립트에도 상속 개념이 사용되고 있음을 이해하고 넘어가자.
퇴사 관련 이야기들을 모아 책으로 출판했습니다. 아래 링크에서 전체 목차를 읽어보세요! 대기업 퇴사 이야기 전체보기 : http://www.bookk.co.kr/book/view/21659 아래 링크로 간단한 후기 링크를 남기면 배송비도 환급된다고 하니 참고해주세요.
'문돌이의 IT > JavaScript' 카테고리의 다른 글
| 자바스크립트 내장객체(2) (0) | 2017.10.14 |
|---|---|
| 자바스크립트 내장객체 (0) | 2017.10.13 |
| 자바스크립트 생성자 함수 (0) | 2017.10.11 |
| 자바스크립트 객체와 배열 (0) | 2017.10.10 |
| 자바스크립트 객체의 속성추가 및 제거 (0) | 2017.10.09 |