JavaScript 전용 멤버의 기호 + WeakMap 구현에 대한 자세한 코드 설명

伊谢尔伦
풀어 주다: 2017-07-27 11:25:25
원래의
1523명이 탐색했습니다.

WeakMap의 가장 큰 문제는 약한 참조를 심할 수 없다는 것입니다. 두 번째 문제는 디버깅이 편리하지 않다는 것입니다.

shim이 제작한 WeakMap은 주로 인스턴스의 생명주기를 추적할 수 없기 때문이고, 인스턴스에 있는 private 멤버의 생명주기는 인스턴스에 따라 달라지므로 인스턴스 수준의 private을 두는 것이 좋지 않을까요? 인스턴스의 멤버는 무엇입니까? 인스턴스가 사라지면 해당 속성은 자연스럽게 파괴됩니다. 개인 저장 공간은 Symol을 사용하여 숨길 수 있습니다.

이 솔루션은 외부에는 보이지 않고 클로저 함수를 통해 내부적으로 획득한 프라이빗 토큰 함수를 반환하는 createPrivate 함수를 제공하며, 현재 인스턴스의 프라이빗 저장 영역을 반환합니다. 사용법은 다음과 같습니다.

(function() {
   var $private = createPrivate(); // 私有成员 token 函数,可以传入对象参数,会作为原型链上的私有成员
   function MyClass() {
     $private(this).privateProp = ‘privateProp' ; // 闭包内引用到privateStore, 用当前实例做 key,设置私有成员
   }
   MyClass.prototype.getPrivateProp = function () {
     return $private(this).privateProp;
   };
})();
var my = new MyClass();
alert(my.getPrivateProp()); // ‘privateProp';
alert(my.privateProp); // 弹出 undefined,实例上并没有 privateProp 属性
로그인 후 복사

코드의 주요 목적은 createPrivate 함수를 구현하는 것입니다. 대략적인 구현은 다음과 같습니다.

// createPrivate.js
function createPrivate(prototype) {
  var privateStore = Symbol('privateStore');
  var classToken = Symbol(‘classToken');
  return function getPrivate(instance) {
     if (!instance.hasOwnProperty(privateStore)) {
       instance[privateStore] = {};
     }
    var store = instance[classToken];
     store[token] = store[token] || Object.create(prototype || {});
     return store[token];
   };
}
로그인 후 복사

위 구현에는 두 개의 저장소 계층이 있습니다. privateStore 계층은 통합된 개인 멤버 저장소입니다. classToken은 상속 수준 간 서로 다른 클래스의 Private 멤버 정의에 해당합니다. 기본 클래스는 기본 클래스의 Private 멤버 영역을 가지며, 하위 클래스와 기본 클래스의 Private 멤버 영역은 다릅니다.

물론 저장소의 두 계층만 구현할 수도 있습니다. 이는 디버깅 편의를 위한 것입니다. 기호('privateStore') 속성을 직접 사용하여 인스턴스의 각 수준에 대한 비공개 부분을 볼 수 있습니다. 콘솔.

위 내용은 JavaScript 전용 멤버의 기호 + WeakMap 구현에 대한 자세한 코드 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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