Javascript - 상속(inheritance) 과 Prototype

***표기된 부분은 6월 17일에 추가된 내용 

 

상속은 객체의 로직을 그대로 물려 받거나 또 다른 객체의 Property를 만들 수 있는 기능을 의미한다. 다른 객체의 필요한 부분만 가져오고, 또 다른 기능을 추가 할 수 있다.(from 생활코딩)

  *상속 개념은 아직 이해를 많이 못한 상태이기 때문에 배운 내용을 우선 선 정리!! 나중에 내용 추가 필요

 

  *Person이라는 함수가 있고, 여기에 Person.prototype.name 과 introduce 값을 할당을 했다.

  *또 Programmer라는 함수가 있고, 여기에 Programmer.prototype 값으로 Person 생성자(Constructor)를 만들었다.

  *p1이라는 변수에 programmer 생성자를 만들고, p1.introduce 값을 호출을 하면 그 결과로 'My name is egoing' 을 출력되었다. 그 이유는 prototype이라는 객체의 특수한 속성 때문이다. prototype이라는 특수한 객체 속성 때문에 Person과 Programmer가 연결 되어 있고, 이것을 Programmer 함수는 Person에 상속 되었다고 말한다.

( Prototype ==> 특수한 속성(property)값이다. Prototype은 따로 설명할 예정)

  *즉, Programmer 함수와 이후 introduce 속성(property)를 따로 할당을 하지 않아도, Person에 상속 되어 있기 때문에 introduce라는 property를 가지고 있다.

from 생활코딩

 

상속의 특징

 -원형 객체를 수정 하지않고, 필요한 부분만 사용할 수 있다.

 - 다른말로 상속받은 객체에는 다른 내용을 추가 할 수 있다.

  *위와 동일한 예제에서 Programmer에 job이라는 속성값을 추가 하였다.

  *console.log 결과 값을 살펴 보면, Programmer라는 곳에 job 속성(property)를 추가하여도 p0에는 job 이라는 속성(property)가 존재하지 않는다.

  *prototype이 연결 되어 있어도 원형객체에는 기능이 추가 안 된다.

  *즉, 상속 받은 객체의 추가 기능을 추가 하여도 원형객체는 변하지 않는다.

from 생활코딩

 

***

  *p1.__proto__을 확인 했을 때, p1에 어떤 것들이 있는지 확인 할 수 있다. (__proto__ 는 Programmer.prototype 과 같다. 즉, 하기 그림에서 __proto__ 는 prototype으로 연결된 것들을 볼 수 있다.)

  *property로는 age와 name을 가지고 있고, 메소드로는 introduce가 사용이 가능한 것을 확인 할 수 있다.(prototype으로 person의 메소드와 연결된 것을 확인)

  *__proto__에 __proto__ 계속 확인 해보면 p1은 최상위는 object와 연결된 것을 확인 할 수 있고, 이것 때문에 toString, hasOwnProperty 같은 Object의 메소드를 사용이 가능하다.

  *최상위 object로부터 계속 상속 되어 있기 때문에 이와 같은 메소드를 사용할 수 있다.

  *prototype을 상속 할 때, Programmer.prototype = Person.prototype은 사용 하면 안된다. 왜냐하면 상속 해준 Person에도 메소드가 생기기 때문이다.

  *하기 코드에서 p1에 age라는 내용이 생긴다.(객체 원형 변형)

  *그래서 상속 할 때, Programmer.prototype = new Person()로 상속 하던지 아니면 Object.create(Person.prototype) 을 해주면 상속할 수 있다.

  *Object.create() 메소드를 이용했을 때, age는 생성이 안된다.

  *생성자와 Object.create로 상속을 할 때, constructor는 명확히 명시 되지 않는다. 때문에 코드 중간에 명시적인 내용을 추가해서 Constructor를 해야 정확한 상속이 된다.

  *이렇게 상속을 했을 때, Pesron의 this는 undefined가 된다.

  *따라서 Programmer에 Person.call(this, name) or Person.apply(this, arguments) 코드를 작성 해야한다.

#javascript#생활코딩#상속#inheritance#prototype