jsでのプロトタイプの詳細説明

プロトタイプとは、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);}
Test:alert((true).rev()) -> falseを表示

Yes Not;とてもシンプルですか？このセクションでは、別の方法とこの方法の使用方法について読者に説明するだけです。

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 < argument.length; i++) {
|類推すると、Array.popを拡張することで任意の位置の任意の数の要素を削除する方法を考えることができます（具体的なコードは詳しく説明しません）

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

実装方法:

String.prototype.cnLength = function(){

var arr=this.match(/[^x00-xff]/ig);

return this.length+(arr==null?0:arr. length);

}

Test:alert("EaseWe Spaces".cnLength()) -> 表示 16
一部の正規表現メソッドと全角文字のエンコード原則がここで使用されます。その他の 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);モード）str; var n = str.tlength（） - str.length;

テスト:
alert("EaseWe Spaces".left(8)) -> EaseWe spaceを表示します
alert("EaseWe Spaces".left(8,true)) -> EaseWe emptyを表示します
このメソッドが使用されます前述の .Tlength() メソッドとカスタム メソッドを組み合わせて、優れた新しいメソッドを作成することもできます。

(2) Date.DayDiff()
関数: 2つの日付変数(年、月、日、週)の間隔を計算
実装方法:

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 中国語 Web サイトの他の関連記事を参照してください。