자 바스 크 립 트 의 패키지 와 계승 특성 을 간단하게 이해 합 니 다.

JavaScript 의 패 키 징 패 키 징 은 쉽게 말 하면 외부 에서 대상 에 만 접근 할 수 있 는 공유 변수 와 함수 로 디 테 일과 데 이 터 를 숨 기 는 것 입 니 다.js 에서 세 가지 방법 으로 대상 을 만 드 는데 그것 이 바로 포 털 개방 형, 명명 규범 으로 사유 변 수 를 구분 하고 패 킷 을 닫 아 진정한 사유 변 수 를 만 드 는 세 가지 이다.1. 문호 개방 형 은 대상 을 실현 하 는 가장 기본 적 인 방법 으로 모든 방법 과 변 수 는 공유 하 는 외부 에서 방문 할 수 있다.

var Book = function(name){ 
  if(this.check(name)){ 
    console.log("error"); 
    throw new Error("name null"); 
  } 
  this.name = name; 
} 
Book.prototype = { 
  check:function(name){ 
    if(!name){ 
      return true; 
    } 
  }, 
  getName:function(){ 
    return this.name; 
  } 
} 
 
var book = new Book("  "); 
//output:      
console.log(book.name,book.getName()); 

이 예 는 포 털 개방 형의 전형 으로 외부 에서 대상 을 직접 방문 할 수 있 는 속성 과 방법 이다.속성 과 변 수 는 모두 "this" 로 만 들 어 졌 음 을 알 수 있 습 니 다.  2. 명명 규범 으로 사유 변 수 를 구분 합 니 다. 이 방법 은 포 털 개방 형의 최적화 버 전 입 니 다. 사유 변수 나 방법 앞에서 '' 로 구분 할 뿐 프로그래머 가 의도 적 으로 사용 할 경우getName () 의 방법 으로 방법 을 호출 하 는 것 은 막 을 수 없습니다. 변 수 를 진정 으로 숨 기 는 것 이 아 닙 니 다.  3. 패 킷 을 닫 고 진정한 사유 변 수 를 만 듭 니 다. 이 방법 은 js 에서 함수 만 작용 역 의 특성 을 가지 고 구조 함수 의 작용 역 에서 관련 변 수 를 정의 합 니 다. 이런 변 수 는 이 작용 역 의 모든 함수 에 접근 할 수 있 습 니 다.

var Book2 = function(name){ 
  if(check(name)){ 
    console.log("error"); 
    throw new Error("name null"); 
  } 
  name = name; 
  function check(name){ 
    if(!name){ 
      return true; 
    } 
  } 
  this.getName = function(){ 
    return name; 
  } 
} 
Book2.prototype = { 
  display:function(){ 
    //      name 
    return "display:"+this.getName(); 
  } 
} 
var book2 = new Book2("  "); 
//output:undefined "  " "display:  " 
console.log(book2.name,book2.getName(),book2.display()); 

 이 예 에서 결 과 를 볼 수 있 습 니 다. name 에 직접 접근 하면 undefined 의 결 과 를 되 돌려 줍 니 다.이 예 와 포 털 대개 형의 차 이 를 볼 수 있 습 니 다. 포 털 대개 형의 변 수 는 'this' 를 사용 하여 만 듭 니 다. 이 예 에서 var 를 사용 하여 만 듭 니 다. check 함수 도 마찬가지 입 니 다. name 과 check 함 수 는 구조 함수 의 역할 영역 에서 만 접근 할 수 있 고 외부 에서 직접 방문 할 수 없습니다.이 방법 은 앞의 두 가지 방법의 문 제 를 해 결 했 지만 어느 정도 폐단 이 있다.포 털 오픈 대상 생 성 모드 에 서 는 모든 방법 이 프로 토 타 입 대상 에 생 성 되 기 때문에 아무리 많은 대상 인 스 턴 스 를 생 성하 더 라 도 메모리 에 한 부 만 존재 합 니 다. 이 방법 을 사용 하면 새로운 대상 을 만 들 때마다 모든 개인 변수 와 방법 에 새로운 복사 본 을 만 들 기 때문에 더 많은 메모리 가 소 모 됩 니 다.
JavaScript 의 계승 Book 기본 클래스:

var Book = function(name){ 
  if(this.check(name)){ 
    console.log("error"); 
    throw new Error("name null"); 
  } 
  this.name = name; 
} 
Book.prototype = { 
  check:function(name){ 
    if(!name){ 
      return true; 
    } 
  }, 
  getName:function(){ 
    return this.name; 
  } 
} 

계승 방법:

function extend(subClz,superClz){ 
var F = function(){} 
F.prototype = superClz.prototype; 
subClz.prototype = new F(); 
subClz.prototype.constructor = subClz; 
subClz.superClass = superClz.prototype; 
if(superClz.prototype.constructor == Object.prototype.constructor){ 
  superClz.prototype.constructor = superClz; 
} 

  빈 함수 F 를 브리지 로 사용 하면 부모 클래스 를 직접 예화 할 때 부모 클래스 의 구조 함 수 를 호출 하여 추가 비용 을 가 져 오 는 것 을 피 할 수 있 습 니 다. 또한 부모 클래스 의 구조 함수 에 인자 가 있 을 때 subClass. prototype = new superClass () 를 직접 통과 하고 싶 습 니 다.부류 구조 함수 의 호출 과 원형 체인 의 계승 을 실현 해 서 는 안 된다.

subClz.superClass = superClz.prototype; 
if(superClz.prototype.constructor == Object.prototype.constructor){ 
  superClz.prototype.constructor = superClz; 
} 

  이 세 문장 을 추가 하면 하위 클래스 가 부모 클래스 를 계승 하여 Book. call (this, name) 을 쓰 는 것 을 피 할 수 있 습 니 다.Artbook. superClass. constructor. call (this, name) 을 간단하게 쓰 면 이 루어 집 니 다.또한 하위 클래스 에서 부모 클래스 를 다시 쓸 때 부모 클래스 로 호출 할 수 있 습 니 다.

ArtBook.prototype.getName = functiion(){ 
  return ArtBook.superClass.getName.call(this) + "!!!"; 
} 

ArtBook 하위 클래스:

var ArtBook = function(name,price){ 
  ArtBook.superClass.Constructor.call(this,name); 
  this.price = price; 
} 
extend(ArtBook,Book); 
ArtBook.prototype.getPrice = function(){ 
    return this.price; 
} 
ArtBook.prototype.getName = function(){ 
   return ArtBook.superClass.getName.call(this)+"!!!"; 
 }