OOP 및 jQuery(3): 원형

이 시리즈의 문장은 석천창작, 이송봉번역, W3ctech.com 최초, 도령 커뮤니티 전재.
 
 
'OOP과 jQuery'는'디코딩 jQuery'시리즈 중의 하위 시리즈로 주로 jQuery의 내부 구성과 관련된 OOP(Object Oriented Programming, 대상을 대상으로 프로그래밍) 개념을 논의한다.
 
첫 번째 글은 jQuery 코드를 예로 삼아 변수(데이터)와 함수의 개념을 설명했다.두 번째 글은 jQuery를 통해 대상을 소개했다.
 
이 문장에서우리 원형(prototype)에 대해 이야기합시다.JavaScript는 원형을 바탕으로 하는 언어이기 때문에 원형은 이 언어에서 매우 중요한 개념이다.그럼 유형에 기초한 언어는?이 문장은 그것과 원형에 기초한 언어를 비교할 수 있습니까?아니야, 적어도 지금은 아니야.나는 원형을 이해하려면 반드시 종류와 원형을 비교해야 하는 것은 아니라고 생각한다.만일 네가 다른 사람에게 일본어를 가르치고 싶다면, 반드시 그로 하여금 먼저 그리스어를 배우게 해야 하는 것은 아니다.물론 이 사람이 일본어를 익힌 후에 그리스어를 배우는 데 도움이 될 것이다.) 다음은 원형이 무엇인지, 그리고 jQuery가 원형을 어떻게 사용하는지 살펴보자.
 
1. 함수마다 원형이 있고 원형은 대상이다
 
JavaScirpt 콘솔에서 core를 테스트할 수 있습니다.js 파일:
 

var jQuery = function(selector, context) {
      // .......
}

console.log(typeof jQuery.prototype);

//     

 
2. 원형에 방법과 속성을 추가
 
함수에 메서드와 속성을 추가하는 일반적인 방법은 다음과 같습니다.
 

jQuery.prototype.constructor = jQuery;
jQuery.prototype.init = function(selector, context, rootjQuery) {
       // .......
}

 
jQuery의 원형(대략에서js의 78행)은 jQuery 함수의prototype 속성에 저장되어 추출되면 다음과 같다. (78행 코드에 실제로 jQuery.fn이 하나 더 있는데 이것은 jQuery.prototype의 별명에 불과하다. 간단하게 보기 위해서는 무시한다).
 

jQuery.prototype = {
       constructor : jQuery,
       init : function(selector, context, rootjQuery) {
            // .......
       }
}

 
상기 jQuery 코드에 대해 말하자면, 이것은 사실 새로운 대상으로 최초의 원형을 완전히 다시 쓰고 교체한 것이다.그렇다면 원형에 속성을 하나씩 추가하는 것과 원형을 완전히 다시 쓰는 것은 어떤 차이가 있습니까?크게 다르지 않습니다. 이것은 하나의 의미의 두 가지 다른 표현 방식과 같습니다. 예를 들어 다음과 같습니다.
 
나는 녹색 고양이 한 마리, 파란색 고양이 한 마리, 분홍색 고양이 한 마리를 가지고 있다고 말할 수 있다.
나는 녹색, 파란색, 분홍색 세 마리의 고양이가 있다.
 
실제로 함수에 속성과 메서드를 추가하는 세 번째 방법도 있습니다.
 

function jQuery() {
       this.constructor = jQuery;
       this.init = function(selector, context, rootjQuery) {
            // ........
       }
}

 
3. 원형을 사용하는 방법과 속성
 
메서드와 속성을 사용하려면 새 객체를 작성해야 합니다.다음은 jQuery에서 새 객체를 만드는 방법입니다여섯 번째 줄에 있어요..
 

new jQuery.fn.init(selector, context, rootjQuery);

 
또한 약 303줄에 있어요.:
 

jQuery.fn.init.prototype = jQuery.fn;

 
아이고, jQuery 함수, 대상, jQuery.fn, 원형, 그리고 init 사이에는 어떤 관계가 있습니까?
 
다음 편...
다음 편에서 우리는 계속해서 jQuery의 핵심을 탐색하고 jQuery를 소개할 것이다.fn, 원형과 init 방법 간의 관계.

var jQuery = function() {
      // jQuery         “    ”init    
      return new jQuery.fn.init(selector, context, rootjQuery);
}

jQuery.fn = jQuery.prototype = {
        init : function(selector, context, rootjQuery) {
            // ......
        }
}

//  init    jQuery  ，        
jQuery.fn.init.prototype = jQuery.fn