프로토타입을 사용하여 자신만의 방법을 정의하는 방법에 대한 간략한 분석_기본 지식

프로토타입은 특정 클래스의 객체에 대해 IE 4 이상 버전에서 도입된 메소드인데, 특이한 점은 클래스의 객체에 메소드를 추가하는 메소드라는 것입니다! 다소 혼란스럽게 들릴 수도 있지만 걱정하지 마세요. 아래 예를 통해 이 특별한 방법을 설명하겠습니다.

먼저 클래스의 개념을 이해해야 합니다. JavaScript 자체는 객체지향 언어이며, 관련된 요소는 해당 속성에 따라 특정 클래스에 연결됩니다. 일반적인 클래스에는 배열 변수(Array), 논리 변수(Boolean), 날짜 변수(Date), 구조 변수(Function), 숫자 변수(Number), 객체 변수(Object), 문자열 변수(String) 등이 포함됩니다. 배열의 푸시 메소드, 날짜의 시리즈 가져오기 메소드, 문자열의 분할 메소드 등과 같은 관련 클래스 메소드도 프로그래머가 자주 사용합니다(여기서 클래스 주의와 속성 전송 메소드를 구별해야 함). .,

그런데 실제 프로그래밍 과정에서 기존 방식의 단점을 느끼시나요? 프로토타입 방식이 탄생했습니다! 아래에서는 예제를 통해 얕은 것부터 깊은 것까지 프로토타입의 구체적인 사용법을 설명합니다.

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

(1) Number.add(num): 함수, 숫자 더하기
구현 방법: Number.prototype.add = function(num){return(this num);}
테스트: 경고((3).add(15)) -> 18 표시

(2) Boolean.rev(): 함수, 불리언 변수 반전
구현 방법: Boolean.prototype.rev = function(){return(!this);}
테스트: 경고((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 < 인수.길이; i ) {
this[currentLength i ] = 인수 [i];
}
return this.length;
}

이해하기 어렵지 않으시겠죠? 비유하자면 Array.pop을 향상하여 임의의 위치에서 요소 수를 삭제하는 방법을 고려할 수 있습니다(특정 코드는 자세히 설명되지 않음)

(2) String.length
함수: 실제로는 String 클래스의 속성이지만 JavaScript에서는 전각과 반각을 모두 하나의 문자로 처리하므로 작동하지 않을 수 있습니다. 일부 실제 응용 프로그램에서는 특정 문제가 발생할 수 있습니다. 이제 이 단점을 보완하기 위해 프로토타입을 사용합니다.

구현 방법:

코드 복사 코드는 다음과 같습니다.

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

테스트: 경고("aaalaalaaa".Tlength()) -> 디스플레이 8

여기에서는 일부 정규식 방법과 전각 문자의 인코딩 원리가 사용됩니다. 이는 다른 두 가지 범주에 속하므로 관련 자료를 참조하지 않습니다.

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) ;
if(!mode) return str;
var n = str.Tlength() - str.length;
num = num -parseInt(n/2);
return this.substr( 0,num ; 왼쪽(4,true)) ->
이 메서드는 위에서 언급한 String.Tlength() 메서드를 사용하며, 몇 가지 좋은 새로운 메서드를 사용자 정의 메서드 간에 결합할 수도 있습니다!

(2) Date.DayDiff()
기능: 두 날짜 변수 사이의 간격(년, 월, 일, 주)을 계산합니다.

구현 방법:

코드 복사

코드는 다음과 같습니다.Date.prototype.DayDiff = function(cDate ,mode){ try{ cDate.getYear(); }catch(e){

return(0);

}
var base =6 0*60* 24 *1000;
var result = Math.abs(this - cDate);
switch(mode){
case "y":
result/=base*365;
Break; break;
기본값:
result/=base;
break;
}
return(Math.floor(result));
}


Test :alert(( new Date()).DayDiff((new Date(2002,0,1)))) -> 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
이 방법은 주로 프로토타입 방법에서도 재귀 방법이 가능하다는 것을 보여줍니다!