JavaScript プロトタイプ プロパティの使用方法_JavaScript のヒント

少しわかりにくく聞こえるかもしれませんが、心配しないでください。この特別なメソッドについては、以下の例を通して説明します:

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

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


1. プロトタイプを理解するための最も簡単な例:
(1) Number.add(num): function,数値加算
実装方法：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.cnLength = function(){
var arr=this.match(/[^x00-xff]/ig);
return this.length (arr=) =null?0:arr.length);
}
テスト:alert("EaseWe Spaces".cnLength()) -> 表示 16
ここでは一部の正規表現メソッドと全角が使用されます。文字のエンコード原則は他の 2 つの大きなカテゴリに属する​​ため、この記事では説明しません。関連する資料を参照してください。


3. 新しい機能の実装、詳細なプロトタイプ: 実際のプログラミングで使用されるのは、既存のメソッドの強化だけではなく、実装のためのより多くの機能要件も含まれることは間違いありません。実際の問題を解決するためにプロトタイプを使用する例を以下に示します。
(1) String.left()
問題: VB を使用したことがある人なら誰でも、文字列の左側から n 文字を取得する left 関数を知っているはずです。ただし、全角と半角を 1 つの文字として変換するため、中国語と英語が混在したレイアウトでは同じ長さの文字列をインターセプトできなくなるという欠点があります。
関数: の左側から 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; );
return this.substr(0,num)


テスト:
alert("EaseWe Spaces".left(8)) -> EaseWe スペースを表示
alert("EaseWe Spaces".left(8,true)) -> EaseWe 空を表示
このメソッドは前述の String.Tlength() メソッドを使用しており、いくつかの優れた新しいメソッドをカスタム メソッド間で組み合わせることができます。

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

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

Date.prototype.DayDiff = function(cDate,mode){
try{
cDate.getyear();
}catch(e){
return(0);
var ベース =60*60*24*1000; Math.abs(this - cDate);
switch(mode){
case "y":
result/=base*365;
case "m":
result/=base*365/12;
break;
case "w":
result/=base*7;
default:
;
ブレーク;
}
return(Math.floor(result));


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