JS_javascript のプロトタイプを理解するスキル-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 15:40:19

オリジナル

1217 人が閲覧しました

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

プロトタイプの定義

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

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

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 のプロトタイプの理解に関するものです。気に入っていただければ幸いです。