JavaScript 学習の概要prototype_javascript スキル

PHP中文网
リリース: 2016-05-16 15:28:03
オリジナル
1109 人が閲覧しました

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

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

1 プロトタイプ設計パターン
.Net、clone() を使用してプロトタイプ メソッドを実装できます

プロトタイプ メソッドの主なアイデアは、クラス A があり、プロトタイプ化されたクラス B を作成したいということです。 by A. そして拡張することができます。 B のプロトタイプを A と呼びます。

2 JavaScript メソッドは、次の 3 つのカテゴリに分類できます。 🎜>
b -> オブジェクトメソッド

c -> プロトタイプメソッド

例: 🎜>

3. obj1.func.call(obj) メソッド


は、 obj を obj1 として扱うことを意味します。 func メソッドを呼び出すと、最初は obj1 の func メソッドが呼び出されていましたが、obj を渡した後、コンテキスト オブジェクトが変更され、obj オブジェクトを通じて ojb1 のメソッドが呼び出されました。問題を一つずつ解決していきます:

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(); //调用原型方法
ログイン後にコピー
プロトタイプとはどういう意味ですか?

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

A.prototype = new B();

プロトタイプの理解と継承を混同しないでください。 A のプロトタイプは B のインスタンスです。A が B のすべてのメソッドとプロパティを複製したことがわかります。 A は B のメソッドとプロパティを使用できます。ここでは、継承ではなくクローン作成に重点を置いています。このような状況が発生する可能性があります。A のプロトタイプは B のインスタンスであり、B のプロトタイプも A のインスタンスです。 最初に実験的な例を見てみましょう:

最初にbaseClassクラスを定義し、次にextentClassを定義します。 , ただし、baseClass のインスタンスをプロトタイプとして使用する予定であり、複製する extendClass には showMsg オブジェクト メソッドも含まれています。

extendClass.prototype = new baseClass() は次のように読み取ることができます。 extendClass は、baseClass のインスタンスをプロトタイプとして複製することによって作成されます。

次に、extendClass 自体に、baseClass のメソッドと同じ名前のメソッドが含まれている場合はどうなるかという疑問が生じます。

以下は拡張実験 2 です:

function baseClass(){

  this.showMsg = function(){

    alert("baseClass::showMsg");  

  }

}

function extendClass(){

}

extendClass.prototype = new baseClass();

var instance = new extendClass();

instance.showMsg(); // 显示baseClass:showMsg
ログイン後にコピー

実験の証明:

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

次に、新しい質問があります:
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 のインスタンス インスタンスを使用して、オブジェクト メソッド showMsg を呼び出したい場合はどうすればよいですか?基本クラス? 答えは、call:

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

ここで、baseClass.showMsg.call(instance) を使用しないのかと尋ねる人がいるかもしれません。

これが違いです。オブジェクト メソッドとクラス メソッドの間で呼び出したいのは、baseClass のオブジェクト メソッドです。

最後に、

次のコードを明確に理解していれば、この記事の内容を理解できます。 🎜>
extendClass.prototype = new baseClass();

var instance = new extendClass();

var baseinstance = new baseClass();

baseinstance.showMsg.call(instance);//显示baseClass::showMsg
ログイン後にコピー

上記は JavaScript 学習概要の内容です、prototype_javascript スキルの詳細については、PHP 中国語に注目してください。ウェブサイト (www.php.cn)!

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート