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(): 関数、ブール変数を否定します
テスト:alert((true).rev()) -> false を表示
2. 既存のメソッドの実装と拡張、最初のプロトタイプの紹介:
(1) Array.push(new_element) 機能:配列の末尾に新しい要素を追加
実装方法:
this[this.length]=new_element;
return this.length;
}
実装方法:
var currentLength = this.length;
for (var i = 0; i
}
return this.length;
}
(2) String.length
機能: これは実際には String クラスの属性ですが、JavaScript では全角と半角を 1 つの文字として扱うため、実際のアプリケーションによっては問題が発生する可能性があります。今回はこの欠点を補うためにプロトタイプを使用します。
実装方法:
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
もちろん、さらに拡張して応答時間、分、さらには秒を取得することもできます。
実装方法:
コードをコピー
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 (プロトタイプの使用に関する制限): インスタンスでプロトタイプを使用することはできません。使用しないとコンパイル エラーが発生します
// エラー
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 (型に静的メンバーを定義する方法): 型の「静的」プロパティとメソッドを定義し、それらを型で直接呼び出すことができます。
コードをコピー
}
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 で動作を追加できる型): プロトタイプを外部で使用できますカスタムタイプとしてプロパティとメソッドを追加します。
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 (): オブジェクトのプロパティを変更できます。 (これは確かです) オブジェクトのメソッドを変更することもできます。 (一般的なオブジェクト指向の概念とは異なります)
コードをコピー
{
}
}
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 (): オブジェクトにプロパティまたはメソッドを追加できます
コードをコピーします
obj.Method = function()
{
}
alert( obj.Property);
obj.Method();
例子十一(子クラス内で父クラスの構成をどのように再確認するか): この例は、子クラスがどのように父クラスの属性または方法を再記録するかを示しています。 >
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>

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます

PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする
