Languages/Java Script

[Js] 상속 | javascript상속 | prototype

해당 포스팅은 "생활코딩"의 이고잉 님의 강의를 기반으로 올린 게시글 입니다.

상업적인 용도가 아닌, 개인 공부 정리 목적으로 올리는 글임을 미리 알립니다.

상속(inheritance)이란?

객체는 연관된 로직들로 이루어진 작은 프로그램이라고 할 수 있다.

상속은 객체의 로직을 그대로 물려 받는 또 다른 객체를 만들 수 있는 기능을 의미한다. 단순히 물려받는 것이라면 의미가 없을 것이다. 기존의 로직을 수정하고 변경해서 파생된 새로운 객체를 만들 수 있게 해준다.

즉, 쉽게 설명하자면 객체란 변수와 메소드를 묶어놓은 묶음 이라고 보고 이러한 객체의 속성을 그대로 물려받은 자녀객체 (부모객체의 변수와 메소드 를 물려받음) 를 만들고, 수정하고 변경가능한 것이 바로 상속인 것이다.

아래 코드는 이전 시간에 살펴본 코드다.

<script>
    function Person(name){
        this.name = name;
        this.introduce = function(){
            return 'My name is '+this.name; 
        }   
    }
    var p1 = new Person('haeun');
    document.write(p1.introduce()+"<br />");
</script>

위 코드의 결과는 : My name is haeun이다.

위 코드를 아래와 같이 바꾸어 보자!

결과는 같지만 이 코드는 상속을 준비하는 과정이라고 생각하면 된다.

<script>
    function Person(name){
        this.name = name;
    }
    Person.prototype.name=null;
    Person.prototype.introduce = function(){
        return 'My name is '+this.name; 
    }
    var p1 = new Person('haeun');
    document.write(p1.introduce()+"<br />");
</script>

생성자 밖에서 prototype이라는 특수한 약속된 속성에 name을 준 것이다.

상속을 하기 위한 기본적인 준비를 마쳤으니, 이제 상속을 해보자!

아래 코드는 programmer라는 객체를 Person에 상속하여, introduce라는 없는 속성을 사용하는 예제이다.

<script>
      function Person(name){
          this.name = name;
      }
      Person.prototype.name=null;
      Person.prototype.introduce = function(){
          return 'My name is '+this.name; 
      }

      function Programmer(name){
          this.name = name;
      }
      Programmer.prototype = new Person();

      var p1 = new Programmer('haeun');
      document.write(p1.introduce()+"<br />");
</script>

Programmer이라는 생성자를 만들었다.

그리고 이 생성자의 prototype과 Person의 객체를 연결했더니 Programmer 객체도 메소드 introduce를 사용할 수 있게 되었다. Programmer가 Person의 기능을 상속하고 있는 것이다.

단순히 똑같은 기능을 갖게 되는 것이라면 상속의 의의는 사라질 것이다. 부모의 기능을 계승 발전할 수 있는 것이 상속의 가치다.

위의 코드가 잘 이해가 되지 않는다면 아래 영상을 참고해보자.

www.youtube.com/watch?v=mM-4t2J0lYM&feature=emb_logo

쉽게 말하자면 상속할 (기능을 가져오고 싶은) 객체를 생성자로 만든 것을

새로 만들 객체에 prototype값으로 주면 되는 것이다.

이전 코드를 조금 바꾸어, 상속 뿐 아니라 그 기능을 수정 혹은 변경하는 과정을 살펴보도록 하자.

<!DOCTYPE html>
<html>
<head>
	<title>생성자</title>
</head>
<body>
<script type="text/javascript">
    function Person(name){//Person은 부모 객체라고 할 수 있음
        this.name = name;
    }
    Person.prototype.name=null;
    Person.prototype.introduce = function(){
        return 'My name is '+this.name; 
    }

    function Programmer(name){ //Programmer이라는 객체 생성
        this.name = name;
    }
    Programmer.prototype = new Person(); // 상속될 생성자를 담고 있음 
    Programmer.prototype.coding = function(){
        return "hello world";
    }

    var p1 = new Programmer('haeun');
    document.write(p1.introduce()+"<br />");
    document.write(p1.coding()+"<br />");



    function Designer(name){
        this.name = name;
    }
    Designer.prototype = new Person(); 
    Designer.prototype.design = function(){
        return "beautiful~!!";
    }
    
    var p2 = new Designer('admin');
    document.write(p2.introduce()+"<br />");
    document.write(p2.design()+"<br />");

</script>
</body>
</html>

결과는 아래와 같다.

이렇게 부모에게 상속받은 기능을 변경하거나 추가할 수도 있는 것이다.

상속에서 가장 핵심적인 역할을 담당한 것은 prototype인데, 자바스크립트는 'prototype based language' 라고도 한다.

그만큼 자바스크립트(객체,함수 등)에서 매우 중요한 타입이다.

Contents

당신이 좋아할만한 콘텐츠

I-Tstory 👸🏻💫

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

새소식

인기 검색어

[Js] 상속 | javascript상속 | prototype

상속(inheritance)이란?

당신이 좋아할만한 콘텐츠

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역