ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptでのprototype属性の使い方(機能拡張)_javascriptスキル

JavaScriptでのprototype属性の使い方(機能拡張)_javascriptスキル

WBOY
リリース: 2016-05-16 18:21:01
オリジナル
873 人が閲覧しました

これは比較的特殊な属性であり、JavaScript の継承は通常この属性に依存します。
JavaScript では、すべてがオブジェクト、文字列、配列、変数、関数もオブジェクトであるため、['a','b','c'].push(' d') ;そのような操作は存在します。クラス自体もオブジェクトであり、プロパティとメソッドを定義することもできます:

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

function Test(){};
Test.str = 'str';
Test.fun = function(){return 'fun';};
var r1 = テスト。 str; // str
var r2 = Test.fun(); // 楽しい
var inst = new Test(); // 未定義
var r4 = inst.fun() ; // 未定義

プロトタイプはクラスに作用する属性です。デフォルトでは、すべての JavaScript クラスにはプロトタイプ属性がありますが、クラス インスタンスにはありません。

コードをコピーします コードは次のとおりです。
function Test(){}; >var p1 = typeof(String.prototype); // オブジェクト
var p2 = typeof(Test.prototype); // オブジェクト
var p3 = typeof(new Test().prototype); 🎜>var p4 = typeof(Object.prototype); // オブジェクト
var p5 = typeof(new Object().prototype); // 未定義


値と代入
Javascript は、オブジェクトに存在しない属性またはメソッドを取得すると、そのオブジェクトに対応するクラスのプロトタイプ属性にその属性またはメソッドが含まれているかどうかを調べます。また、そのプロトタイプも Javascript オブジェクトであるかどうかを確認します。いいえ、プロトタイプは、対応するクラスのプロトタイプにアクセスし、必要な属性またはメソッドが見つかるまで、またはプロトタイプ属性が null になるまで、レベルごとにアクセスします。



コードをコピーします コードは次のとおりです。 function Test(){}; >テスト。テスト = 'str';
関数 pt1 = 'pt1' }; ;
pt2.prototype.test3 = 'test3';
pt2.prototype = new pt2(); ;
var inst = new Test();
var p1 = inst.test1; // test4 の代わりに pt1; ; // pt2
var p4 = inst.test3; // test3


代入は値を取得するよりもはるかに簡単です。プロトタイプ内の属性値をレイヤーごとに検索するのではなく、現在のインスタンスに値を直接割り当て、存在しない場合は作成します。
組み込みクラスの拡張
組み込みクラスのプロトタイプは、JavaScript で直接変更できません。ただし、プロトタイプの属性を変更することで、組み込みクラスの動作を変更できます。




コードをコピーします

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


Array.prototype = {push:function( ){alert ('test1');}}; // 動作しません
Array.prototype.push = function(){alert('test2');}; // できます
var test = new Array ('a ','b','c'); test.push('d'); // test2 一度に複数の要素を挿入できる Array.push 関数:

コードをコピー


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

Array.prototype.pushs = function( )
{
var pos = this.length; for(var i=0; i{ this[ pos] = argument[i]; } return this.length; }
var test = new Array('a','b','c');
test.pushs('d',' e');


for ステートメントを使用して属性を出力する場合、組み込みクラスのプロトタイプに追加された関数も表示されることに注意してください:




コードをコピーします


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

var str; for(var i in test)
{
str = (' ' i); / / '0 1 2 3 4 5 Pushes' はカスタム関数をプッシュします。 } ただし、hasOwnProperty() で判断できます:

コードをコピー


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

var str;
for(var i in test)
{
if(test.hasOwnProperty(i)) // プッシュ関数を除外します。 。 { str = (' ' i) } } ;]
いくつか注意すべき点
前に述べたように、プロトタイプはクラスの属性です。プロトタイプ内の属性値を変更すると、予期せぬ災害が発生する可能性があります。
コードをコピー コードは次のとおりです:

function Test(){}
Test.prototype .num = 3;
var inst1 = new Test();
Test.prototype.num = 4; .プロトタイプ番号。
var p1 = inst1.num; // 4
var p2 = inst2.num; // 4
inst1.num = 5; // 代入により inst オブジェクトの num 属性が作成されます。
Test.prototype.num = 6; // すべての値は Test.prototype.num を指します。
var p3 = inst1.num; // 5 ここで返されるのは、Test.prototype.num の値ではなく、作成されたばかりの inst1.num の値です。
var p4 = inst2.num; // 6
delete Test.prototype.num;
var p5 = inst1.num; // 5 inst1.num;
var p6 = inst2.num; // 未定義の Test.prototype.num が削除されました。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート