자바스크립트 OOP 파트 II

안녕하세요 친구 여러분, 저는 Bennison입니다. 이 블로그에서는 Javascript에서 OOP가 어떻게 작동하는지 설명하고 기존 OOP와 어떻게 다른지 설명할 것입니다. 이 기사를 읽기 전에 OOP의 기초에 관한 이전 블로그를 읽어보십시오 .

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

Javascript에는 프로토타입이라는 것이 있습니다. JavaScript에서는 모든 객체가 특정 프로토타입에 연결됩니다. 따라서 각 개체에는 프로토타입이 있습니다. 프로토타입에는 속성과 메서드도 포함되어 있습니다.
여기서 중요한 것은 프로토타입 메서드와 속성이 개체에서 액세스할 수 있다는 것입니다.

클래식 OOP 대 자바스크립트 OOP

Classical OOP에서 개체는 클래스에서 인스턴스화되며 이를 인스턴스화라고 합니다. 여기서 클래스는 객체 생성을 위한 청사진일 뿐입니다.
하지만 자바스크립트에서는 이 용어가 다를 뿐입니다. 여기에서 각 개체는 다른 개체와 연결 되며 이러한 개체를 프로토타입 이라고 합니다.

프로토타입 상속이란 메서드를 포함하는 프로토타입과 해당 프로토타입에 연결된 모든 개체에 액세스할 수 있는 프로토타입을 의미합니다.
따라서 객체는 프로토타입에서 메서드와 속성을 상속받습니다. 이를 프로토타입 상속이라고 합니다. 이 상속은 한 클래스가 다른 클래스에서 상속되는 클래스 상속과 다릅니다. 하지만 이 경우 인스턴스는 기본 클래스에서 상속됩니다.
위의 이미지에서 javascript OOP 화살표가 위쪽을 가리키고 있는 것은 개체가 해당 동작을 프로토타입에 위임함을 의미합니다.
고전적인 OOP에서 메서드는 클래스에서 인스턴스(객체)로 복사됩니다.

const numbers = [1, 2, 3, 4,5];
numbers.map((num) => num * 2)

javascript 맵 메서드 이해를 위해 Google을 검색하면 MDN 문서에서 Array.prototype.map() 과 같은 것을 볼 수 있습니다.

여기서 " Array.prototype()" 은 JavaScript에서 생성하는 모든 배열 개체의 프로토타입입니다. 따라서 모든 배열은 map 메서드에 액세스할 수 있습니다.
이제 이 프로토타입 개체에는 맵을 포함한 모든 배열 메서드가 포함됩니다.

따라서 위의 예에서 " Array.Prototype" 은 숫자 배열의 프로토타입이고 해당 숫자 배열 변수는 프로토타입에 연결됩니다. 따라서 " array.prototype " 개체에 정의된 모든 메서드에 액세스할 수 있습니다. 따라서 위의 예에서 "숫자" 배열은 메서드 맵을 상속합니다.
Javascript에서 프로토타입 상속을 세 가지 방식으로 구현할 수 있습니다. 하나는 생성자 함수, 두 번째는 ES6 클래스, 마지막은 Object.Create() 메서드입니다.

생성자 함수는 함수에서 객체를 생성하는 데 사용됩니다. 이것이 Array 및 map 메소드와 같은 내장 객체가 구현되는 방식입니다.

이것은 생성자 함수에 대한 현대적인 대안입니다. ES6 클래스는 생성자 함수와 동일하게 작동합니다. ES6 클래스는 클래식 OOP처럼 동작하지 않습니다. 배후에서 ES6 클래스는 생성자 기능으로 구현됩니다.

class User {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  getFullName() {
    console.log(this.firstName + ' ' + this.lastName);
  }
}

const user = new User('Bennison', 'J');

console.log(user); // { firstName: 'Bennison', lastName: 'J' }

console.log(user.hasOwnProperty('firstName')); // true
console.log(user.hasOwnProperty('getFullName')); // false

그리고 위의 예에서 속성을 확인하는 데 도움이 되는 'hasOwnProperty' 메서드를 볼 수 있으며 이 메서드는 hasOwnProperty 메서드라는 개체의 고유 속성입니다.

" object.create()" 메서드는 객체를 프로토타입 객체에 연결하는 가장 쉬운 방법입니다.

const objOne = {
  firstName: 'Bennison',
  lastName: 'J',
  getFullName: function () {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

const objTwo = Object.create(objOne);

console.log(objTwo); // {}
objTwo.getFullName(); //  Bennison J

"Object.create" 메서드는 프로토타입과 함께 빈 개체를 반환합니다. 프로토타입은 우리가 해당 메서드에 전달한 것입니다.

이 블로그에서 Javascript의 프로토타입 상속에 대한 기본 사항을 배웠기를 바랍니다. 위의 예를 이해할 수 없더라도 다음 블로그에서 이러한 개념에 대해 자세히 설명하겠습니다. 이 블로그를 읽어주셔서 감사합니다. 곧 만나요.

자바스크립트 OOP(프로토타입) #2