JS_javascriptスキルにおけるプロトタイプの使用例の分析

この記事の例では、JS でのプロトタイプの使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

JS のフォトタイプは JS で理解するのが難しい部分です

この記事は次の知識ポイントに基づいています:

1 プロトタイプのデザインパターン

clone() を使用して .Net にプロトタイプ メソッドを実装できます
プロトタイプ メソッドの主なアイデアは、クラス A が存在し、クラス B を作成したいということです。このクラスは A に基づいており、拡張できます。 B のプロトタイプを A と呼びます。

2 JavaScript メソッドは 3 つのカテゴリに分類できます:

クラスメソッド
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 を obj1 として扱い、func メソッドを呼び出すことを意味します

それでは、問題を 1 つずつ解決していきましょう:

プロトタイプとはどういう意味ですか?

JavaScript のすべてのオブジェクトにはプロトタイプ属性があります。JavaScript のオブジェクトのプロトタイプ属性の説明は次のとおりです。オブジェクト型のプロトタイプへの参照を返します。

A.prototype = new B();

プロトタイプを理解することを継承と混同しないでください。 A のプロトタイプは B のインスタンスです。A が B のすべてのメソッドとプロパティを複製したことがわかります。 A は B のメソッドとプロパティを使用できます。ここでは、継承ではなくクローン作成に重点を置いています。このような状況が発生する可能性があります。A のプロトタイプは B のインスタンスであり、B のプロトタイプも 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のインスタンスをプロトタイプとして使用する予定で、複製されるextendedClassにはshowMsgオブジェクトのメソッドも含まれています。

extendClass.prototype = newbaseClass() は次のように読み取ることができます。 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

実験的証明: 関数の実行中は、まずオントロジーで関数が検索され、見つからない場合はプロトタイプで関数が検索されます。あるいは、プロトタイプが同じ名前の関数を複製しないことも理解できます。

次に、新しい質問が表示されます:

extendClass のインスタンスを使用して、baseClass のオブジェクト メソッド showMsg を呼び出したい場合はどうすればよいですか?

答えは、呼び出しを使用することです:

extendClass.prototype = new baseClass();
var instance = new extendClass();
var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);//显示baseClass::showMsg

ここでのbaseinstance.showMsg.call(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>

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。