자바스크립트는 프로토타입 상속이 널리 사용되는 유일한 언어이므로 두 상속 방법의 차이점을 이해하는 데는 시간이 걸립니다.
첫 번째 주요 차이점은 Javascript가 상속을 위해 프로토타입 체인을 사용한다는 것입니다.
function Foo() { this.value = 42; } Foo.prototype = { method: function() {} }; function Bar() {}
Bar의 프로토타입을 Foo의 객체 인스턴스로 설정합니다.
Bar.prototype = new Foo(); Bar.prototype.foo = 'Hello World';
Bar의 생성자가 자신인지 확인하고 새 Bar 객체 인스턴스를 생성하세요.
Bar.prototype.constructor = Bar; var test = new Bar();
전체 프로토타입 체인의 구성을 살펴보겠습니다.
test [instance of Bar] Bar.prototype [instance of Foo] { foo: 'Hello World' } Foo.prototype { method: ... } Object.prototype { toString: ... /* etc. */ }
위 예에서 객체 테스트는 Bar.prototype과 Foo.prototype을 모두 상속합니다. 따라서 Foo에 정의된 함수 메서드에 액세스할 수 있습니다. 물론 속성 값에도 액세스할 수 있습니다. new Bar()가 호출되면 새로운 Foo 인스턴스를 생성하지 않고 프로토타입 객체와 함께 제공되는 Foo 인스턴스를 재사용한다는 점을 언급해야 합니다. 마찬가지로 모든 Bar 인스턴스는 동일한 값 속성을 공유합니다. 예를 들어보겠습니다:
test1 = new Bar(); test2 = new Bar(); Bar.prototype.value = 41; test1.value //41 test2.value//41
프로토타입 체인 검색 메커니즘
객체의 속성에 액세스할 때 Javascript는 해당 속성을 찾을 때까지 객체 자체부터 시작하여 전체 프로토타입 체인을 순회합니다. 이때 프로토타입 체인의 최상위(위 예에서는 Object.prototype)에 도달하고 찾을 속성을 여전히 찾을 수 없는 경우 Javascript는 정의되지 않은 값을 반환합니다.
프로토타입 객체 속성
프로토타입 개체의 속성은 Javascript에서 프로토타입 체인을 구축하는 데 사용되지만 여전히 값을 할당할 수 있습니다. 그러나 다음과 같이 원래 값을 프로토타입에 복사하는 것은 유효하지 않습니다.
function Foo() {} Foo.prototype = 1; // no effect
다음은 원래 값이 무엇인지 소개하는 이 기사의 여담입니다.
Javascript에서 변수는 기본 값과 참조 값이라는 두 가지 유형의 값을 저장할 수 있습니다.
1.기본값:
기본값은 고정값과 단순값으로 스택에 저장된 단순 데이터 세그먼트, 즉 해당 값이 변수에 액세스하는 위치에 직접 저장됩니다.
정의되지 않음, Null, 부울, 숫자 및 문자열의 다섯 가지 기본 유형이 있습니다.
2. 참고값:
참조 값은 힙에 저장되는 비교적 큰 개체입니다. 즉, 변수에 저장된 값은 개체가 저장된 메모리를 가리키는 포인터입니다. 모든 참조 유형은 객체에서 통합됩니다.
프로토타입 체인 성능 문제
조회해야 할 속성이 프로토타입 체인의 상단에 있는 경우 조회 프로세스는 의심할 여지 없이 성능에 부정적인 영향을 미칠 것입니다. 이는 성능 요구 사항이 엄격할 수밖에 없는 시나리오에서 고려해야 할 중요한 요소입니다. 또한 존재하지 않는 속성을 찾으려고 하면 전체 프로토타입 체인을 탐색하게 됩니다.
마찬가지로 객체의 속성을 탐색할 때 프로토타입 체인의 모든 속성에 액세스됩니다.
요약
더 복잡한 자바스크립트 코드를 작성하려면 프로토타입 상속을 이해하는 것이 전제조건입니다. 동시에 코드에서 프로토타입 체인의 높이에 주의하세요. 성능 병목 현상이 발생할 때 프로토타입 체인을 분할하는 방법을 알아보세요. 또한, 프로토타입 객체 프로토타입과 프로토타입 __proto__는 구별되어야 합니다. 여기서는 프로토타입 객체 프로토타입에 대해 주로 논의하고 프로토타입 __proto__에 관한 문제는 자세히 설명하지 않습니다.