JSのプロトタイプ

4576 ワード

JSの中のphotototypeはJSの中で比較的に理解しにくい部分です.
 
本文は以下のいくつかの知識点に基づいている.
 
1原型法設計モード
Netではclone()を使用して原型法を実現できます.
プロトタイプ法の主な思想は、今はAクラスがあります.Bクラスを作りたいです.このクラスはAをモデルとしています.私たちはBの原型をAと呼びます.
 
2 javascriptの方法は三つの種類に分けられます.
a種の方法
bオブジェクトの方法
c原型の方法
例:
 
function People(name)
{
this.name=name;
//    
this.Introduce=function(){
alert("My name is "+this.name);
}
}
//   
People.Run=function(){
alert("I can run");
}
//    
People.prototype.IntroduceChinese=function(){
alert("     "+this.name);
}

 

//  

var p1=new People("Windking");

p1.Introduce();

People.Run();

p1.IntroduceChinese();
 
3 obj 1.func.call(obj)方法
objをobj 1とみなし、funcメソッドを呼び出すという意味です.
 
 
はい、次の問題を解決します.
 
prototypeとはどういう意味ですか?
 
javascriptの各オブジェクトにはプロトタイプの属性があり、Javascriptのオブジェクトのプロトタイプ属性の解釈は、オブジェクトタイプの原型の参照に戻るということです.
A.prototype=new B();
prototypeを理解するにはそれを継承と混同するべきではない.AのprototypeはBの一例であり、AがBの方法と属性を全部クローンしたことが理解できる.AはBの方法と属性を使うことができます.ここで強調しているのはクローンであり、継承ではない.このような場合があり得る.AのプロトタイプはBの例であり、BのプロトタイプもAの例である.
 
まず実験の例を見ます.
 
function baseClass()
{

this.showMsg = function()
{
     alert("baseClass::showMsg");   
}

}

function extendClass()
{

}

extendClass.prototype = new baseClass();

instance = new extendClass();

instance.showMsg(); //   baseClass::showMsg
 
 
まずbaseClassクラスを定義してから、extentClassを定義しますが、baseClassの一例をモデルにして、クローンのextendClassもショーMsgという対象方法を含めています.
extendClass.prototype=new baseClassは、baseClassの一例をもとにクローンで作成されたものです.
 
問題があります.もしextendClassにはbaseClassと同名の方法が含まれていたらどうなりますか?
次は拡張実験2です.
 
function baseClass()
{
    this.showMsg = function()
    {
        alert("baseClass::showMsg");   
    }
}

function extendClass()
{
    this.showMsg =function ()
    {
        alert("extendClass::showMsg");
    }
}

extendClass.prototype = new baseClass();
instance = new extendClass();

instance.showMsg();//  extendClass::showMsg
 
 
実験の証明:関数が運行する時先に本体の関数の中に行って探して、もし探し出せないならば運行して、見つけられないならprototypeの中で関数を探します.またはプロトタイプは同名の関数をクローンしないと理解できます.
 
また新しい問題があります.
もし私がextendClassの一例を使いたいなら、instanceがbaseClassのオブジェクトメソッドshowMsgを呼び出したらどうすればいいですか?
 
答えはコールが使えます.
 
extendClass.prototype = new baseClass();
instance = new extendClass();


var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);//  baseClass::showMsg
 
 
ここのbaseinstance.showMsg.clall;instanceをbaseinstanceとして呼び出し、対象メソッドshowMsgを呼び出します.
はい、ここでなぜbaseClass.showMsg.callを使わないのかという質問があるかもしれません.
これは対象の方法と種類の方法の違いです.私達が呼びたいのはbaseClassの対象方法です.
 
最後に、下記のコードが理解できれば、この文章の話はもう理解しました.
<script type="text/javascript">

function baseClass()
{
    this.showMsg = function()
    {
        alert("baseClass::showMsg");   
    }
   
    this.baseShowMsg = function()
    {
        alert("baseClass::baseShowMsg");
    }
}
baseClass.showMsg = function()
{
    alert("baseClass::showMsg static");
}

function extendClass()
{
    this.showMsg =function ()
    {
        alert("extendClass::showMsg");
    }
}
extendClass.showMsg = function()
{
    alert("extendClass::showMsg static")
}

extendClass.prototype = new baseClass();
instance = new extendClass();

instance.showMsg(); //  extendClass::showMsg
instance.baseShowMsg(); //  baseClass::baseShowMsg
instance.showMsg(); //  extendClass::showMsg

baseClass.showMsg.call(instance);//  baseClass::showMsg static

var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);//  baseClass::showMsg

</script>
 
軒脈刃(yjf 512)出所:(http://www.cnblogs.com/yjf512/)著作権声明:本稿の著作権は作者とブログ園に共有されている.転載を歓迎して読んで、転載する時は本文の詳しいリンクを明記しなければなりません.