ホームページ ウェブフロントエンド jsチュートリアル js_javascript スキルにおけるプロトタイプの使用方法の詳細な紹介

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

May 16, 2016 pm 05:15 PM
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);}

テスト: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 (プロトタイプの使用に関する制限): インスタンスでプロトタイプを使用することはできません。使用しないとコンパイル エラーが発生します


コードをコピーします コードは次のとおりです:
<script type="text/javascript">
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 で動作を追加できる型): プロトタイプを外部で使用できますカスタムタイプとしてプロパティとメソッドを追加します。


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 (): オブジェクトにプロパティまたはメソッドを追加できます




コードをコピーします

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

<script type="text/javascript"> 🎜>関数 Aclass() { this.Property = 1; this.Method = function() { アラート(1)} }
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>  


このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

JS と Baidu Maps を使用してマップ パン機能を実装する方法 JS と Baidu Maps を使用してマップ パン機能を実装する方法 Nov 21, 2023 am 10:00 AM

JS と Baidu Maps を使用してマップ パン機能を実装する方法

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト 推奨: 優れた JS オープンソースの顔検出および認識プロジェクト Apr 03, 2024 am 11:55 AM

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト

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

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

PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする Dec 18, 2023 pm 03:39 PM

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

PHP と JS を使用して株価ローソク足チャートを作成する方法 PHP と JS を使用して株価ローソク足チャートを作成する方法 Dec 17, 2023 am 08:08 AM

PHP と JS を使用して株価ローソク足チャートを作成する方法

JSとBaidu Mapsを使って地図ポリゴン描画機能を実装する方法 JSとBaidu Mapsを使って地図ポリゴン描画機能を実装する方法 Nov 21, 2023 am 10:53 AM

JSとBaidu Mapsを使って地図ポリゴン描画機能を実装する方法

JSと百度地図を使って地図クリックイベント処理機能を実装する方法 JSと百度地図を使って地図クリックイベント処理機能を実装する方法 Nov 21, 2023 am 11:11 AM

JSと百度地図を使って地図クリックイベント処理機能を実装する方法

js での new 演算子は何をしますか js での new 演算子は何をしますか Nov 13, 2023 pm 04:05 PM

js での new 演算子は何をしますか

See all articles