javascript - 상속

상속은 부모의 로직을 재활용 할 수 있다는 점에서 객체 지향 프로그래밍에서 중요한 개념이다.

function Person(name){
    this.name = name
    this.introduce = function(){
      return "my name is "+this.name
    }
}
const person1 = new Person("dongha")
console.log(person1.introduce()) // my name is dongha

위 코드를 조금 바꾸면 이렇게 된다.

function Person(name){
  this.name = name
}

Person.prototype.name = null
Person.prototype.introduce = function(){
  return "My name is "+this.name
}

const person1 = new Person("dongha")
console.log(person1.introduce()) // my name is dongha

결과는 똑같다. Person이라는 함수를 만들고 함수 외부에 Person 함수(=객체)에 프로토타입이라는 프로퍼티를 부여하고 거기에 다시 name 프로퍼티를 준다.

상속

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();
 
const person1 = new Programmer('dongha');
console.log(person1.introduce())

Programmer라는 함수(생성자)가 추가되었다. 그리고 person1이라는 변수에 Programmer 생성자를 할당하고 "dongha"를 인자로 주었다. 그리고 person1.introduce()를 실행하면My name is dongha가 출력된다. Programmer 생성자에는 introduce라는 메서드가 없지만 출력을 했다. 그 이유는 Programmer의 prototyope으로 Person 생성자 함수를 할당했다.

이때 자바스크립트는 Person 생성자 함수가 prototype이라는 프로퍼티를 가지고 있는지 확인하고 그 생성자 함수 안에 있는 객체와 같은 객체를 만들어서 생성자의 결과로 return 한다. name이라는 프로퍼티와 introduce라는 매서드를 가진 객체가 prototype 안에 있기 때문에 new Person()으로 만든 객체는 그 둘을 가질 수 있는 것이다.

객체에 기능 추가

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();
Programmer.prototype.coding = function(){
    return "hello world";
}
 
const person1 = new Programmer('dong');
console.log(person1.introduce())
console.log(person1.coding())

Person과 Programmer 라는 객체가 있고 coding이라는 메서드는 Programmer라는 객체에만 있으면 된다.

Programmer.prototype.coding = function(){
    return "hello world";
}

그래서 Programmer의 prototpye 프로퍼티에 coding 메서드를 주고 거기에 함수를 만들면 된다.

출처 : https://www.inflearn.com/course/%EC%A7%80%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%96%B8%EC%96%B4-%EA%B8%B0%EB%B3%B8/lecture/2563?tab=note&mm=close