JSでのプロトタイプの詳細説明

この記事では、JSでのプロトタイプの詳細な説明を中心に紹介しますので、必要な方は参考にしてください

JSで理解するのが難しい部分です。この記事は次の知識ポイントに基づいています:

1 プロトタイプ設計パターン

.Net で clone() を使用してプロトタイプ メソッドを実装できます

プロトタイプ メソッドの主なアイデアは、現在 1 つあるということです。クラス A、I A からプロトタイプ化され、拡張できるクラス B を作成したいと考えています。 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 を 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 を呼び出したい場合はどうすればよいですか?

答えは、 call:

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


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

baseinstance.showMsg.call(instance); を使用できるということです。ここでは、「インスタンスをbaseinstanceとして呼び出し、そのオブジェクトメソッドshowMsgを呼び出します」と読みます。 usebaseClass.showMsg.call(instance);

これがオブジェクトメソッドとクラスメソッドの違いです

最後に、次のコードを明確に理解できれば、この記事を読んでください。私はすでに理解しています:

<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>

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。 関連する推奨事項:

js の関数宣言と関数式の分析

js を介して疑似配列を配列に変換する方法

以上がJSでのプロトタイプの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。