プロトタイプを使用して独自のメソッドを定義する方法の簡単な分析_基礎知識

プロトタイプは、特定のクラスのオブジェクトに対して IE 4 以降のバージョンで導入されたメソッドであり、特別なのは、クラスのオブジェクトにメソッドを追加するためのメソッドであることです。少しわかりにくく聞こえるかもしれませんが、心配しないでください。この特別な方法については、以下の例を通して説明します:

まず、クラスの概念を理解する必要があります。JavaScript 自体はオブジェクト指向言語であり、関連する要素はその属性に基づいて特定のクラスに関連付けられます。一般的なクラスには、配列変数 (Array)、論理変数 (Boolean)、日付変数 (Date)、構造変数 (Function)、数値変数 (Number)、オブジェクト変数 (Object)、文字列変数 (String) などが含まれます。また、配列のプッシュ メソッド、日付の get series メソッド、文字列の分割メソッドなど、関連するクラス メソッドもプログラマによってよく使用されます (ここでは、クラス アテンション メソッドと属性送信メソッドを区別する必要があります)。 .、

しかし、実際にプログラミングを行ってみると、既存の手法の欠点を感じることはありますか?プロトタイプ手法が誕生しました！以下では、プロトタイプの具体的な使用方法を、浅いものから深いものまで、例を通して説明します。

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);} テスト: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 this[currentLength i ] = argument [i];
}
return this.length;
}

理解するのは難しくないはずですよね。同様に、Array.pop を拡張することで、任意の位置の任意の数の要素を削除する方法を検討できます (具体的なコードについては詳しく説明しません)

(2) String.length
機能：実際には String クラスの属性ですが、JavaScript では全角も半角も 1 文字として扱うため、動作しない場合があります。実際のアプリケーションでは、特定の問題が発生する可能性があります。この欠点を補うためにプロトタイプを使用します。

実装方法:

コードをコピー コードは次のとおりです:

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


テスト:alert("aaalaalaaa".Tlength()) -> 8 を表示

一部の正規表現方法と全角文字のエンコード原則は、他の 2 つの大きなカテゴリに属する​​ため、この記事では説明しません。関連する資料を参照してください。

3. 新しい関数の実装、詳細なプロトタイプ: 実際のプログラミングで使用されるのは、既存のメソッドの強化だけではなく、以下のさらなる機能要件も含まれます。実際の問題を解決するためにプロトタイプを使用する 2 つの例を示します。

(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 ; left(4,true)) -> aa
を表示します
このメソッドは前述の String.Tlength() メソッドを使用しており、いくつかの優れた新しいメソッドをカスタム メソッド間で組み合わせることができます。

(2) Date.DayDiff()

機能：2つの日付変数間の間隔(年、月、日、週)を計算

実装方法：


コードをコピー

コードは次のとおりです。Date.prototype.DayDiff = function(cDate ,mode){ try{ cDate.getyear();

}catch(e){

return(0);
}
varbase =6 0*60* 24 *1000;
var result = Math.abs(this - cDate);
switch(mode){
case "y":
result/=base*365;
Break; ブレーク;
デフォルト:
result/=base;
ブレーク;
}
return(Math.floor(result));
}


テスト :alert(( new Date()).DayDiff((new Date(2002,0,1)))) -> 329
アラート((new) Date()).DayDiff((new Date(2002,0,1) ),"m")) -> 10 を表示

もちろん、さらに拡張して応答時間、分、さらには秒を取得することもできます。


(3) Number.fact()

関数: 特定の数値の階乗

実装方法:

コードをコピー

コードは次のとおりです:

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

テスト: alert((4).fact()) -> 表示 24
このメソッドは主に、プロトタイプ メソッドでも再帰的メソッドが実行可能であることを示しています。