JavaScript의 프로토타입 상속 이해: 초보자 가이드

JavaScript는 객체 지향 프로그래밍(OOP) 패러다임을 갖춘 강력하고 동적인 언어입니다. 다른 많은 OOP 언어(예: Java 또는 C)와 달리 JavaScript는 고전적인 상속을 사용하지 않습니다. 대신 유연하고 고유한 프로토타입 상속을 사용합니다.

이 블로그에서는 프로토타입 상속의 개념에 대해 자세히 알아보고, 그것이 어떻게 작동하는지 살펴보고, 실제 예를 살펴보며 상속의 힘을 더 잘 이해할 것입니다.

원형 상속이란 무엇인가요?

프로토타입 상속을 통해 JavaScript 객체는 프로토타입 체인을 통해 속성과 메서드를 공유할 수 있습니다. 모든 JavaScript 개체에는 프로토타입이라는 다른 개체에 대한 내부 링크가 있습니다. 객체 자체에서 속성이나 메소드를 찾을 수 없는 경우 JavaScript는 프로토타입 체인에서 이를 찾습니다.

이 메커니즘을 통해 객체는 다른 객체의 동작을 '상속'할 수 있어 JavaScript 객체 지향 기능의 초석이 됩니다.

주요용어

1.프로토타입:
다른 개체가 속성을 상속받는 개체입니다.

2.프로토:
객체의 프로토타입에 대한 내부 참조(또는 링크)입니다.

3.Object.prototype:
모든 JavaScript 객체가 간접적으로 상속되는 최상위 프로토타입입니다.

4.프로토타입 체인:
JavaScript가 속성이나 메소드를 찾기 위해 탐색하는 프로토타입의 계층 구조입니다.

프로토타입 상속은 어떻게 작동하나요?

다음은 프로토타입 상속의 실제 동작을 보여주는 예입니다.

// Define a base object
const animal = {
  eats: true,
  walk() {
    console.log("Animal walks");
  },
};

// Create a new object that inherits from 'animal'
const dog = Object.create(animal);
dog.barks = true;

console.log(dog.eats); // true (inherited from animal)
dog.walk(); // "Animal walks" (method inherited from animal)

console.log(dog.barks); // true (own property)

설명

1. 개 개체는 Object.create() 메서드를 사용하여 동물 개체의 속성과 메서드를 상속합니다.
2. dog.eats에 액세스하면 JavaScript는 먼저 eats 속성이 dog에 직접 존재하는지 확인합니다. 그렇지 않은 경우 동물 프로토타입에서 속성을 찾습니다.

프로토타입 제작

Object.create() 메소드 사용

Object.create()는 프로토타입 상속을 설정하는 가장 간단한 방법입니다.

const vehicle = {
  wheels: 4,
  drive() {
    console.log("Vehicle drives");
  },
};

const car = Object.create(vehicle);
console.log(car.wheels); // 4
car.drive(); // "Vehicle drives"

생성자 함수 사용

ES6 클래스가 도입되기 전에는 생성자 함수가 상속을 통해 객체를 생성하는 주요 방법이었습니다.

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

Person.prototype.greet = function () {
  console.log(`Hello, my name is ${this.name}`);
};

const john = new Person("John");
john.greet(); // "Hello, my name is John"

여기서 Person 생성자는 Person.prototype을 사용하여 프로토타입을 설정합니다. new Person()을 통해 생성된 객체는 Person.prototype에 정의된 메서드를 상속합니다.

ES6 클래스 사용

ES6에서는 클래스 구문이 도입되어 상속이 더욱 직관적이면서도 내부적으로 프로토타입 체인을 활용하게 되었습니다.

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks`);
  }
}

const dog = new Dog("Buddy");
dog.speak(); // "Buddy barks"

클래식 상속처럼 보이지만 여전히 JavaScript의 프로토타입 상속을 기반으로 합니다.

프로토타입 체인 작동

프로토타입 체인이 어떻게 작동하는지 시각화해 보겠습니다.

// Define a base object
const animal = {
  eats: true,
  walk() {
    console.log("Animal walks");
  },
};

// Create a new object that inherits from 'animal'
const dog = Object.create(animal);
dog.barks = true;

console.log(dog.eats); // true (inherited from animal)
dog.walk(); // "Animal walks" (method inherited from animal)

console.log(dog.barks); // true (own property)

프로토타입 체인:

• 하위 객체: sayHi()
• 상위 개체(프로토타입): Greeting()
• Object.prototype(기본 프로토타입): toString()과 같은 메서드

여기서 메소드나 속성이 발견되지 않으면 JavaScript는 정의되지 않은 값을 반환합니다.

프로토타입 상속의 이점

1.메모리 효율성:
공유 메서드와 속성은 인스턴스 간에 중복되지 않고 프로토타입에 저장됩니다.

2.동적 상속:
런타임에 프로토타입을 수정할 수 있으며 상속하는 모든 객체에 변경 사항이 반영됩니다.

3.유연한 구조:
개체는 엄격한 클래스 계층 구조 없이 다른 개체에서 직접 상속할 수 있습니다.

제한사항

1.프로토타입 체인 성능:
프로토타입 체인이 길면 속성 조회 속도가 느려질 수 있습니다.

2.초보자를 위한 혼란:
proto, 프로토타입 및 Object.create()를 이해하는 것은 부담스러울 수 있습니다.

3.비공개 필드 부족:
ES6 이전에는 사유 재산을 프로토타입으로 구현하기가 어려웠습니다.

결론

프로토타입 상속은 JavaScript OOP 모델의 초석으로 유연성과 동적 동작을 제공합니다. Object.create(), 생성자 함수 또는 ES6 클래스를 사용하든 프로토타입 체인을 이해하는 것이 효과적이고 효율적인 JavaScript 코드를 작성하는 데 중요합니다.

이제 이러한 지식을 바탕으로 믹스인, 프로토타입 조작, 클래식 상속과 프로토타입 상속의 차이점과 같은 고급 주제를 탐색할 수 있습니다.

즐거운 코딩하세요! ?

위 내용은 JavaScript의 프로토타입 상속 이해: 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!