javascript - 상속

객체의 상속

call()을 이용한 생성자 상속

생성자 함수에서 call()함수를 사용하면 다른 객체의 생성자를 상속 받을 수 있습니다.

call()

call()은 이미 할당되어있는 다른 객체의 함수/메소드를 호출하는 해당 객체에 재할당할때 사용하는 메소드.
mdn - Function.prototype.call()

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
};

Person.prototype.greeting = function() {
  console.log('안녕! 나는 ' + this.name + '야.');
};

function Student(name, age, gender, grade) {
  Person.call(this, name, age, gender);
  
  this.grade = grade;
}

하지만, 이방식은 생성자는 상속하지만 상속 받은 생성자(부모)의 prototype은 가지고 있지 않습니다. prototype을 상속박기 위해서는 create()를 사용해야합니다.

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

---

class를 사용한 상속

class Person {
  constructor(name, age, gender) {
  	this.name = name;
  	this.age = age;
  	this.gender = gender;
  }
  
  greeting() {
  	console.log('안녕! 나는 ' + this.name + '야.');
  };
};

class Student extends Person {
  constructor(name, age, gender, grade) {
  	super(name, age, gender);
    this.grade = grade;
  }
}

프로토타입 체인

모든 객체는 프로트타입의 계층 구조인 프로트타입 체인으로 묶여 있습니다. 자바스크립트 엔진은 속성 또는 메소드를 접근할때 없는 경우 __proto__ 접근자 프로퍼티가 가르키는 상위 프로트타입으로 이동하여 속성 또는 메소드를 단계적으로 찾아 나갑니다. 최종적으로 Object.prototype 까지 도달하게 됩니다.
이러한 __proto__ 접근자 프로퍼티를 이용하면 상속 받은 객체에 접근이 가능합니다.
하지만 주의해야 할 사항은 __proto__를 직접 사용하는 것을 권장하지 않고 있어, __proto__ 대신에 Object.getPrototpyeOf()를 사용해야합니다.

const s = new Student('1', '2', '3', '4');

console.log(Object.getPrototypeOf(s) === Student.prototype);
console.log(Object.getPrototypeOf(Student) === Person);