20210120#(20) JavaScript (상속 )

먼저 코드를 살펴보자. 위 두 개의 코드는 서로 같은 결과를 나타낸다.

코드를 살펴보면 달라진 점은 첫 번째 코드의 this.introduce = function() 부분이 사라지고

Person.prototype.name = null;

Person.prototype.introduce = function()으로 바뀌었다. 왜 두 코드가 같은 결과를 나타내고 이렇게 표현할까?

 

 

다음 코드를 보자.

1.Programmer라는 생성자를 만들고(function Programmer(name){ this.name = name;} )

2.Programmer생성자의 prototype이라는 녀석과 Person의 객체를 연결했더니 (Programmer.prototype = new Person();)

3. Programmer 객체도 introduce 메소드를 사용할 수 있게 되었다.(document.write(p1.introduce()+"<br />">;)

 

이 코드가 상속을 나타내고 있다. 즉 Programmer가 Person의 메서드인 introduce를 상속받아 사용하고 있는 것이다.

 

위 예시를 살펴보자. 두 번째 예시에서 Programmer 생성자에 coding메서드가 추가된 버전이라고 보면 된다.

일단 코드의 결과는 My name is jiho

                                    Hello World          가 출력된다.  Programmer 생성자는 Person의 메서드인 introduce도 가지고 있으면서 Person이 가지고 있지 않은 coding이라는 메서드도 가지고 있다는 걸 볼 수 있다.

 

 

마지막 예시를 살펴보자.

jiho와 dahi라는 생성자가 만들어 진 후 prototype 객체에 getType()이라는 함수를 추가했다. 이렇게 하면 getType 멤버를 추가하기 전에 생성된 객체에서도 추가된 메서드를 사용할 수 있다.

위 코드의 결과는 hawwi

                               hawwi이다.

 

일단 상속에 대해 맛만 보고 prototype을 배우면서 더 깊이 알아보자.

 

끗