Javascriptプロトタイプ継承(続)—関数からコンストラクタへのキャラクター変換

11709 ワード

JavaScript

各声明の関数については、プロトタイプのメンバーが含まれています.プロトタイプはオブジェクトを指しています.プロトタイプが指すオブジェクトにフォーカスを合わせます.まず、このオブジェクトはこの関数に対応する具体的なオブジェクトです.通常はこのプロトタイプのオブジェクトの属性と方法を継承します.たとえば:

 1 <html>
 2         <head>
 3         <meta  http-equiv="content-type" charset="utf-8"/>
 4         <script type="text/javascript">
 5          function person()
 6          {
 7               this.name = "istone";
 8               this.age = 10;
 9               this.address = "shenzhen";
10          }
11          var tt = new person();
12          alert("name : "+tt.name+"
age : "+tt.age+"
address : " +tt.address);
13         </script>
14         </head>
15         <body> 
16         </body>
17 </html>

以上のコードにより、原型オブジェクト継承機構の存在により、オブジェクトttが作成後に所有する原型オブジェクトの関連属性が発見されました.ここでは、原型オブジェクトはいくつかの属性と方法を持つオブジェクトと考えられますか?明らかに経済的ではないです.したがって、私たちは関数を宣言するとき、そのプロトタイプオブジェクトは空のオブジェクトだと考えられます.しかし、なぜ私たちはnewオペレータで新しいオブジェクトを作成した後(例えば、tt)、いくつかの属性と方法を持っていますか?これは明らかに空のオブジェクトの概念と矛盾していませんか?この問題を解決します.まず次のコードを見ます.

 1 var _proto = null;
 2 function GetPrototype()
 3 {
 4    if(!_proto)
 5 {
 6    _proto = new Object();
 7     _proto.constructor = this;//    
 8 }
 9 return _proto;
10 }

以上のコードは推論されたプロトタイプの可能性がある論理であり、関数のプロトタイプは最初に内蔵されたObjectコンストラクタの例であり、construct属性は現在の関数として割り当てられています.このときの関数はコンストラクタの役割を果たします.関数のプロトタイプが意味があると、普通の関数からプロトタイプに変身します.この場合、ユーザーがnewでインスタンスを生成すると、このプロトタイプ属性にプロトタイプがリンクされていれば良い.
添付:Jqueryオブジェクトの構築分析
step 1:一般的に私たちは対象を作る方式はnew演算子を採用して実現します.

 1  function iQuery()
 2  {
 3                               
 4      this.name = "istone";
 5      this.age = function(){
 6      alert("I'm 10 years old!");
 7      };
 8 }
 9 var IStone = new iQuery();
10 IStone.age();

Step 2:Jqueryはこのように遊んでいるのではなく、Step 1のようにnewでオブジェクトを構築するつもりはなく、直接関数を呼び出します.たとえば:
ドル().ready(obj)
ドル().isFunction(obj);
このような効果を達成するためには、私たちは'米ドル()'を呼び出したときにインスタンスオブジェクトを得る必要があります.
function iQuery()
{
return new iQuery();
)
iQuery.prototype.name="istone"
iQuery.prototype.age=function()
{
alert(「I'm 10 years old!」);
｝
明らかにこのように一つの問題があります.死循環です.
step 3:この問題を解決するために、Jqueryはインスタンスオブジェクトの獲得をプロトタイプに移しました.

 1 function iQuery()
 2 {
 3     return iQuery.prototype.init();
 4 }
 5 iQuery.prototype={
 6 init:function()
 7 {
 8     return this;
 9 },
10 name: "istone",
11 age : function()
12 {
13     alert("I'm 10 years old!");
14 
15 }
16 }

ここでthisキーワードを返すことは極めて重要なステップであり、このときのthisコンテキストはinit.prototypeであり、init関数のプロトタイプを表しています.そのためには効果がありません.しかし、Jqueryはinitのプロトタイプを巧みにJqueryのプロトタイプに置き換えることで、この問題を瞬間的に解決しました.この時、this文脈はJqueryの原型になります.
iQuery.prototype.init.prototype=iQuery.prototype;
PS:以下はJQueryの対象となる部分のソースコードです.上の分析によって、この構築過程が分かります.

 1 jQuery = function( selector, context ) {
 2         // The jQuery object is actually just the init constructor 'enhanced'
 3         return new jQuery.fn.init( selector, context, rootjQuery );
 4     },
 5 
 6 jQuery.fn = jQuery.prototype = {
 7     init: function( selector, context, rootjQuery ) {
 8     
 9             return this;
10 }
11 }
12 jQuery.fn.init.prototype = jQuery.fn;

7つのよくあるJavaScriptテストと解答