ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript プロトタイプベースのオブジェクト (作成、呼び出し)_js オブジェクト指向

JavaScript プロトタイプベースのオブジェクト (作成、呼び出し)_js オブジェクト指向

WBOY
WBOYオリジナル
2016-05-16 18:44:151230ブラウズ
JavaScript には 3 種類のオブジェクトがあります
1. 内部オブジェクト
: Array、Boolean、Data、Math、Number、Object、RegExp、String オブジェクトなど。
これらのオブジェクトシステムはそれぞれのプロパティを提供し、呼び出しに使用できるメソッドを提供します。
2. クラスベースのオブジェクト
は、オブジェクト参照を実装するためにクラスを使用します。
3. プロトタイプベースのオブジェクト
JavaScript のプロトタイプベースのオブジェクトの使用方法に関する情報を提供します。モデル ガイドを提供し、カスタム コンストラクターとプロトタイプ ベースのオブジェクトの継承について説明する特定の情報へのリンクを提供します。

JSコードを書く際には必然的に内部オブジェクトが参照されますが、これらのオブジェクトだけでは不十分なので、この時に通常使用されるオブジェクトは3番目のタイプです。つまり、プロトタイプに基づくオブジェクトです。次に、独自のオブジェクトの作成方法、オブジェクトのメソッドとプロパティの定義方法、およびオブジェクトの呼び出し方法について詳しく説明します。
コードをコピー コードは次のとおりです:

//JScript の強力な機能は、コンストラクターを定義して、スクリプトで使用するカスタム プロトタイプ ベースのオブジェクトを作成する機能。
//プロトタイプベースのオブジェクトのインスタンスを作成するには、まずコンストラクターを定義する必要があります。
//このプロセスは、新しいオブジェクトを作成し、それを初期化します (プロパティを作成し、初期値を割り当てます)。
//完了すると、コンストラクターは構築されたオブジェクトへの参照を返します。
//コンストラクター内で、作成されたオブジェクトは this ステートメントを通じて参照されます。
function people(name,age)//people オブジェクトを定義します
{
this.mName=name;//ここでの mName は属性を表し、外部で定義する必要はありません。これは、人を示します。 object
this.Age=age;
this.category="Mammal";
this.toString=Exporting;//メソッド、toString() ではなく toString のみを記述できることに注意してください。 this.myMethod =function()// this.myMethod=method と同等 次に、以下のメソッドを記述します。
{
return "Hello";
}
function Exporting()/ / 戻り値があっても構いませんが、関数名の前に戻り値の型 (string、int など) を記述する必要はありません。
{
return "My name is——" this .mName "、私の年齢は —" これです。
}
/*function method()
{
return "Hello"; .prototype.getName=function()//構築中、関数の外にメソッドを記述します。
//関数 people.prototype.getName()
//コンストラクター内のメソッドと同等です。 getName
{
return this .mName;
}
people.prototype.getAge=this.Age;// コンストラクターの外側に属性を書き込みます。
// コンストラクター内のメソッドと同等です: this.getAge
function people.prototype.getMoney()//people.prototype.getMoney=function()
と同等//コンストラクターでの記述と同等: this.getMoney
{
return " 1000";
}
function show()// 人物オブジェクトを呼び出します
{
var me=new people("Andy Lau",22);// 人物オブジェクト、キーワード new をインスタンス化します
//var myName=me.getName();
//alert(myName);
me.sex=" Male";// ここの性別属性は、インスタンス me にのみ使用できます。つまり、一意の属性
//定義 var がある場合、あなた =new people("Xiaoqiang",1);
//このインスタンスでは性別属性を呼び出すことはできません
//必要に応じて両方のインスタンスを参照する必要があります。その場合、性別属性は people.prototype.sex
//alert(me.sex)
//alert(me.category); として記述する必要があります。 alert(me.toString());/ /または、alert(me) を直接書きます
//alert(me.myMethod())
//alert(me.getMoney()); alert(me.myMethod() "n 名前: " me.getName() "n性別: " me.sex "nCategory: " me.category "n総資産: " me.getMoney() "nsummary: " me.toString() );
}


上記の考え方に従って、組み込み JavaScript オブジェクトに他のプロパティまたはメソッドを追加できます。次の例では、
良いメソッドと悪い属性を追加します。組み込みオブジェクトには見つからない文字列オブジェクト。メソッドとプロパティ



コードをコピー

コードは次のとおりです。 🎜> String.prototype.good=function() //カスタム メソッド { return "組み込み String オブジェクトへの適切なメソッドの追加が成功しました"; String.prototype.bad="組み込み String オブジェクトへの不正な属性の追加に成功しました。";//カスタム属性function test()//String オブジェクトに追加された属性とメソッドを呼び出します
{
var str="good Good Study";// 文字列インスタンスを定義します str
alert(str.good() "n" str.bad);// メソッド Good と属性 Bad を呼び出しますカスタム文字列オブジェクト
}


最後に HTML ボタンに 2 つ追加します。テスト オブジェクト people と文字列オブジェクトに追加されたメソッドと属性




コードをコピー

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


/title> <br><div> <br><input type= " value="カスタム オブジェクト定義" onclick="show()"> <br></div> <br><div> <br><input type="button" value="組み込みオブジェクトメソッド "onclick="test()"> <br></div> <br></body> <br></html> <br><br> </div>テスト結果は成功しました。 。 。 。 。 。 。これは、オブジェクトの作成、オブジェクト メソッド属性の呼び出し、内部オブジェクトの追加メソッドと属性呼び出しがすべて正しいことを示します。</div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明:</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事:<a class="dBlack" title="毎日日付と日付に応じて自動的に変更されるテキストのjs特殊効果" href="http://m.php.cn/ja/faq/23458.html">毎日日付と日付に応じて自動的に変更されるテキストのjs特殊効果</a></span><span>次の記事:<a class="dBlack" title="毎日日付と日付に応じて自動的に変更されるテキストのjs特殊効果" href="http://m.php.cn/ja/faq/23460.html">毎日日付と日付に応じて自動的に変更されるテキストのjs特殊効果</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="http://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ja/faq/1609.html" title="Bootstrap リスト グループ コンポーネントの詳細な分析" class="aBlack">Bootstrap リスト グループ コンポーネントの詳細な分析</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/1640.html" title="JavaScript関数のカリー化の詳細説明" class="aBlack">JavaScript関数のカリー化の詳細説明</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/1949.html" title="JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)" class="aBlack">JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/2248.html" title="Angularjs は WeChat UI (weui) を統合します" class="aBlack">Angularjs は WeChat UI (weui) を統合します</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/2351.html" title="JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル" class="aBlack">JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!</p></div><div class="footermid"><a href="http://m.php.cn/ja/about/us.html">私たちについて</a><a href="http://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="http://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>