js의 프로토타입에 대한 자세한 설명

프로토타입은 특정 클래스의 객체에 대해 IE 4 이상 버전에 도입된 메소드이며, 그 특징은 클래스의 객체에 메소드를 추가하는 메소드입니다! 조금 혼란스럽게 들릴 수도 있지만 걱정하지 마십시오. 아래 예를 통해 이 특별한 방법을 설명하겠습니다.

우선, JavaScript 자체가 객체 지향 언어라는 개념과 관련 요소를 이해해야 합니다. 그 안에는 속성에 따라 특정 클래스에 연결됩니다. 일반적인 클래스에는 배열 변수(Array), 논리 변수(Boolean), 날짜 변수(Date), 구조 변수(Function), 숫자 변수(Number), 개체 변수(Object), 문자열 변수(String) 등이 포함됩니다. 배열의 푸시 메소드, 날짜의 시리즈 가져오기 메소드, 문자열의 분할 메소드 등과 같은 관련 클래스 메소드도 프로그래머가 자주 사용합니다(여기서 클래스 주의와 속성 전송 메소드를 구별해야 함). .,
그런데 실제 프로그래밍 과정에서 기존 방식의 단점을 느끼시나요? 프로토타입 방식이 탄생했습니다! 아래에서는 예제를 통해 프로토타입의 구체적인 사용법을 설명합니다.

1. 프로토타입을 이해하는 가장 간단한 예:

(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);}
Test: Alert((true).rev()) -> false 표시

예 아니요 아주 간단해요? 이 섹션에서는 독자들에게 다른 방법과 이 방법이 사용되는 방법에 대해 설명합니다.

2. 기존 메소드 구현 및 개선, 프로토타입 첫 소개:

(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 ffe6c7b847831eae05ddb2e1299ec15b Display 16
　여기서는 일부 정규 표현식 방법과 전각 문자의 인코딩 원리가 사용됩니다. 다른 두 가지 비교적 큰 범주에 대해서는 이 문서에서 설명하지 않습니다. 관련 자료를 참조하세요.

3. 새로운 기능을 구현하려면 프로토타입에 깊이 들어가십시오. 실제 프로그래밍에서 사용되는 것은 확실히 기존 방법의 향상뿐 아니라 더 많은 기능적 요구 사항입니다. 아래에서는 프로토타입을 사용하여 실제 문제를 해결하는 두 가지 예를 제공합니다. ：

(1) String.left()

문제: VB를 사용해 본 사람이라면 문자열의 왼쪽에서 n자를 가져오는 left 함수를 알지만, 단점은 전각과 반각이 모두 가능하다는 것입니다. 은 하나의 문자로 간주되므로 영어 혼합 레이아웃에서는 동일한 길이의 문자열을 가로챌 수 없습니다.
기능: 문자열 왼쪽에서 n자를 가로채서 전자와 반자 문자의 구분을 지원합니다.

구현 방법:

String.prototype.left = function(num,mode) {! If (!/D+/.Test (num)) return (this)

var str = this.substr (0, num); 모드) return str;
var n = str.tlength () - str.length;
         num = num -parseInt(n/2);
                                                      ~           .

테스트:
Alert("EaseWe Spaces".left(8)) -> EaseWe 공간 표시
Alert("EaseWe Spaces".left(8,true)) -> EaseWe 공백 표시
이 방법은 문자열을 사용합니다. 위에서 언급한 .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

　 물론 더 확장하여 응답 시간, 분, 심지어 초까지 얻을 수도 있습니다.

위 내용은 js의 프로토타입에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!