> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트 연구 노트 - 객체(2): 프로토타입 객체_기본 지식

자바스크립트 연구 노트 - 객체(2): 프로토타입 객체_기본 지식

WBOY
풀어 주다: 2016-05-16 16:43:09
원래의
1236명이 탐색했습니다.

자바스크립트는 프로토타입 상속이 널리 사용되는 유일한 언어이므로 두 상속 방법의 차이점을 이해하는 데는 시간이 걸립니다.

첫 번째 주요 차이점은 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__에 관한 문제는 자세히 설명하지 않습니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿