JavaScript 프로 토 타 입 체인 과 계승 작업 사례 총화

본 논문 의 사례 는 JavaScript 원형 체인 과 계승 작업 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
1.자 바스 크 립 트 계승
JavaScript 계승 은 대상 과 대상 사이 에서 발생 하 는 것 이 고 원형 체인 은 계승 을 실현 하 는 주요 한 방법 이 라 고 할 수 있다.
1.1 원형 체인
원형 을 이용 하여 하나의 인용 유형 으로 하여 금 다른 인용 유형의 속성 과 방법 을 계승 하 게 합 니 다.
구조 함수 에 prototype(함수 마다 있 음)이 있 습 니 다.그의 원형 대상 을 가리 키 고 모든 원형 대상 에 도 하나의 constructor 속성 이 있 으 며 원 구조 함 수 를 가리 키 고 있 습 니 다.구조 함 수 를 통 해 만 든 새 대상 에는 직접 접근 할 수 없 는[proto]속성 이 있어 대상 도 구조 함수 의 원형 을 가리 키 게 합 니 다.이것 은 대상 도 원형 중의 방법 과 속성 을 얻 게 한다.

대상 의 속성 이나 방법 을 방문 할 때 대상 에 이 속성 이나 방법 이 없 으 면 이전 원형 대상 에서 이 속성 이나 방법 을 찾 습 니 다.찾 으 면 이 속성 을 되 돌려 주 고 없 으 면 위의 원형 에서 이 속성 을 계속 찾 습 니 다.
1.2 구조 함수 의 원형 체인 계승

function Father(name,age){
    this.name=name;
    this.age=age;
}
Father.prototype.eat=function(){ //     eat  
    console.log(this.name+"   ");
}
var f1=new Father("  ",20); //     f1, [[proto]]     
function Son(){
}
Son.prototype=f1; //       prototype         ,     ――  
var s1=new Son(); //      
s1.eat(); //     

실행 결과:

주의:
Son.prototypeFather 를 가리 킬 때 그 는 이미 아버지 유형의 Son 이다.
②:s1.eat();s1 에는 이 방법 이 없습니다.이 방법 은 부모 유형의 원형 에서 s1 이 방문 할 때 현재 s1 에서 찾 습 니 다.없 으 면 그 가 가리 키 는 원형 에서 이 방법 을 찾 습 니 다.없 으 면 위의 원형 에서 계속 찾 습 니 다.이렇게 해서 원형 체인 이 형성 되 었 다.
③:원형 체인 을 통 해 계승 을 실현 했다.
약자:

var f1=new Father;
var Son.prototype=f1
//       :
var Son.prototypr=new Father(); //           ,        


1.3 기본 정상 프로 토 타 입
기본 최상 위 프로 토 타 입:
모든 유형 이 어떤 유형 을 계승 하 는 지 밝 히 지 않 았 을 때 Object 형식 을 기본적으로 계승 합 니 다.
object 에 도 prototype 이 그의 object 원형 을 가리 키 고 object 에 도[[proto]]가 있 습 니 다.다만 그 가 가리 키 는 것 은 null 입 니 다.무시 할 수 있다.
object 의 많은 방법 은 object 의 원형 에 존재 합 니 다.
원형 체인 에서 현재 위치 에서 원형 체인 의 맨 위 위치 까지 계속 위로 접근 합 니 다.
1.4 테스트 데이터
type:of 측정 데이터 의 유형 은 기본 형식 데이터 만 테스트 하 는 것 이 좋 습 니 다.기본 형식 을 제외 하고 모두 object 로 돌아 가 야 합 니 다.

console.log(typeof 123) //number
console.log(typeof "ccsa ") //string

intnaceof 테스트 대상 은 부모 대상 에 속 하지 않 는 유형 입 니 다.

function Father(name){
}
var f1=new Father();
console.log(f1 instanceof Father); //true

실행 결과:
isPrototypeOf( ) 원형 대상 에 속 하 는 방법 으로 이 대상 이 이 원형 체인 에 있 는 지 판단 하고 사용한다. .prototype.isPrototypeOf( )

function Father(){
}
function Son(){
}
Son.prototype=new Father;
var s1=new son();
console.log(Father.prototype.isPrototypeOf(s1));  //true
console.log(Object.prototype.isPrototypeOf(s1));  //true

1.5 차출
차용:차용 구조 함수 호출 사칭 계승,차용 실현 의 계승 은 진정한 계승 이 아니 라 구조 함수 중의 속성 이나 방법 을 차용 할 뿐이다.
apply,call。

function Fn(name,age){
   this.name=name;
   this.age=20;
}
function Son(name,age,sex){
   Fn.call(this,name,age)        //    Fn;
   this.sex=sex;
};
var s1=new Son("  ",20," ");
console.log(s1);


메모:차출 단점:콜 은 계승 을 사칭 하 는 것 이지 진정한 계승 이 아니 기 때문에 원 구조 함수 의 원형 중의 속성 이나 방법 에 접근 할 수 없습니다.
1.6 그룹 상속
조합 구조 함수 의 차출 계승 과 원형 의 계승 장점:

function Fn(name,age){
   this.name=name; //         
   this.age=age;
   if((typeof Fn.prototype.eat)!="funciton"){ //           ,     
    Fn.prototype.eat=function(){ //       
      console.log(this.name+"   ");
    }
   }
}
function Son(name,age,sex){ //        
   Fn.call(this,name,age) //  Fn()   
   this.sex=sex;
};
Son.prototype=new Fn(); //Son.prototype      ,     ,      eat  ,
var s1=new Son("  ",20," "); //     ,     call  Fn  ,    s1    eat  
callconsole.log(s1); //  call       
s1.eat();

주의:Son.prototype=new Fn();이 문 구 는 Son 이 아버지 유형 Fn 을 계승 하 는 것 을 실현 했다.Son 은 부모 유형 이 만 든 대상 을 가리 키 고 부모 유형의 대상 은 자신의 속성 을 가지 고 있 으 며 하위 유형의 원형 이 되 었 습 니 다.그러면 그 중의 속성 은 공유 하 는 것 이 되 지 않 습 니까?그러나 앞 에Fn.call( )도 사용 되 었 다.이 문 구 는 부모 류 구조 함수 속성 을 빌려 하위 유형의 원형 을 덮어 쓰 는 속성 에 해당 한다.
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,,,javascript 대상 입문 강좌,JavaScript 오류 및 디 버 깅 기술 요약,JavaScript 데이터 구조 와 알고리즘 기술 총화JavaScript 스 트 리밍 알고리즘 및 기술 총화.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.

좋은 웹페이지 즐겨찾기