JavaScript의 프로토타입 상속 및 ESlass 이해

JavaScript는 대부분의 기존 OOP 언어와는 다른 상속 메커니즘을 가지고 있습니다. 프로토타입이 주요 초점인 반면 ES6 클래스는 보다 현대적인 방법을 제공합니다. ES6 클래스가 어떻게 가독성과 유용성을 향상하는지, 프로토타입 상속이 어떻게 작동하는지 살펴보겠습니다.

1. 프로토타입: 상속의 기초

JavaScript의 모든 개체에는 프로토타입이라는 다른 개체에 대한 내부 링크가 있습니다. 이 프로토타입 객체는 체인을 형성하는 자체 프로토타입을 가질 수 있습니다.

예:

const animal = { eats: true };
const rabbit = Object.create(animal);
rabbit.hops = true;

console.log(rabbit.eats); // true (inherited)
console.log(rabbit.hops); // true (own property)

설명:

여기서 토끼는 동물로부터 먹는 것을 물려받습니다. 이는 객체가 상속을 통해 속성을 공유하는 방법을 보여줍니다.

2. 생성자 함수: 객체 만들기

ES6 클래스 이전에는 JavaScript가 생성자 함수를 사용하여 객체를 생성하고 해당 속성을 초기화했습니다.

예:

function Animal(name) {
  this.name = name;
}
Animal.prototype.eats = true;

const dog = new Animal('Dog');
console.log(dog.name); // Dog
console.log(dog.eats); // true

설명:

Animal 생성자는 이름을 초기화합니다. eats 속성은 Animal.prototype을 통해 추가되어 상속이 가능해집니다.

3. 마스터 오브젝트: 공통조상

마스터 개체는 다른 개체의 프로토타입 역할을 합니다.

예:

const masterObject = { type: 'Generic' };
const specificObject = Object.create(masterObject);
specificObject.name = 'Specific';

console.log(specificObject.type); // Generic (inherited)
console.log(specificObject.name); // Specific (own property)

설명:

masterObject는 공통 조상이고, 특정 개체는 이름을 추가하면서 해당 유형 속성을 상속받습니다.

4. 프로토타입 체인: 계층 구조를 따르기

JavaScript는 프로토타입 체인을 검색하여 속성과 메서드를 찾습니다.

예:

const grandparent = { role: 'grandparent' };
const parent = Object.create(grandparent);
parent.role = 'parent';

const child = Object.create(parent);
console.log(child.role); // parent

설명:

하위 개체는 역할을 찾습니다. 부모의 역할을 찾아 프로토타입 체인이 속성 조회를 해결하는 방법을 보여줍니다.

5. 프로토타입 상속: 공유 방법

객체는 프로토타입 상속을 통해 메소드를 공유할 수 있습니다.

예:

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  console.log(this.name + ' makes a noise.');
};

function Dog(name) {
  Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
  console.log(this.name + ' barks.');
};

const dog = new Dog('Rex');
dog.speak(); // Rex makes a noise.
dog.bark();  // Rex barks.

설명:

개는 동물로부터 상속받아 말에 접근할 수 있습니다. 또한 자체 껍질 방법을 정의합니다.

6. ES6 클래스: 더욱 깔끔한 구문

ES6에서는 클래스를 생성하는 더 깔끔하고 직관적인 방법을 도입했습니다.

예:

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

설명:

이 클래스 기반 구문은 객체 생성 및 상속을 단순화하여 코드 가독성을 높여줍니다.

7. Getter 및 Setter: 속성 관리

ES6에서는 객체 속성에 동적으로 액세스하거나 수정하는 메소드를 정의할 수 있습니다.

예:

const animal = { eats: true };
const rabbit = Object.create(animal);
rabbit.hops = true;

console.log(rabbit.eats); // true (inherited)
console.log(rabbit.hops); // true (own property)

설명:

Area는 getter 및 setter를 사용하여 계산된 속성이므로 동적 업데이트가 가능합니다.

8. 정적 메소드: 클래스 수준의 유틸리티

정적 메서드는 인스턴스가 아닌 클래스 자체에 속합니다.

예:

function Animal(name) {
  this.name = name;
}
Animal.prototype.eats = true;

const dog = new Animal('Dog');
console.log(dog.name); // Dog
console.log(dog.eats); // true

설명:

add는 MathHelper에서 직접 액세스할 수 있는 정적 메소드로, 유틸리티 함수에 유용합니다.

9. 다형성: 메서드 재정의

다형성을 통해 하위 클래스는 상위 클래스의 메서드를 재정의할 수 있습니다.

예:

const masterObject = { type: 'Generic' };
const specificObject = Object.create(masterObject);
specificObject.name = 'Specific';

console.log(specificObject.type); // Generic (inherited)
console.log(specificObject.name); // Specific (own property)

설명:

Dog는 Animal의 talk를 재정의하여 자체 구현을 제공합니다.

결론

JavaScript 객체 지향 프로그래밍의 기초는 ES6 클래스와 프로토타입 상속으로 구성됩니다. 생성자 함수, 프로토타입 및 ES6 클래스를 사용하는 방법을 알면 재사용 가능하고 유지 관리 가능한 코드 작성이 향상됩니다. JavaScript의 상속 패러다임을 최대한 활용하려면 다음 아이디어를 수용하세요!

Follow me: Github Linkedin

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