JavaScript - 프로토타입 상속

JavaScript는 프로토타입 상속이 있는 프로토타입 기반 언어입니다. 이는 고전적 상속과 동일하지 않습니다. 프로토타입 상속은 클래식 상속보다 더 유연합니다. 클래식 상속을 사용하면 부모의 모든 메서드를 상속합니다. 프로토타입 상속을 사용하면 .prototype에 추가하여 특정 기능을 상속할 수 있습니다.

아래에 몇 가지 코드 예제를 제공하고 여기에 코드를 볼 수 있는 code sandbox도 있습니다.

Reference: class vs prototypal
Reference: inheritance and the prototype chain
Reference: Object prototypes
Reference: Constructor Pattern

클래스는 함수다

JavaScript에서 클래스를 만드는 것은 구문 설탕입니다(코드를 더 읽기 쉽게 만듭니다). 클래스를 생성할 때 생성자 역할을 하는 함수(new 연산자로 호출되는 함수)를 생성합니다. 다음은 다음과 같습니다.

Reference: new operator

// constructor function
function Person(firstName, lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}

// creating an instance method on Person
// this method can be called on any new instance of Person
Person.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}`;
};

// creating an instance method on Person
// this method can be called on any new instance of Person
Person.prototype.getAge = function () {
  return this.age;
};

console.log(typeof Person); // => function

// creating an instance of Person
const user = new Person("Joe", "Lynn", 27);
console.log(user.getFullName()); // => 'Joe Lynn'
console.log(user.getAge()); // => 27

위 예제의 클래스 구현

// create User class 
class User {
  constructor(firstName, lastName, age) {
    this.firstName = firstName
    this.lastName = lastName
    this.age = age
  }

  // creating a method getFullName()
  getFullName() {
    return `${this.firstName} ${this.lastName}`
  }

  // creating a method getAge()
  getAge() {
    return this.age
  }
}

console.log(typeof User) // => function 

const user2 = new User('Sierra', 'Lynn', 26)
console.log(user2.getFullName()) // => 'Sierra Lynn'
console.log(user2.getAge()) // => 26

프로토타입이란 무엇입니까?

모든 JavaScript 객체는 프로토타입에서 속성과 메서드를 상속합니다. 프로토타입은 프로토타입 체인 아래에서 상속하려는 속성과 메서드를 저장할 수 있는 객체입니다.

// Object prototype
{
  constructor: ƒ Object()
  hasOwnProperty: ƒ hasOwnProperty()
  isPrototypeOf: ƒ isPrototypeOf()
  propertyIsEnumerable: ƒ propertyIsEnumerable()
  toLocaleString: ƒ toLocaleString()
  toString: ƒ toString()
  valueOf: ƒ valueOf()
  __defineGetter__: ƒ __defineGetter__()
  __defineSetter__: ƒ __defineSetter__()
  __lookupGetter__: ƒ __lookupGetter__()
  __lookupSetter__: ƒ __lookupSetter__()
  get __proto__: ƒ __proto__()
  set __proto__: ƒ __proto__()
}

프로토타입 체인이란 무엇입니까?

프로토타입 체인은 상속을 가능하게 합니다. JavaScript의 모든 객체는 프로토타입Object을 상속합니다. null 를 칠 때까지 프로토타입 체인을 걸어 올라갈 수 있습니다.

console.log(Object.getPrototypeOf(user)); /* => 
{
  getAge: ƒ ()
  getFullName: ƒ ()
  constructor: ƒ Person(firstName, lastName, age)
  __proto__: Object
}
*/
console.log(Object.getPrototypeOf(Object.getPrototypeOf(user))); /* =>
{
  constructor: ƒ Object()
  hasOwnProperty: ƒ hasOwnProperty()
  isPrototypeOf: ƒ isPrototypeOf()
  propertyIsEnumerable: ƒ propertyIsEnumerable()
  toLocaleString: ƒ toLocaleString()
  toString: ƒ toString()
  valueOf: ƒ valueOf()
  __defineGetter__: ƒ __defineGetter__()
  __defineSetter__: ƒ __defineSetter__()
  __lookupGetter__: ƒ __lookupGetter__()
  __lookupSetter__: ƒ __lookupSetter__()
  get __proto__: ƒ __proto__()
  set __proto__: ƒ __proto__()
}
*/
console.log(
  Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(user)))
); // => null

이 게시물을 확인해 주셔서 감사합니다. 개선/수정할 수 있는 사항에 대한 피드백을 남겨주세요. 항상 더 배우고 싶습니다.