js_javascript 기술의 프로토타입 사용에 대한 자세한 소개

프로토타입은 특정 클래스의 객체에 대해 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)) ->

(2) Boolean.rev(): 함수, 부울 변수를 무효화

구현 방법: Boolean.prototype.rev = function(){return(!this);}

테스트: Alert((true).rev()) ->
아주 간단하지 않나요? 이 섹션에서는 독자들에게 다른 방법과 이 방법이 사용되는 방법에 대해 설명합니다.

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);
}

테스트: 경고("EaseWe Spaces".cnLength()) -> 디스플레이 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);
if(!mode) return str;
var n = str.Tlength() - str.length;
num = num -parseInt(n/2);
return this.substr(0,num);
}

실험:
경고("EaseWe Spaces".left(8)) -> EaseWe 공간 표시
경고("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;
var result = Math.abs(this - cDate);
switch(mode){
case "y":
result/=base*365;
break;
케이스 "m":
result/=base*365/12;
break;
케이스 "w":
result/=base*7;
break;
기본값:
           결과/=base;
                           중단 🎜>
테스트: 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());
}

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

JavaScript가 구현할 수 있는 객체 지향 기능은 다음과 같습니다.
·Public 필드
·Public Method
·Private 필드
·private 필드
·메서드 오버로드
·생성자
·이벤트
·단일 상속
·하위 클래스가 상위 클래스의 속성 또는 메서드를 재정의(재정의)
·정적 속성 또는 메서드(정적 멤버)

예 1(JavaScript에서 동작 추가를 허용하는 유형): 유형에 proptotype을 사용하여 유형에 동작을 추가할 수 있습니다. 이러한 동작은 해당 유형의 인스턴스에만 나타날 수 있습니다. JS에서 허용되는 유형은 Array, Boolean, Date, Enumerator, Error, Function, Number, Object, RegExp, String

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

예시 2(프로토타입 사용 제한): 인스턴스에서는 프로토타입을 사용할 수 없습니다. 그렇지 않으면 컴파일 오류가 발생합니다.

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

🎜>



예 3(유형에 정적 멤버를 정의하는 방법): 유형에 대한 "정적" 속성과 메서드를 정의하고 유형에서 직접 호출할 수 있습니다.

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

예제 5 (): 이 예는 JavaScript에서 유형을 정의하는 일반적인 방법을 보여줍니다.

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

예 6(JavaScript에서 동작 추가를 허용하는 유형): 프로토타입을 외부에서 사용할 수 있습니다. 사용자 정의 유형으로 속성과 메소드를 추가합니다.

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

예 8 (): 개체의 속성을 변경할 수 있습니다. (확실합니다.) 객체에 대한 메소드를 변경할 수도 있습니다. (일반적인 객체지향 개념과 다름)

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

< script type="text/javascript">
function Aclass()
{
this.Property = 1
this.Method = function()
{
경고(1);
}
}
var obj = new Aclass();
obj.Property = 2
obj.Method = function()
{
경고(2 );
alert(obj.Property)
obj.Method()
;function Aclass (){this.Property = 1;this.Method = function(){ Alert(1);}}var obj = new Aclass();obj.Property = 2;obj.Method = function(){ 경고 (2) ;}alert(obj.Property);obj.Method();


예제 9(): 객체에 속성이나 메서드를 추가할 수 있습니다

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




예제 10(한 유형을 다른 유형에서 상속하는 방법): 이 예는 한 유형이 다른 유형에서 상속되는 방법을 보여줍니다.

코드 복사

코드는 다음과 같습니다.

  

 例子十一(如何在子类中中新定义父类的成员)：这个例子说明了子类如何重写父类的属性或方法.

复代代码 代码如下: