5つのjsデザインパターン

この記事では主に 5 つの JS デザイン パターンを紹介します。必要な方はぜひ参考にしてください。以下のエディターで見てみましょう。

1. ファクトリパターン

これはファクトリパターンです。ファクトリパターンは多くの類似オブジェクトの問題を解決しますが、終了オブジェクトの識別の問題はありません

function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");

2。コンストラクターパターン

Construction 関数パターンの各インスタンスのsayNameは異なるため、プロパティがインスタンスに存在するかプロトタイプに存在するかを検出するために、プロトタイプチェーン

function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
};
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

hasOwnProperty()メソッドが導入されています。 true はインスタンス、false はプロトタイプ内の

3. プロトタイプ モードの名前

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name = "Greg";
alert(person1.name); //"Greg"——来自实例
alert(person2.name); //"Nicholas"——来自原型
delete person1.name;
alert(person1.name); //"Nicholas" ——

person1 は新しい値によってブロックされます。ただし、person1.name または person2.name にアクセスするかどうかに関係なく、値は通常どおり返されます

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name")); //false
alert("name" in person1); //true
person1.name = "Greg";
alert(person1.name); //"Greg" ——来自实例
alert(person1.hasOwnProperty("name")); //true
alert("name" in person1); //true
alert(person2.name); //"Nicholas" ——来自原型
alert(person2.hasOwnProperty("name")); //false
alert("name" in person2); //true
delete person1.name;
alert(person1.name); //"Nicholas" ——来自原型
alert(person1.hasOwnProperty("name")); //false
alert("name" in person1); //true

上記のコード実行のプロセス全体で、name 属性はオブジェクト上で直接アクセスされるか、またはオブジェクトのプロトタイプ
を通じてアクセスされます。 。したがって、person1 で "name" を呼び出すと、プロパティがインスタンスに存在するかプロトタイプに存在するかに関係なく、常に true が返されます。

hasOwnProperty() メソッドと in 演算子を同時に使用すると、以下に示すように、プロパティがオブジェクトに存在するか

プロトタイプに存在するかを判断できます
name 属性は最初にプロトタイプに存在するため、hasPrototypeProperty() は戻り値を返しますtrue
このプロパティはインスタンス内に存在するため、hasPrototypeProperty() は false を返します
プロトタイプ モードが

Person.prototype = {
constructor: Person,
name : "Nicholas",
age : 29,
job : "Software Engineer",
friends : ["Shelby", "Court"],
sayName : function () {
alert(this.name);
}
}

として記述されている場合は、必ずコンストラクターを上記の形式で記述してください。そうでない場合、関数コンストラクターは window を指します

var friend = new Person();
alert(friend instanceof Object); //true
alert(friend instanceof Person); //true
alert(friend.constructor == Person); //false
alert(friend.constructor == Object); //true

4. コンストラクターをプロトタイプ パターンと組み合わせて使用​​します

function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
}
Person.prototype = {
constructor : Person,
sayName : function(){
alert(this.name);
}
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Count,Van"
alert(person2.friends); //"Shelby,Count"
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true

5. 動的プロトタイプ パターン

function Person(name, age, job){
//属性
this.name = name;
this.age = age;
this.job = job
// 方法
if (typeof this.sayName != "function"){
Person.prototype.sayName = function(){
alert(this.name);
};
}
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();

このコードは、コンストラクターが初めて呼び出されたときにのみ実行されます。この後、プロトタイプは初期化されるため、それ以上の変更は必要ありません。ただし、ここでプロトタイプに加えた変更はすべてのインスタンスに直ちに反映されることに注意してください。
動的プロトタイプモードを使用する場合、オブジェクトリテラルを使用してプロトタイプをオーバーライドすることはできません。前に説明したように、インスタンスがすでに作成されているときにプロトタイプをオーバーライドすると、既存のインスタンスと新しいプロトタイプの間の接続が切断されます。

以上が5つのjsデザインパターンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。