JavaScript デザイン パターンとプロトタイプ パターン (Object.create とプロトタイプ) の概要_JavaScript スキル

プロトタイプモードの説明

説明: プロトタイプ インスタンスを使用して、新しいカスタマイズ可能なオブジェクトをコピーして作成します。新しいオブジェクトの場合、元のオブジェクトを作成する特定のプロセスを知る必要はありません。

プロセス: プロトタイプ => 新しい ProtoExam => 新しいオブジェクトにクローンを作成します;

関連するコードを使用します:

コードをコピーします コードは次のとおりです:

関数プロトタイプ() {
This.name = '';
This.age = '';
This.sex = '';
}
Prototype.prototype.userInfo = function() {

Return '個人情報、名前: ' this.name '、年齢: ' this.age '、性別: ' this.sex '
';
}

2 つ以上の個人情報コンテンツが必須になりました:

コードをコピー コードは次のとおりです:

var proto = 新しいプロトタイプ();
var person1 = Object.create(proto);
person1.name = 'シャオミン';
person1.sex = '男性';
person1.age = 35;
person1.userInfo(); //
var person2 = Object.create(proto);
person2.name = 'Xiaohua';
person2.sex = '女性';
person2.age = 33;
person2.userInfo();

出力戻り値:

コードをコピー コードは次のとおりです:

個人情報、名前：シャオミン、年齢：35、性別：男性

個人情報、名前：Xiaohua、年齢：33、性別：女性

プロトタイプ モードは通常、抽象構造が複雑であるが、コンテンツの構成が類似しており、抽象コンテンツをカスタマイズでき、要件を満たすために新しく作成されたオブジェクトをわずかに変更するだけで済む場合に使用されます。

Object.create 命令

1>. 定義: プロトタイプ オブジェクトを指定でき、オプションのカスタム プロパティを含めることができるオブジェクトを作成します。 2> Object.create(proto [,properties]); 新しいオブジェクトのプロパティを構成するために使用されます。

コードをコピーします

コードは次のとおりです: 1. proto: 新しいオブジェクトのプロトタイプを作成するには必須であり、null にすることができます。このプロトは、[new] または object.prototype がすでに作成されている場合にのみ価値があります。 2. プロパティ: オプション、構造: {

propField: {

値: 'val'|{}|function(){},
書き込み可能: true|false、
列挙可能: true|false、
構成可能: true|false、
get:function(){return 10},
set:関数(値){}
}
}
カスタム属性には、次の 4 つのネイティブ属性があります:
値: カスタム属性値;
writable: この項目の値が編集可能かどうか。デフォルトは false です。true の場合、obj.prodField に値を割り当てることができます。それ以外の場合は読み取り専用です。 列挙可能: 列挙可能; 構成可能: 構成可能;

set、get アクセサー メソッドを含めることもできます。

このうち、[set, get] と value および writable は同時に出現できません。

1. プロトタイプ オブジェクト クラスを作成します:

コードをコピーします
コードは次のとおりです:

関数 ProtoClass(){ This.a = 'ProtoClass'; This.c = {}; This.b = function() { }

}

プロトタイプメソッドの作成:

コードをコピーします
コードは次のとおりです:

ProtoClass.prototype.aMethod = function() { //this.a; //this.b(); これを返します。a; }

使用方法

1. ProtoClass.prototype;
を使用してオブジェクトを作成します。

コードをコピー コードは次のとおりです:

var obj1 = Object.create(ProtoClass.prototype, {
foo:{値: 'obj1'、書き込み可能: true}
})

obj1 には ProtoClass プロトタイプ メソッド aMethod;
があります。

コードをコピー コードは次のとおりです:

obj1.aMethod();
//未定義が出力され、メソッドはアクセス可能ですが、ProtoClass メンバーはアクセスできません

ただし、このメソッドは ProtoClass: の a、b、c のメンバー属性を実装できません。

2. インスタンス化された ProtoClass をプロトタイプとして使用します:

コードをコピーします コードは次のとおりです:

var proto = new ProtoClass();

var obj2 = Object.create(proto, {
foo:{value:'obj2'}
});

この方法で作成された obj2 には、ProtoClass のすべてのメンバー属性 a、b、c および aMethod プロトタイプ メソッドがあり、foo 読み取り専用データ属性
が追加されます。

コードをコピー コードは次のとおりです:

obj2.a; //プロトクラス
obj2.c: //[オブジェクト]
obj2.b(); //

obj2.aMethod() //プロトクラス
obj2.foo; //obj2

3. サブクラスの継承:

コードをコピーします コードは次のとおりです:

function SubClass() {

}
SubClass.prototype = Object.create(ProtoClass.prototype ,{
foo:{値: 'サブクラス'}
});

SubClass.prototype.subMethod = function() {
this.a を返す || this.foo;
}

このメソッドは ProtoClass の aMethod メソッドに継承して実行できます。

コードをコピーします コードは次のとおりです:

var func = 新しいサブクラス();
func.aMethod() ;//未定義、ProtoClass、a、b、c のメンバー属性を読み取ることができません
func.subMethod();//サブクラス

サブクラスが ProtoClass のメンバー属性を読み取れるようにするには、サブクラスを変更する必要があります:

コードをコピーします コードは次のとおりです:

関数サブクラス()
{
ProtoClass.call(this);
}

//その他のコード;

このメソッドは ProtoClass;:

のメンバー属性とプロトタイプ メソッドを取得できます。

コードをコピーします コードは次のとおりです:

var func = 新しいサブクラス();
func.aMethod() ;//ProtoClass
func.subMethod();//ProtoClass

もう 1 つの方法は、インスタンス化された ProtoClass オブジェクトを SubClass のプロトタイプとして使用することです。

コードをコピーします コードは次のとおりです:

var proto = new ProtoClass();

関数 SubClass() {
}

SubClass.prototype = Object.create(proto, {
foo:{値: 'サブクラス'}
});

このようにして、SubClass がインスタンス化された後、ProtoClass のすべてのプロパティとプロトタイプ メソッドを取得し、読み取り専用のデータ属性 foo;

を作成できます。

コードをコピーします コードは次のとおりです:

var func = 新しいサブクラス();
func.foo; // サブクラス
func.a; //プロトクラス
func.b(); //
func.c; //[オブジェクト]
func.aMethod(); //プロトクラス

4. 別の作成継承メソッドは、インスタンス化された ProtoClass をプロトタイプとして使用する Object.create と同じ効果があります。

コードをコピー コードは次のとおりです:

function SubClass() {
this.foo = 'subclass' //ただし、ここで読み書きできます
; }
SubClass.prototype = new ProtoClass();

Object.create 関連の手順

Object.create は、新しいオブジェクトを作成するために使用されます。Object の場合、プロトタイプは null であり、関数は new Object() または {};

と同じです。

関数の場合、new FunctionName と同じ効果があります。

コードをコピー コードは次のとおりです:

//1 オブジェクト
var o = {}
//
と同等 var o2 = Object.create({});
//両方のコンストラクターは同じです;
//----------------------------------------

関数 func() {
This.a = 'func';
}
func.prototype.method = function() {
これを返します。a;
}

var newfunc = new func();

//[同じ効果]
と同等 var newfunc2 = Object.create(Object.prototype/*Function.prototype||function(){}*/, {
a: {値: 'func'、書き込み可能: true}、
メソッド: {value: function() {return this.a;} }
});

ただし、newfunc と newfunc2 は、それらを作成するオブジェクト内に異なる関数参照があります。

newfunc は関数 func() {...}、newfunc2 は関数 Function {Native}

コードをコピー コードは次のとおりです:

Object.create(proto[,propertiesField]):

プロトの説明では、この値は必須であり、設定されていない場合は例外がスローされます。
proto が null でない場合、それはインスタンス化された値、つまり新しい値です。JavaScript のほとんどのオブジェクトには、このオブジェクトがどの関数によってインスタンス化されたかを示すコンストラクター属性があります。 propertiesField はオプションで、新しく作成されたオブジェクトに必要なメンバーのプロパティまたはメソッドを設定します。