JavaScriptベース(1)prototypeの理解?


prototypeはJavaScriptの中で比較的理解しにくい部分です
本稿では、次のいくつかの知識点に基づいています.
1原型法設計モード
はい.Netではclone()を用いてプロトタイプ法を実現できる
プロトタイプ法の主な考え方は、現在1つのクラスAがあり、私は1つのクラスBを作成したいと思っています.このクラスはAをプロトタイプとし、拡張することができます.私たちはBの原型をAと呼ぶ.
2 Javascriptのメソッドは、次の3つに分類されます.
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 obj1.func.call(obj)メソッド
objをobj 1と見なしfuncメソッドを呼び出すことを意味する
では、次の問題を解決します.
prototypeとはどういう意味ですか?
Javascriptの各オブジェクトにはprototypeプロパティがあり、Javascriptのオブジェクトのprototypeプロパティの解釈は、オブジェクトタイプのプロトタイプの参照を返すことです.
A.prototype = new B();

prototypeが継承と混同すべきではないことを理解します.AのprototypeはBの一例であり、AがBの方法と属性をすべてクローンしたことが理解できる.AはBの方法と属性を使うことができます.ここで強調するのは、継承ではなくクローンです.この場合、AのprototypeはBのインスタンスであり、BのprototypeもAのインスタンスである.
まず実験の例を見てみましょう.
function baseClass() {
  this.showMsg = function() {
     alert("baseClass::showMsg");   
  }
}

function extendClass() {
}

extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg(); //   baseClass::showMsg

まずbaseClassクラスを定義し、extentClassを定義しますが、baseClassのインスタンスをモデルにしてクローン化するextendClassにはshowMsgというオブジェクトメソッドも含まれています.
extendClass.prototype=new baseClass()は、extendClassがbaseClassのインスタンスをプロトタイプとしてクローン作成されたものであると読むことができます.
では、extendClassにbaseClassと同じ名前のメソッドが含まれている場合はどうなりますか?
次は拡張実験2です.
function baseClass() {
    this.showMsg = function() {
        alert("baseClass::showMsg");   
    }
}

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

extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg();//  extendClass::showMsg

実験により,関数の実行時に本体の関数を先に探し,見つかったら実行し,見つからなければprototypeで関数を探すことが証明された.あるいはprototypeは同名関数をクローンしないと理解できます.
新しい質問があります
extendClassのインスタンスinstanceを使用してbaseClassのオブジェクトメソッドshowMsgを呼び出したい場合はどうすればいいですか?
答えはcallを使ってもいいです.
extendClass.prototype = new baseClass();
var instance = new extendClass();

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

ここのbaseinstanceshowMsg.call(instance);「instanceをbaseinstanceとして呼び出し、そのオブジェクトメソッドshowMsgを呼び出す」と読む
なぜbaseClassを使わないのかと聞かれるかもしれませんshowMsg.call(instance);
これがオブジェクトメソッドとクラスメソッドの違いです.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();
var 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>