[js 고수 의 길]javascript 의 원형(prototype)대상,원형 체인 인 스 턴 스 를 도해 합 니 다.

우 리 는 원형 방식 을 통 해 여러 사례 의 방법 공유 문 제 를 해결 했다.그 다음 에 우 리 는 원형(prototype),원형 체인 의 경 위 를 파악 했다.

function CreateObj(uName) {
   this.userName = uName;
  }
  CreateObj.prototype.showUserName = function(){
   return this.userName;
  }
  var obj1 = new CreateObj('ghostwu');
  var obj2 = new CreateObj('  ');

1.모든 함수 에 원형 속성(prototype)이 있 습 니 다.이 속성 은 포인터 로 구조 함수 의 원형 대상(Create Obj.prototype)을 가리 키 고 있 습 니 다.위의 그림 에서 첫 번 째 녹색 선 과 같 습 니 다.
2.기본 적 인 상황 에서 모든 원형 대상 은 자동 으로 constructor 속성 을 얻 습 니 다.이 속성의 역할 은 앞에서 설명 한 바 와 같 습 니 다.이 속성 은 prototype 속성 이 있 는 함 수 를 포함 합 니 다.위의 그림 과 같은 두 번 째 녹색 선 을 포함 합 니 다.
3.모든 인 스 턴 스(구조 함수 new 를 통 해 나 온,원형 대상[예 를 들 어 Create Obj.prototype,위의 그림 은 아직 그리 지 않 았 습 니 다]등)에는 암시 적 원형(proto__)，이 지침 은 실례 적 인 구조 함수 의 원형 대상 을 가리 키 며,
위의 그림 에서 세 번 째 라인 과 네 번 째 라인 과 같 습 니 다.obj 1 의 구조 함 수 는 Create Obj 이 고 Create Obj 의 원형 대상 은 Create Obj.prototype 이 며 obj 2 는 같 습 니 다.그래서:
obj1.__proto__ === CreateObj.prototype //true
obj2.__proto__ === CreateObj.prototype //true
4.구조 함수 에 this 에 값 을 부여 하 는 속성 과 방법 을 쓰 고 그림 을 그 리 는 과정 에서 대상 위 에 그 려 줍 니 다.예 를 들 어 userName 은 대상 에 게 값 을 부여 하 는 속성 이기 때문에 obj 1 과 obj 2 두 대상 에 하나의 속성 userName 이 존재 합 니 다.
5.원형 대상 에 쓰 는 방법 이나 속성 은 원형 대상 에 그 려 야 한다.예 를 들 어

CreateObj.prototype.showUserName = function(){
return this.userName;
}

showUsername 이 방법 은 그림 에 Create Obj.prototype 을 그 려 야 합 니 다.
6.대상 이 속성 과 방법 을 방문 할 때 그의 방문 규칙 은(근접 원칙)이 고 규칙 은 다음 과 같다.
인 스 턴 스 위 에 속성 이나 방법 이 존재 할 때 인 스 턴 스 위 에 있 는 것 을 직접 사용 합 니 다.
인 스 턴 스 위 에 속성 과 방법 이 존재 하지 않 으 면 인 스 턴 스 를 따라proto__포인터 가 가리 키 는 원형 대상 을 계속 위로 찾 습 니 다.찾 지 못 하면 값 은 undefined 입 니 다.

console.log( obj1.showUserName() ); //ghostwu
console.log( obj2.showUserName() ); //  

obj 1,obj 2 위 에 쇼 UserName 이 존재 하지 않 기 때문에proto__CreateObj.prototype 프로 토 타 입 대상 의 쇼 UserName 방법 을 찾 습 니 다.
Create Obj.prototype 프로 토 타 입 대상 에 있 는 쇼 UserName 주석 을 지우 면 ob1.쇼 UserName 과 ob2.쇼 UserName 이 잘못 보 고 됩 니 다.

// CreateObj.prototype.showUserName = function(){
// return this.userName;
// }

function CreateObj(uName) {
   this.userName = uName;
   this.showUserName = function(){
    return '100';
   }
  }
  CreateObj.prototype.showUserName = function(){
   return this.userName;
  }

  var obj1 = new CreateObj('ghostwu');
  var obj2 = new CreateObj('  ');

  console.log( obj1.showUserName() ); //100
  console.log( obj2.showUserName() ); //100

구조 함수 에 this 에 show UserName 방법 을 추가 하면 obj 1 과 obj 2 는 this 위 에 있 는 두 가지 방법 이 그림 의 인 스 턴 스 에 그 려 지기 때문에:

console.log( obj1.showUserName === obj2.showUserName ); //false

이제 구조 함수 의 원형 대상(prototype)에 속성 과 방법 을 쓰 면 여러 개의 인 스 턴 스 속성 과 방법의 공유 원 리 를 실현 할 수 있다 는 것 을 알 수 있 을 것 이다.
무엇이 원형 체인 입 니까?
앞에서 말 했 듯 이 모든 인 스 턴 스(원형 대상 포함)는 암시 적 원형proto__，그럼 Create Obj.prototype 이라는 원형 대상,그의proto__누 구 를 가리 키 죠?

function CreateObj(uName) {
   this.userName = uName;
   this.showUserName = function () {
    return '100';
   }
  }
  CreateObj.prototype.showUserName = function () {
   return this.userName;
  }

  console.log( CreateObj.prototype.__proto__ ); //  Object.prototype
  console.log( CreateObj.prototype.__proto__ === Object.prototype ); //true

CreateObj.prototype.__proto__Object.prototype 을 가리 키 며,전체 연산 자(===)테스트 를 통 해 true 입 니 다.
Object.prototype.__proto__ NULL 을 가리 키 고 있 습 니 다.
이것 이 바로 원형 체인 입 니 다.암시 적 원형 을 통 해 구조 함수 들 을 층 층 이 연결 시 킵 니 다.위의 그림 을 통 해 사용자 정의 대상 이 왜 toString,value Of 를 호출 할 수 있 는 지 알 수 있 습 니 다.
모든 대상 은 Object 에서 물 려 받 기 때문이다.
이상 의[js 고수 의 길]도해 자바 script 의 원형(prototype)대상,원형 체인 인 스 턴 스 는 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시 기 를 바 랍 니 다.여러분 들 도 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.