JavaScript 프로토타입 속성 사용 지침_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)) ->

(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.cnLength = function(){
var arr=this.match(/[^x00-xff]/ig)
return this.length(arr= =null?0:arr.length);
}
테스트: Alert("EaseWe Spaces".cnLength()) -> Display 16
여기서는 일부 정규식 방법과 전체 너비가 사용됩니다. 문자의 인코딩 원리는 다른 두 가지 더 큰 범주에 속하므로 이 기사에서는 설명하지 않습니다.


3. 새로운 기능의 구현, 심층적인 프로토타입: 실제 프로그래밍에서 사용되는 것은 확실히 기존 방법의 향상뿐만 아니라 구현을 위한 더 많은 기능적 요구 사항입니다. 아래는 프로토타입을 사용하여 실제 문제를 해결하는 예입니다.
(1) String.left()
문제: VB를 사용해 본 사람이라면 문자열의 왼쪽에서 n자를 가져오는 left 함수를 알아야 합니다. 하지만 단점은 전각과 반각을 하나의 문자로 간주하여 변환하므로 중국어와 영어가 혼합된 레이아웃에서 동일한 길이의 문자열을 가로챌 수 없다는 것입니다.
기능: 왼쪽에서 n자를 가로채기 문자열을 입력하고 전자와 반자를 구분하도록 지원합니다.
구현 방법:

코드 복사 코드

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


테스트:
alert("EaseWe Spaces".left(8)) -> EaseWe 공간 표시
alert("EaseWe Spaces".left(8,true)) -> 🎜> 이 메서드는 위에서 언급한 String.Tlength() 메서드를 사용하며, 몇 가지 좋은 새로운 메서드를 사용자 정의 메서드 간에 결합할 수도 있습니다!

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

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

　Date.prototype.DayDiff = function(cDate,mode){
try{
cDate.getYear();
}catch(e){
return(0);
}
var base =60*60*24*1000; Math.abs(this - cDate);
switch(mode){
case "y":
result/=base*365
break
case "m":
result/=base*365/12;
break;
case "w":
result/=base*7;
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) NaN을 반환합니다.
if(num==0 || num==1)
return 1;
else
return (num*(num-1).fact());
}


테스트: Alert((4).fact()) -> Display 24
이 방법은 주로 프로토타입 방법에서도 재귀 방법이 가능하다는 것을 보여줍니다!