> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 고급 시리즈 - 프로토타입

JavaScript 고급 시리즈 - 프로토타입

黄舟
풀어 주다: 2017-02-07 17:20:08
원래의
1105명이 탐색했습니다.
  • 속성 조회

  • 프로토타입 속성

  • 성능

  • 내장 유형을 확장하는 프로토타입

  • 요약

JavaScript는 전통적인 클래스 상속 모델을 포함하지 않고 프로토타입 프로토타입 모델을 사용합니다.

은 JavaScript의 단점으로 자주 언급됩니다. 실제로 프로토타입 기반 상속 모델은 기존 클래스 상속보다 강력합니다. 전통적인 클래스 상속 모델을 구현하는 것은 쉽지만 JavaScript에서 프로토타입 상속을 구현하는 것은 훨씬 더 어렵습니다. (예를 들어 그 위에 클래식 모델을 구축하는 것은 상당히 간단한 반면, 그 반대의 경우는 훨씬 더 어려운 작업입니다.)

JavaScript는 프로토타입 상속을 기반으로 널리 사용되는 유일한 언어입니다. 두 상속 모델의 차이점을 이해하는 데는 시간이 걸립니다.

차이점은 JavaScript가 프로토타입 체인 상속을 사용하는 방식입니다.

function Foo() {
    this.value = 42;
}
Foo.prototype = {
    method: function() {}
};

function Bar() {}

// 设置Bar的prototype属性为Foo的实例对象
Bar.prototype = new Foo();
Bar.prototype.foo = 'Hello World';

// 修正Bar.prototype.constructor为Bar本身
Bar.prototype.constructor = Bar;

var test = new Bar() // 创建Bar的一个新实例

// 原型链
test [Bar的实例]
    Bar.prototype [Foo的实例] 
        { foo: 'Hello World' }
        Foo.prototype
            {method: ...};
            Object.prototype
                {toString: ... /* etc. */};
로그인 후 복사

위의 예에서 테스트 개체는 Bar.prototype 및 Foo.prototype에서 상속되므로 Foo의 프로토타입 메서드에 액세스할 수 있습니다. 동시에 프로토타입에 정의된 Foo 인스턴스 속성 값에 액세스할 수도 있습니다. new Bar()는 새로운 Foo 인스턴스를 생성하지 않지만 프로토타입에서 인스턴스를 재사용하므로 모든 Bar 인스턴스는 동일한 value 속성을 공유합니다.

속성 조회

객체에서 속성을 찾을 때 JavaScript는 지정된 이름의 속성을 찾을 때까지 프로토타입 체인을 순회합니다.

은 프로토타입 체인의 최상위, 즉 Object.prototype에 도달하지만 지정된 속성을 여전히 찾을 수 없으며 정의되지 않음이 반환됩니다.

참고: Bar.prototype = Foo를 사용하지 마십시오. 이렇게 하면 Foo의 프로토타입이 실행되지 않고 Foo 함수를 가리키게 됩니다. 따라서 프로토타입 체인은 Foo.prototype 대신 Function.prototype으로 돌아가므로 해당 메서드는 Bar의 프로토타입 체인에 포함되지 않습니다.

프로토타입 속성

속성을 ​​사용하여 프로토타입 체인을 생성하면 모든 유형의 값을 해당 속성(프로토타입)에 할당할 수 있습니다. 그러나 프로토타입에 원자 유형을 할당하는 것은 무시됩니다.

function Foo() {}
Foo.prototype = 1; // 无效
로그인 후 복사

위 예시와 같이 객체를 프로토타입에 할당하면 프로토타입 체인이 동적으로 생성됩니다.

성능

프로퍼티가 프로토타입 체인의 상단에 있으면 조회 시간에 부정적인 영향을 미칩니다. 특히, 존재하지 않는 속성에 액세스하려고 시도하면 전체 프로토타입 체인을 통과하게 됩니다.

그리고 for in 루프를 사용하여 객체의 속성을 반복하면 프로토타입 체인의 모든 속성에 액세스됩니다.

내장 유형의 프로토타입 확장

자주 사용되는 잘못된 기능은 Object.prototype 또는 내장 유형의 다른 프로토타입 개체를 확장하는 것입니다.

이 기술을 Monkey Patching이라고 하며 캡슐화를 깨뜨립니다. Prototype과 같은 일부 JavaScript 라이브러리에서 널리 사용되지만 내장 유형에 일부 비표준 기능을 추가하는 것은 여전히 ​​좋은 생각이 아니라고 생각합니다.

내장 유형을 확장하는 유일한 이유는 Array.forEach와 같은 새로운 JavaScript와 일관성을 유지하기 위한 것입니다.

요약

복잡한 JavaScript 애플리케이션을 작성하기 전에 프로토타입 체인 상속이 어떻게 작동하는지 완전히 이해하는 것은 모든 JavaScript 프로그래머에게 필수입니다. 긴 프로토타입 체인으로 인해 발생하는 성능 문제에 주의하고 이를 단축하여 성능을 향상시키는 방법을 알아두십시오. 또한 새로운 JavaScript 엔진과의 호환성을 제외하고 내장 유형의 프로토타입을 확장하지 마십시오.

참고: 이는 프로그래밍 분야에서 일반적으로 사용되는 백포트(Backport)라는 방법으로, 이전 버전에 새 패치를 추가하는 것을 의미합니다.

위는 JavaScript Advanced Series - Prototype의 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(m.sbmmt.com)를 참고해주세요!


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