ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptプロトタイプパターンの使用例を詳しく解説_JavaScriptスキル

JavaScriptプロトタイプパターンの使用例を詳しく解説_JavaScriptスキル

WBOY
WBOYオリジナル
2016-05-16 15:56:381175ブラウズ

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

一般に、ファクトリ パターンとコンストラクター パターンの欠点を理解すると、プロトタイプ パターンが必要な理由がわかります

プロトタイプ パターン i の定義: すべての関数にはプロトタイプ属性があります。プロトタイプ属性は、特定の型のすべてのインスタンスで共有できるプロパティとメソッドを含めることを目的としたオブジェクトです。たとえば、コンストラクター モデルのsayInformation() メソッドでは、2 つのインスタンスが宣言されている場合、sayInformation メソッドを 2 回構築する必要がありますが、2 回宣言する必要はないのが、このプロトタイプ パターンが表示される理由です (Nima、これらのブログ)。インターネット上ではすべてが「ナンセンスですか?それとも本を読むと分かりやすいですか?」)、sayInformation()をプロトタイプモードとして宣言した後、インスタンスは共有され、2回宣言する必要はありません

function Person(){}
Person.prototype.name="jack";
Person.prototype.age=10;
Person.prototype.sayInformation=function()
{
  console.log("my name is"+this.name+" age is"+this.age);
}
var person1 = new Person();
person1.sayInformation();
console.info(person1.name);
//来自原型的属性name
person1.name="Greg";
//修改实例的name属性
console.info(person1.name);
//来自实例的属性name
delete person1.name ;
//来自实例的属性,这里删除的是实例的属性,但是原型的属性依然存在
console.info(person1.name);
//来自原型的属性name
var person2 = new Person();
person2.sayInformation();
console.info(person1.hasOwnProperty("name"));
//hasOwnProperty检查属性是属于实例还是原型中,如果是实例中就返回true
console.info(person1.name==person2.name);
console.info(person1.sayInformation==person2.sayInformation);
console.info(person1.constructor);
//指向person1的构造函数
//原型更加简便的写法
function Person2(){}
Person2.prototype={
  name:"jack",
  age:29,
  sayInformationfunction:function()
    {
      console.log("my name is"+this.name+" age is"+this.age);
    }
}

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。