[Javascript] 자바스크립트의 상속 prototype

자바스크립트의 상속 prototype

1. 정의

- 자바스크립트도 객체지향 언어의 상속을 지원한다

- 하지만 상속하는 방법으로 많은 말들이 존재한다

2. 방법

1) 기존의 방법

function Person(){ this.name = 'Kyle'; this.getName = function(){ console.log(this.name) ; } } function Me(){ var obj = new Person(); obj.name="Tom"; return obj; } var aa = new Me(); aa.getName();

- 실행 결과 : Tom

- 상속이 제대로 된것 같다

문제 ) 왜 이걸 사용하지 않는가?

- 아래 코드를 보자

function Person(){ this.name = 'Kyle'; this.getName = function(){ console.log(this.name) ; } } function Me(){ var obj = new Person(); obj.name="Tom"; this.getNickname = function(){ console.log(this.name); } return obj; } var aa = new Me(); aa.getName(); aa.getNickname();  

- 위의 코드에서  aa.sayGoodbye() 를 호출하는 부분에서 에러가 발생한다

- 분명 Me()이용해서 생성자를 만들고 그 안에 정의한 함수를 호출 하지만 찾을 수 없다

이유) 인스턴스가 다르다

- console 창에 aa 를 입력하면 위와 같은 결과를 보인다. 그 안에는 Person 객체가 들어있다. 분명 생성자는 Me()인데 aa의 객체는 Person() 이다

console.log(aa instanceof Me); //false console.log(aa instanceof Person); //true  

- 인스턴스가 Person 으로 되어있다. 이렇다면 상속받은 객체 입장에서는 새로운 기능을 추가하기 힘들다

2) prototype을 이용한 방법

- 기존 방법의 개선안으로  prototype을 사용한다

function Person(){ this.name = 'Kyle'; this.getName = function(){ console.log(this.name) ; } } function Me(){ this.name = 'Tom'; this.getHello = function(){ console.log('Hello'); } } Me.prototype = new Person(); var aa = new Me(); aa.getName(); aa.getHello(); console.log(aa instanceof Me); //true console.log(aa instanceof Person); //true  

- 결과 : Tom, Hello, true, true

- 상속은 물론 새로 추가된 기능 까지 잘 된것을 알 수 있다. 또한 인스턴스가 Me와 Person 까지 포함되어있다

3. 결론

- 기존의 방법 보단 prototype을 이용한 방법이 객체지향 취지에 맞는다

- 하지만 prototype으로 만든다면 prototype chain의 길이가 길어질 수 있고 이것은 성능과 연관되어있다

- 현재 다른 상속 방법(Object.create())이 있지만 그건 추후에 알도록 한다