자 바스 크 립 트 의 원형 을 통속 적 이 고 알 기 쉬 운 언어 로 소개 하 다.

이것 은 번역문, 원문 주소 입 니 다.http://javascriptissexy.com/javascript-prototype-in-plain-detailed-language/#
원형 (prototype) 은 모든 자 바스 크 립 트 개발 자가 이해 해 야 할 기본 개념 으로 본 고의 목 표 는 자 바스 크 립 트 의 원형 을 통속 적 이 고 상세 하 게 해석 하 는 것 이다.만약 당신 이 이 박문 을 다 읽 은 후에 도 자 바스 크 립 트 의 원형 을 이해 하지 못 한다 면, 당신 의 문 제 를 아래 의 평론 에 쓰 십시오. 저 는 모든 질문 에 대답 할 것 입 니 다.
자 바스 크 립 트 의 원형 을 이해 하기 위해 서 는 자 바스 크 립 트 의 대상 을 이해 해 야 합 니 다.대상 에 대해 잘 모 르 시 면 제 글 을 읽 으 셔 야 합 니 다.그리고 속성 이 함수 에서 정의 하 는 변수 라 는 것 을 알 아야 합 니 다.
JavaScript 에는 서로 관련 된 원형 이라는 개념 이 있 습 니 다.
1. 우선, 모든 JavaScript 함수 에 원형 속성 이 있 습 니 다. 계승 이 필요 할 때 이 원형 속성 에 속성 과 방법 을 추가 합 니 다.이 원형 속성 은 매 거 할 수 없습니다. for / in 순환 에서 가 져 올 수 없습니다.하지만 FireFox 와 대부분의 버 전의 Safari 와 Chrome 브 라 우 저 는 가 있 습 니 다.proto__'위' 속성 (선택 방식) 은 대상 의 원형 속성 에 접근 할 수 있 습 니 다.너 는 아마 이 걸 써 본 적 이 없 을 거 야proto__의사 속성 이지 만 존재 하 는 것 을 알 아야 합 니 다. 또한 일부 브 라 우 저 에서 대상 의 원형 속성 을 방문 하 는 간단 한 방법 입 니 다.
대상 프로 토 타 입 은 주로 계승 에 사 용 됩 니 다. 대상 의 프로 토 타 입 속성 증가 방법 과 속성 은 이 함수 의 인 스 턴 스 에 존재 합 니 다.
다음은 원형 속성 계승 을 간단하게 사용 하 는 예 입 니 다. (뒤에 계승 에 관 한 내용 이 더 있 습 니 다)

function PrintStuff (myDocuments) {
this.documents = myDocuments;
}

//   PrintStuff         print ()，        （  ）         
PrintStuff.prototype.print = function () {
console.log(this.documents);
}

//     PrintStuff ()        ，          PrintStuff       。
var newObj = new PrintStuff ("I am a new Object and I can print.");

// newObj     PrintStuff        ，    print。  newObj      print，               print()。
newObj.print (); //I am a new Object and I can print.

2. 두 번 째 자 바스 크 립 트 원형 에 대한 개념 은 원형 특성 이다.원형 특성 을 이 대상 의 한 성질 로 생각 하기;이 성질 은 이 대상 의 '부모' 를 나타 낸다.한 마디 로 하면 대상 의 원형 특성 은 대상 의 '부모' - 이 대상 이 그 속성 을 얻 는 곳 으로 볼 수 있다.대상 특성 은 흔히 원형 대상 이 라 고 불 리 며 대상 을 만 들 때 자동 으로 만들어 집 니 다.이에 대해 모든 대상 은 다른 대상 에 게 서 속성 을 계승 하고 이곳 의 '어떤 다른 대상' 은 해당 대상 의 원형 특성 이나 '부모' 라 고 설명 했다.(원형 특성 을 혈연관계 나 부모 로 상상 할 수 있다).위의 예 코드 에서 new Obj 의 원형 은 PrintStuff. prototype 입 니 다.
주의: 모든 대상 은 특성 이 있 습 니 다. 대상 속성 과 자신의 특성 이 있 습 니 다.대상 특성 은 원형, 클래스, 확장 특성 입 니 다.이것들 은 우리 가 두 번 째 예 에서 토론 해 야 할 원형 특성 이다.
그리고 주의해 야 할 것 이 있 습 니 다. "위" 속성proto__대상 의 원형 대상 을 포함 합 니 다.

    
    
           ，               。                  ，                。
  ：

function Account () {
}
//        Account     userAccount
var userAccount = new Account (); 

  ，             ，               。                              （       ）。

//        Object () 
var myObj = new Object ();
//          myObj     ：
console.log(myObj.constructor); // Object()

//      : Account ()     
var userAccount = new Account (); 
//    userAccount     
console.log(userAccount.constructor); // Account()

new Object () 또는 대상 식 으로 만 든 대상 의 프로 토 타 입 특성
대상 식 이나 구조 함수 Object 로 만 든 모든 대상 은 Object. prototype 에서 계승 합 니 다.따라서 Object. prototype 은 Object () 또는 (곶 으로 만 든 대상 의 원형 특성 (또는 원형 대상) 입 니 다.Object. prototype 자 체 는 다른 대상 에 게 서 어떠한 방법 이나 속성 도 계승 하지 않 았 습 니 다.

//   userAccount    Object             Object.prototype.
var userAccount = new Object ();

//               userAccount；   userAccount   Object；  ，       userAccount  ，       Object.prototype。
var userAccount = {name: “Mike”} 

구조 함수 로 만 든 대상 의 원형 특성
새로운 키워드 와 Object () 가 아 닌 구조 함수 로 만 든 대상 은 이 구조 함수 에서 구조 함 수 를 얻 을 수 있 습 니 다.
예 를 들 면:

function Account () {

}
var userAccount = new Account () //      Account ()   userAccount          （    ）   Account.prototype。

   ，    ，  var myArray = new Array ()， Array.prototype        Array.prototype   。

따라서 대상 이 생 성 될 때 두 가지 일반적인 방식 으로 대상 의 원형 특성 을 만 듭 니 다.
1. 대상 이 대상 식 (var new Obj = {}) 을 사용 하여 만 들 어 졌 다 면 Object. prototype 에서 속성 을 계승 하고 원형 대상 (또는 원형 특성) 은 Object. prototype 이 라 고 말 합 니 다.
2. 대상 이 new Object () 또는 new Fruit () 또는 new Array () 또는 new Anything () 을 사용 하여 만 든 것 이 라면 자체 구조 함수 (Object (), Fruit (), Array (), or Anything () 를 계승 합 니 다.예 를 들 어 하나의 함수, 예 를 들 어 Fruit () 를 사용 하여 우리 가 새로운 과일 인 스 턴 스 (var aFruit = new Fruit () 를 만 들 때마다 이 새로운 인 스 턴 스 의 원형 은 구조 함수 Fruit, 즉 Fruit. prototype 에서 나온다.new Array () 로 만 든 모든 대상 은 Array. prototype 을 원형 으로 합 니 다.구조 함수 Object (Obj (), 예 를 들 어 var anObj = new Object () 로 만 든 대상 은 Object. prototype 에서 계승 합 니 다.
그리고 하나 더 알 아야 할 것 은 ECMAScript 5 에서 새로운 대상 의 원형 을 지정 할 수 있 는 방법 Object. create () 로 대상 을 만 들 수 있 습 니 다.우 리 는 후속 글 에서 ECMAScript 5 를 배 울 것 이다.
원형 은 왜 중요 하고 언제 원형 을 사용 합 니까?
JavaScript 에서 원형 은 두 가지 중요 한 용도 가 있 습 니 다. 앞에서 언급 한 것 처럼:
1. 원형 속성: 원형 기반 계승
자 바스 크 립 트 에서 원형 이 중요 한 이 유 는 자 바스 크 립 트 가 (대부분의 대상 을 대상 으로 하 는 언어 모든) 고전 기반 클래스 의 계승 이 없 기 때문에 자 바스 크 립 트 의 모든 계승 은 원형 속성 을 통 해 이 루어 집 니 다.자 바스 크 립 트 는 원형 계승 을 바탕 으로 하 는 메커니즘 을 가지 고 있다.계승 은 대상 (또는 다른 언어 중의 클래스) 이 다른 대상 (또는 클래스) 의 속성 과 방법 을 계승 할 수 있 는 프로 그래 밍 규범 이다.자 바스 크 립 트 에서 원형 을 통 해 계승 을 실현 합 니 다.예 를 들 어 Fruit 함수 (즉 대상 입 니 다. 모든 JavaScript 의 함수 가 대상 이기 때 문 입 니 다) 를 만 들 고 이 Fruit 의 원형 속성 에 속성 과 방법 을 추가 하면 모든 Fruit 함수 의 인 스 턴 스 는 Fruit 의 모든 속성 과 방법 을 계승 합 니 다.
JavaScript 의 계승 예제:

function Plant () {
this.country = "Mexico";
this.isOrganic = true;
}

//   showNameAndColor   Plant    
Plant.prototype.showNameAndColor =  function () {
console.log("I am a " + this.name + " and my color is " + this.color);
}

//    amIOrganic   Plant    
Plant.prototype.amIOrganic = function () {
if (this.isOrganic)
console.log("I am organic, Baby!");
}

function Fruit (fruitName, fruitColor) {
this.name = fruitName;
this.color = fruitColor;
}

// Fruit     Plant     ，     Plant.prototype        
Fruit.prototype = new Plant ();

//      Fruit      aBanana
var aBanana = new Fruit ("Banana", "Yellow");

//   aBanana    aBanana    Fruit.prototype name  :
console.log(aBanana.name); // Banana

//   Fruit    Plant.prototype   showNameAndColor。 aBanana         Plant Fruit        
console.log(aBanana.showNameAndColor()); // I am a Banana and my color is yellow.

방법 쇼 NameAndColor 는 대상 Plant. prototype 의 원형 체인 에서 정의 되 었 음 에 도 불구 하고 이 방법 은 대상 aBanana 에 의 해 계승 되 었 음 을 알 수 있 습 니 다.
실제로 구조 함수 Fruit () 를 사용 하 는 모든 대상 은 Fruit. prototype 의 모든 속성 과 방법, 그리고 Fruit 에서 온 원형 Plant. prototype 의 모든 속성 과 방법 을 계승 합 니 다.이것 이 바로 자 바스 크 립 트 에서 계승 을 실현 하 는 주요 방식 과 원형 체인 이 이 과정 에서 맡 은 통합 역할 이다.
자 바스 크 립 트 의 대상 프로 그래 밍 에 대한 더 깊 은 내용 은 Nicholas Zakas 의 Principles of Object - Oriented Programming in JavaScript (이 책 은 14.99 달러) 를 읽 으 십시오.
2. 원형 특성: 대상 의 속성 가 져 오기
원형 은 대상 을 얻 는 방법 과 속성 에 도 중요 하 다.원형 특성 (또는 원형 대상) 은 계승 가능 한 속성의 '부모' 대상 으로 계승 가능 한 속성 은 원래 이러한 '부모' 대상 에 의 해 정 의 된 것 이다.이것 은 당신 이 당신 의 아버지 - 그 는 당신 의 '원형 부모' 에서 성 을 물 려 받 을 수 있 는 것 과 비슷 합 니 다.만약 우리 가 당신 의 성 이 어디에서 왔 는 지 알 고 싶다 면, 우 리 는 먼저 당신 이 자신 에 게 이 성 을 지 었 는 지 볼 것 입 니 다.만약 그렇지 않다 면, 우 리 는 당신 이 당신 의 아버지 로부터 이 성 을 물 려 받 았 는 지 계속 살 펴 볼 것 입 니 다.만약 이 성 이 당신 아버지의 것 이 아니라면, 우 리 는 당신 아버지의 성 (당신 아버지의 원형 아버지) 을 계속 살 펴 볼 것 입 니 다.
이와 유사 하 게 대상 의 원형 을 가 져 오 려 면 대상 의 속성 부터 찾 아야 합 니 다.JS 가 실 행 될 때 이 속성 을 찾 을 수 없다 면 이 대상 의 원형 - 이 대상 이 속성 을 얻 은 곳 으로 가서 이 속성 을 볼 것 입 니 다.
대상 의 원형 에서 이 속성 을 발견 하지 못 하면 해당 속성 에 대한 검색 은 대상 의 원형 (대상 의 아버지의 아버지 - 할아버지) 에 게 이전 된다.이렇게 원형 이 없 을 때 까지 계속 되 었 다.이것 은 바로 원형 체인 이다. 대상 의 원형 에서 대상 의 원형 까지 끊임없이 위로 향 하 는 체인 이다.그리고 자 바스 크 립 트 는 이 원형 체인 으로 대상 의 속성 과 방법 을 찾 습 니 다.
만약 에 특정한 속성 이 전체 원형 체인 에 있 는 모든 대상 의 원형 에 존재 하지 않 는 다 면 이 속성 은 존재 하지 않 고 undefined 로 돌아 갈 것 입 니 다.
이러한 원형 체인 체 제 는 본질 적 으로 우리 가 위 에서 토론 한 원형 을 바탕 으로 하 는 계승 과 같은 개념 이다. 다만 여기 서 우 리 는 자바 스 크 립 트 가 대상 의 원형 을 통 해 대상 의 속성 과 방법 을 어떻게 얻 는 지 더욱 중시한다.
이 예 는 대상 의 원형 대상 의 원형 체인 을 보 여 줍 니 다.

var myFriends = {name: "Pete"};

//         name，        myFriends  ，         name，       myFriends     name。                 。
console.log(myFriends.name);

//      ，     myFriends      toString ()，             myFriends     toString，       myFriends   （ myFriends         ）  。

//                   Object.prototype，  toString   Object.prototype    －－       Object.prototype   ，         
myFriends.toString ();

    
         Object.prototype   
 JavaScript              Object.prototype。                ，hasOwnProperty (), isPrototypeOf (), propertyIsEnumerable (), toLocaleString (), toString (), and valueOf ()。ECMAScript 5         Object.prototype   。

            :
function People () {
this.superstar = "Michael Jackson";
}
//  People      "athlete"  "athlete"            People ()       。 
People.prototype.athlete = "Tiger Woods";

var famousPerson = new People ();
famousPerson.superstar = "Steve Jobs";

//  superstar          famousPerson     superstar，               ，          。         famousPerson     famousPerson   superstar，    superstar               。
console.log (famousPerson.superstar); // Steve Jobs

//    ECMAScript 5            ，                      。

//       famousPerson  (People.prototype)   ，    athlete     famousPerson     。
console.log (famousPerson.athlete); // Tiger Woods

//      ，            Object.prototype      toString，        Fruit   －－          ，          Object.prototype
console.log (famousPerson.toString()); // [object Object]

이미 만들어 진 구조 함수 (Array (), Number (), String (), etc.) 는 모두 구조 함수 Object 에 의 해 만들어 진 것 이기 때문에 그들의 원형 은 Object. prototype 이다.
2 월 7 일 자 바스 크 립 트 원형 에 대한 테스트 를 다시 시작 할 수 있 습 니 다.
추가 정보
자 바스 크 립 트 대상 에 대한 내용 은 David Flanagan 이 쓴 자 바스 크 립 트: The Definitive Guide (6 판, 2011 년 5 월) 책의 6 장 을 읽 어 보 세 요.