javascript 상속

상속

기존의 생성자 함수나 객체를 기반으로 새로운 생성자 함수나 객체를 쉽게 만드는것. 기존의 객체를 기반으로 생성하므로 상속을 통해 새로 만들어지는 객체에는 기존 객체의 특성을 모두 가지고 있다.

1 2 3 4 5 6 7 8

//생성자 함수를 선언             function Square(length){                 this.width = length;                 this.height = length;             }             Square.prototype.getArea=function(){                 return this.getWidth()*this.getHeight();             }; Colored by Color Scripter

cs

생성자 함수 선언 및 메서드 생성

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        //생성자 함수를 선언         function Retangle(w, h) {             //변수를 선언.             var width = w;             var height = h;             //메서드를 선언             this.getWidth = function () {                 return width;             };             this.getHeight = function () {                 return height;             };             this.setWidth = function (value) {                 if (value < 0) throw '길이는 음수일 수 없다';                 else width = value;             };             this.setHeight = function (value) {                 if (value < 0) throw '길이는 음수일 수 없다';                 else height = value;             };         }                    //메서드 생성         Retangle.prototype.getArea = function () {             return this.getHeight() * this.getWidth();         };         //변수 선언         var rectangle = new Retangle(5,7);         rectangle.setHeight(12);                    //출력         alert('AREA : ' + rectangle.getArea());    cs

cs

이제 상속을 받아보자

1 2 3 4 5 function Square(length){             this.base=Retangle;             this.base(length,length);         }         Square.prototype = Retangle.prototype; cs Colored by Color Scripter

cs

Retangle의 prototype를 Square의 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        //생성자 함수를 선언         function Retangle(w, h) {             //변수를 선언.             var width = w;             var height = h;             //메서드를 선언             this.getWidth = function () {                 return width;             };             this.getHeight = function () {                 return height;             };             this.setWidth = function (value) {                 if (value < 0) throw '길이는 음수일 수 없다';                 else width = value;             };             this.setHeight = function (value) {                 if (value < 0) throw '길이는 음수일 수 없다';                 else height = value;             };         }                    //메서드 생성         Retangle.prototype.getArea = function () {             return this.getHeight() * this.getWidth();         };                  function Square(length){             this.base=Retangle;             this.base(length,length);         }         Square.prototype = Retangle.prototype;                  //변수 선언         var rectangle = new Retangle(5,7);         var square = new Square(5);                    //출력         alert('rectangle.AREA : ' + rectangle.getArea());             alert('square.AREA : ' + square.getArea());  cs r

cs

코드를 정리를 하면 이렇게 될것이다.

상속을 받으면 기존에 만들어둔 생성자를 좀더 쉽게 배포?를 할수 있다.

1

alert(square instanceof Retangle);

cs

상속이 정상적으로 됬는지 안됬는지 확인을 하고 싶으면,

instanceof를 이용하면 된다.

square안에 Retangel이 있는지 검사.

정상적으로 상속이 됬다면 위 사진처럼 true값이 나올것이다.