JavaScript: prototype 속성 사용 설명

출처: http://shinylife.net/blog/article.asp?id=455
       prototype 은 IE 4 와 그 이후 버 전에 도 입 된 바늘 이 특정한 대상 에 대한 방법 이 고 특별한 편 의 는 클래스 의 대상 에 게 방법 을 추가 하 는 방법 입 니 다!이 점 은 좀 복잡 하 게 들 릴 수 있 습 니 다. 서 두 르 지 마 세 요. 다음 에 저 는 사례 를 통 해 이 특수 한 방법 에 대해 설명 을 했 습 니 다. 우선, 우 리 는 먼저 유형의 개념 을 알 아야 합 니 다. JavaScript 자 체 는 대상 을 대상 으로 하 는 언어 이 고 관련 된 요 소 는 그 속성 에 따라 특정한 유형 에 의존 합 니 다.우리 가 흔히 볼 수 있 는 클래스 는 배열 변수 (Array), 논리 변수 (Boolean), 날짜 변수 (Date), 구조 변수 (Function), 수치 변수 (Number), 대상 변수 (Object), 문자열 변수 (String) 등 을 포함 하고 관련 된 클래스 의 방법 도 프로그래머 가 자주 사용 하 는 것 이다 (여기 서 클래스 의 주의 와 속성 을 구분 해 야 한다). 예 를 들 어 배열 의 push 방법,날짜 의 get 시리즈 방법, 문자열 의 split 방법 등 이 있 지만 실제 프로 그래 밍 과정 에서 기 존 방법의 부족 함 을 느 꼈 는 지 모 르 겠 습 니 다.prototype 방법 이 생 겨 났 습 니 다!프로 토 타 입의 구체 적 인 사용 방법 을 실례 를 통 해 간단하게 설명 하 겠 습 니 다.
 
 
        1. 가장 간단 한 예, prototype 에 대해 알 아 보기:
 
(1) Number. add (num): 역할, 숫자 더하기 실현 방법: Number. prototype. add = function (num) {return (this + num);} 시험: alert ((3). add (15) - > 18 (2) Boolean. rev (): 역할, 불 변 수 는 반 실현 방법: Boolean. prototype. rev = function () {return (! this);} 시험: alert (true). rev () - > false 를 표시 하 는 것 이 간단 하지 않 습 니까?이 절 은 단지 독자 에 게 또 하나의 방법 을 알려 주 는 것 일 뿐, 이런 방법 은 이렇게 운용 한 것 이다.
 
 
 
        2. 기 존 방법의 실현 과 강화, prototype 을 처음 알 게 되 었 습 니 다.
 
(1) Array. push (new element) 역할: 배열 끝 에 새로운 요 소 를 추가 하 는 방법:
 

　Array.prototype.push = function(new_element) {
        this[this.length]=new_element;
        return this.length;
    }

 
우리 가 그 를 한 번 에 여러 요 소 를 증가 시 킬 수 있 도록 한층 더 강화 합 시다!실현 방법:
 

　　Array.prototype.pushPro = function() {
        var currentLength = this.length;
        for (var i = 0; i < arguments.length; i++) {
            this[currentLength + i] = arguments[i];
        }
        return this.length;
    }

 
어렵 지 않 겠 죠?이런 식 으로 미 루 면 증강 Array. pop 을 통 해 임의의 위 치 를 삭제 하 는 방법 을 고려 해 볼 수 있 습 니 다. 임의의 여러 요소 (구체 적 인 코드 는 더 이상 자세히 말 하지 않 겠 습 니 다)
 
 
 
(2) String. length 역할: 이것 은 실제 적 으로 String 류 의 속성 입 니 다. 그러나 JavaScript 는 전 각, 반 각 을 하나의 문자 로 간주 하기 때문에 일부 실제 운용 에서 어느 정도 문 제 를 일 으 킬 수 있 습 니 다. 지금 우 리 는 prototype 을 통 해 이 부족 함 을 보완 합 니 다.실현 방법:
 

　　String.prototype.cnLength = function() {
        var arr=this.match(/[^\x00-\xff]/ig);
        return this.length+(arr==null?0:arr.length);
    }

 
시험: alert ("EaseWe 공간 Spaces". cnLength () - > 디 스 플레이 16 은 정규 표현 식 방법 과 전각 문자 의 인 코딩 원 리 를 사 용 했 습 니 다. 다른 두 가지 큰 유형 에 속 하기 때문에 본 고 는 설명 을 하지 않 고 관련 자 료 를 참고 하 시기 바 랍 니 다.
 
 
3. 새로운 기능 의 실현, 프로 토 타 입 깊이
 
        실제 프로 그래 밍 에서 사용 하 는 것 은 기 존의 방법의 강화 뿐만 아니 라 더 많은 실행 기능 에 대한 요구 도 있 을 것 입 니 다. 다음은 prototype 으로 실제 문 제 를 해결 하 는 두 가지 예 를 들 겠 습 니 다.
(1) String. left () 문제: vb 를 사용 한 적 이 있 는 사람 은 모두 left 함 수 를 알 고 있 을 것 입 니 다. 문자열 왼쪽 에서 n 개의 문 자 를 가 져 오지 만 전각, 반 각 을 하나의 문자 로 간주 하지 않 아 중 영문 혼 열 된 지면 에서 같은 길이 의 문자열 역할 을 차단 할 수 없습니다. 문자열 왼쪽 에서 n 개의 문 자 를 캡 처 합 니 다.그리고 전각 반 각 문자 의 구분 실현 방법 을 지원 합 니 다.
 

　　String.prototype.left = function(num,mode) {
        if(!/\d+/.test(num))return(this);
        var str = this.substr(0,num);
        if(!mode) return str;
        var n = str.Tlength() - str.length;
        num = num - parseInt(n/2);
        return this.substr(0,num);
    }

 
시험:     alert ("EaseWe 공간 공간". left (8) - > EaseWe 공간 표시     alert ("EaseWe 공간 Spaces". left (8, true) - > EaseWe 공본 을 표시 하 는 방법 은 위 에서 언급 한 String. Tlength () 방법 을 사 용 했 습 니 다. 사용자 정의 방법 사이 에 도 좋 은 새로운 방법 을 조합 할 수 있 습 니 다!
 
 
(2) Date. DayDiff () 역할: 두 날짜 형 변수의 간격 (년, 월, 일, 주) 실현 방법 을 계산 합 니 다.
 

　　Date.prototype.DayDiff = function(cDate,mode){
        try{
            cDate.getYear();
        }catch(e){
            return(0);
        }
        var base =60*60*24*1000;
        var result = Math.abs(this - cDate);
        switch(mode){
            case "y":
                result/=base*365;
                break;
            case "m":
                result/=base*365/12;
                break;
            case "w":
                result/=base*7;
                break;
            default:
                result/=base;
                break;
        }
        return(Math.floor(result));
    }

 
 
시험:
     alert ((new Date (). DayDiff ((new Date (2002, 0, 1))) - > 329 표시   alert ((new Date ()). DAyDiff ((new Date (2002, 0, 1), 'm') - > 10 을 표시 합 니 다. 물론 더 확장 하여 응답 시간, 분, 심지어 초 를 얻 을 수 있 습 니 다.
 
 
(3) Number. fact () 역할: 특정한 숫자의 곱셈 실현 방법:
 

　　Number.prototype.fact=function() {
        var num = Math.floor(this);
        if(num<0)return NaN;
        if(num==0 || num==1)
            return 1;
        else
            return (num*(num-1).fact());
    }

 
시험: alert (4). fact () - > 표시 24 이 방법 은 주로 재 귀적 인 방법 이 prototype 방법 에서 도 가능 하 다 는 것 을 설명 합 니 다!
 
 
      출처: http://shinylife.net/blog/article.asp?id=455