js_javascript スキルにおけるプロトタイプの使用方法の詳細な紹介-jsチュートリアル-php.cn

js_javascript スキルにおけるプロトタイプの使用方法の詳細な紹介

May 16, 2016 pm 05:15 PM

プロトタイプは、特定のクラスのオブジェクトに対して 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.cnLength = function() {
var arr=this.match(/[^x00-xff]/ig);
return this.length (arr==null?0:arr.length);
}

テスト:alert("EaseWe Spaces".cnLength()) -> 16 を表示
いくつかの正規表現方法と全角文字エンコーディングの原則は、この記事の他の 2 つの大きなカテゴリに属しているため、ここで使用されます。説明はありませんので、関連資料を参照してください。

3. 新しい機能を実装するには、プロトタイプを深く掘り下げます。実際のプログラミングで使用されるのは、既存のメソッドの強化だけではなく、より多くの機能要件も含まれることは間違いありません。以下に、実際的な問題を解決するためにプロトタイプを使用する 2 つの例を示します。例:

(1) String.left()
問題: VB を使用したことがある人なら誰でも、文字列の左側から n 文字を取得する left 関数を知っているはずですが、欠点は、全角と両方の文字列であることです。半角は 1 文字とみなされ、中国語と英語が混在したレイアウトでは等しい長さの文字列をインターセプトできません。
機能: 文字列の左側から 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);
 }
 

実験:
alter("EaseWe Spaces".left(8)) -> EaseWe スペースを表示
alter("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);
 }
 varbase =60*60*24 *1000; 
 var result = Math.abs(this - cDate);
 switch(mode){
 case "y":
 result/=base*365;
 Break;
 case "m":
 result/=base*365/12;
 ブレーク;
 case "w":
 result/=base*7;
 ブレーク;
デフォルト:
 result/=base;
 🎜>

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

JavaScript で実装できるオブジェクト指向機能は次のとおりです:
・パブリックフィールド
・パブリックメソッド
・プライベートフィールド
・プライベートフィールド
・メソッドオーバーロード
・コンストラクター
・イベント
・単一継承
・サブクラスが親クラスの属性またはメソッドをオーバーライドする (オーバーライド)
・静的属性またはメソッド (静的メンバー)

例 1 (JavaScript で動作を追加できる型): 型にプロトタイプを使用して、型に動作を追加できます。これらの動作は、その型のインスタンスでのみ明示されます。 JS で許可される型は、Array、Boolean、Date、Enumerator、Error、Function、Number、Object、RegExp、String です

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

<script type="text/javascript"> 
Object.prototype.Property = 1; 
Object.prototype.Method = function ( ) 
{ 
 アラート(1); 

var obj = new Object(); 
alert(obj.Property); 
 </script> 

<script type="text/javascript">
Object.prototype.Property = 1;
Object.prototype.Method = function (){ alert(1 );} 
var obj = new Object();
alert(obj.Property);
obj.Method();
</script>

 
 例 2 (プロトタイプの使用に関する制限): インスタンスでプロトタイプを使用することはできません。使用しないとコンパイル エラーが発生します 

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

var obj = new Object();プロパティ = 1; //エラー 
// エラー 
obj.prototype.Method = function() 
{ 
 alter(1); 
</script> 🎜>
<script type="text /javascript">var obj = new Object();obj.prototype.Property = 1; //Error//Errorobj.prototype.Method = function(){alert( 1);}</script>
 

例 3 (型に静的メンバーを定義する方法): 型の「静的」プロパティとメソッドを定義し、それらを型で直接呼び出すことができます。 

コードをコピー

コードは次のとおりです:<script type="text/javascript "> Object.Property = 1; Object .Method = function()

{

alert(1); 
} 

alert(Object.Property) ; 
Object.Method(); 

コードをコピー

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

<script type="text/javascript"> 
function Aclass() 
{ 
this.Property = 1; 
this.Method = function() 
{ 
 アラート(1); 
} 
var obj = new Aclass(); 
obj.Method(); ></script> 
<script type="text/javascript">function Aclass(){this.Property = 1;this.Method = function(){alert(1);}}var obj = new Aclass();alert(obj.Property);obj.Method();</script>


例 6 (JavaScript で動作を追加できる型): プロトタイプを外部で使用できますカスタムタイプとしてプロパティとメソッドを追加します。 

コードをコピーコードは次のとおりです:<script type="text/javascript ">

function Aclass()

{ 
this.Property = 1; 
this.Method = function() 
{ 
alert(1); 
} 
} 
Aclass.prototype.Property2 = 2; 
Aclass.prototype.Method2 = 関数 
{ 
 アラート(2) 
} 
var obj = new Aclass(); ; 
alert(obj.Property2); 
</script>

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


例 8 (): オブジェクトのプロパティを変更できます。 (これは確かです) オブジェクトのメソッドを変更することもできます。 (一般的なオブジェクト指向の概念とは異なります) 

コードをコピー

コードは次のとおりです: < スクリプトタイプ="text/javascript"> 関数 Aclass()

{

this.Property = 1; 
{ 
 
} 
} 
var obj = new Aclass(); 
obj.Method = function() 
アラート(2 ); 
アラート(obj.Property); 
</script> 
<script type="text/javascript"> ;function Aclass (){this.Property = 1;this.Method = function(){alert(1);}}var obj = new Aclass();obj.Property = 2;obj.Method = function(){alert (2) ;}alert(obj.Property);obj.Method();</script>


例 9 (): オブジェクトにプロパティまたはメソッドを追加できます




コードをコピーします

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

var obj = new Aclass ();

obj.Property = 2; 
obj.Method = function() 
{ 
 } 
alert( obj.Property); 
obj.Method(); 

例子十一(子クラス内で父クラスの構成をどのように再確認するか): この例は、子クラスがどのように父クラスの属性または方法を再記録するかを示しています。 >

代码如下:<script type="text/javascript"> 関数 AClass() { this.Property = 1;

this.Method = function()

 { 
 alter(1);   
 } 
} 

関数 AClass2() 
{ 
 this.Property2 = 2;   
 this.Method2 = function() 
 { 
 alter(2);   
 } 
} 
AClass2.prototype = new AClass();   
AClass2.prototype.Property = 3;   
AClass2.prototype.Method = function() 
{ 
 alert(4);   
} 
var obj = new AClass2();   
alert(obj.Property);   
obj.Method();   
</script>   