JavaScript - 상속

상속은 기존의 생성자 함수나 객체를 기반으로 새로운 생성자 함수나 객체를 쉽게 만드는 것을 뜻한다. 기존의 객체를 기반으로 생성하기 때문에 새로 만들어지는 객체에는 기존 객체의 특성이 들어가 있다. 이것을 기존의 객체에서 유산(속성과 메서드)을 물려받는 것과 비슷하다고 해서 상속이라고 부른다.

Rectangle의 프로토타입을 Square에 상속한다.

// Rectangle의 넓이를 구하는 함수 function Rectangle(w, h){      let width=w;      let height=h;      this.getWidth=function(){           return width;      }      this.getHeight=function(){           return height;      }      this.setWidth=function(value){           if(value<=0){                return alert('음수를 넣을 수 없습니다.');           }           return width=value;      }      this.setHeight=function(value){           if(value<=0){                return alert('음수를 넣을 수 없습니다.');           }           return height=value;      } } Rectangle.prototype.getArea=function(){      return this.getWidth()*this.getHeight(); } // Square를 구하는 함수 // Rectangle 객체의 속성을 Square 객체에 추가 function Square(length){      this.copy=Rectangle;      this.copy(length, length); } // Ractanlg의 프로토타입을 Square 프로토타입에 복사 Square.prototype=Rectangle.prototype; Square.prototype.constructor=Square; // 입출력 코드 let rectangle=new Rectangle(Number(prompt('가로 입력')), Number(prompt('세로 입력'))); let square=new Square(Number(prompt('제곱할 값 입력'))); alert('사각형 넓이 : '+rectangle.getArea()+' / 제곱한 값 : '+square.getArea());        // Rectangle로 부터 상속을 확인 alert(square instanceof Rectangle);

Rectangle 객체의 속성을 Square 객체에 추가 하였고, Rectangle 객체의 프로토타입이 가진 속성과 메서드를 Square 객체의 프로토타입에 복사한 것이다. 최종적으로 상속이 되었는지 판단하는 방법은 instanceof키워드를 사용하면 된다. true가 출력이 되면 상속이 되었다는 뜻이다. 

클래스의 상속

class Rectangle{      constructor(w, h){           this._width=w;           this._height=h; } // width의 게터와 세터      get width(){           return this._width;      }      set width(value){           if(value<=0){                return alert('음수를 넣을 수 없습니다.');           }           this._height=value;      } // height의 게터와 세터      get height(){           return this._height;      }      set height(value){           if(value<=0){                return alert('음수를 넣을 수 없습니다.');           }           this._width=value;      }      getArea(){           return this._width*this._height;      } } // Rectangle 클래스를 상속받아 Square 클래스 생성 class Square extends Rectangle{      constructor(length){ // 부모의 생성자(constructor)를 호출           super(length, length);      } // width 또는 height를 변경하면 둘 다 변경되도록 재선언      set width(value){           this._width=value;           this._height=value;      }      set height(value){           this._width=value;           this._height=value;      } } // 입출력 코드 const rectangle=new Rectangle(Number(prompt('가로 입력')), Number(prompt('세로 입력'))); const square=new Square(Number(prompt('제곱할 값 입력'))); alert('사각형 넓이 : '+rectangle.getArea()+' / 제곱한 값 : '+square.getArea());

상속.html

0.00MB