JS_javascript のプロトタイプを理解するスキル

すべてのコンストラクターにはプロトタイプと呼ばれる属性があります。この属性は、特定のクラスの共通の変数または関数を宣言する場合に非常に役立ちます。

プロトタイプの定義

プロトタイプ属性はすべてのコンストラクターに存在するため、明示的に宣言する必要はありません

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

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>

上記の内容は JS のプロトタイプの理解に関するものです。気に入っていただければ幸いです。