JavaScript의 프로토타입 및 상속

3373 단어 webdevjavascript

소개



Javascript와 같은 언어에서 상속이 어떻게 작동하는지 궁금한 적이 있습니까? 이 언어는 OOP 패러다임에 대해 이야기할 때 가장 먼저 떠오르는 언어가 아닙니다. 상속은 말 그대로 JavaScript에서 작동하지만 다음 섹션에서 자세히 설명합니다.

프로토타입, 스토커



JavaScript의 진정한 초보자가 아니라면 prototype과 property not이라는 단어가 이상하게 들릴 것입니다. JavaScript의 거의 모든 객체에는 프로토타입 객체가 있습니다. Object.prototype는 프로토타입 개체가 없는 희귀 개체 중 하나입니다. 간단하게 만들 때
let a = 'bcd'; 코드,
Object.getPrototypeOf(a); // String.prototype
당신에게 몇 가지 흥미로운 것들을 반환합니다. 예를 들어 String과 같은 개체로 변수가 래핑되었습니다. 이것이 변수에 대해 엄청난 양의 다양한 방법을 사용할 수 있는 이유입니다.

단순let q = {}; 생성하면 프로토타입 속성이 전혀 없으므로 q.prototype 방식으로 쿼리할 수 없습니다. 그러나 두려워하지 마십시오. 정상적인 행동입니다. 다음 섹션에서 프로토타입을 검사하는 방법에 대해 논의할 것입니다.

한 가지 중요한 점: 거의 모든 객체에는 프로토타입이 있지만 프로토타입이라는 속성은 없습니다. JavaScript의 상속은 이러한 방식으로도 작동합니다.

프로토타입 체인



객체의 속성에 접근하는 것은 물 속에 있는 거품과 같습니다. 목표에 도달할 때까지 늘 오르락 내리락 합니다.

예를 들어, myObject 개체의 myProperty 속성을 쿼리한다고 가정해 보겠습니다. 해당 객체에 해당 속성이 없으면 myObject의 프로토타입 객체가 조회됩니다. 속성이 해당 개체에 존재하는 경우 해당 개체가 반환됩니다. 그렇지 않은 경우 myProperty를 찾거나 프로토타입 속성이 null이 될 때까지 다른 수준을 다시 찾습니다. 이 경우 undefined가 반환됩니다. 이 짧은 설명이 요약했듯이 프로토타입 속성은 프로토타입 체인이라는 체인을 생성합니다.

예시





여기에서 볼 수 있듯이 먼저 기본 개체를 만들었습니다. 그런 다음 두 개의 자손이 사슬 모양으로 만들어집니다. 속성을 쿼리하면 의자 속성과 마찬가지로 프로토타입 체인에서 거품이 발생합니다. 존재하지 않으면 undefined가 반환됩니다. 보시다시피 속성을 덮어쓸 수 있으며 이는 프로토타입 체인의 속성에 영향을 미치지 않으므로 속성을 설정하면 거품이 발생하지 않고 가져오기만 됩니다.

이것은 우리가 상속된 속성을 선택적으로 생성하고 덮어쓸 수 있게 해주기 때문에 핵심 기능입니다.

예외



객체의 속성을 생성하는 기본 방법을 깨는 한 가지 예외가 있습니다. 덮어쓰려는 상속된 속성(이전 예제의 색상과 마찬가지로)이 setter 메서드가 있는 접근자 속성인 경우. 그런 다음 해당 메서드가 개체에서 호출되고 다시 프로토타입 체인이 수정되지 않은 상태로 유지됩니다.



프로토타입 쿼리



프로토타입을 확인하는 가장 간단한built in 함수는
Object.getPrototypeOf()
방법.

이것이 작동하는 방식입니다.

Object.getPrototypeOf([]);  // Array.prototype
Object.getPrototypeOf('');  // String.prototype


또 다른 유용한 방법은 isPrototypeOf 방법입니다. Docs .

이름에서 알 수 있듯이 부울 값을 반환합니다.

let a = {z: 1};
let b = Object.create(a);
a.isPrototypeOf(b);  // return true


프로토타입 설정



모든 프로토타입은 사용 가능한 구문으로 새 객체를 생성할 때 설정되며 객체의 프로토타입을 변경하는 것은 완전히 권장되지 않습니다.
다음과 같은 방법으로 수행할 수 있지만.

let a = [1, 2];
Object.setPrototypeOf(a, String.prototype);
a.join(); // Throws a TypeError, join not defined


프로토타입을 수동으로 설정하는 것은 권장되지 않는 이유입니다.

각주 __proto__



__proto__은 프로토타입 속성의 초기 브라우저 노출 구현입니다. 엄청난 양의 코드가 여전히 그것에 의존하기 때문에 그러한 이유로 의무화되었지만 오랫동안 사용되지 않습니다. 이건 정말 피하셔야 합니다.

내 기사가 도움이 되었기를 바랍니다. 아래에 의견을 남겨주세요!
다음 포스트는 클래스와 프로토타입에 관한 것입니다.

자원:
David Flanagan: JavaScript, 최종 가이드

좋은 웹페이지 즐겨찾기