JavaScript でオブジェクトを作成する 4 つの方法を分析する

はじめに

JavaScriptを使用してオブジェクトを作成する方法はたくさんありますが、誰でも選択できるように、そのうちの 4 つをリストし、それぞれの方法の長所と短所をリストします。それを使って以下を見てください。
ファクトリーパターン

function createPerson(name, age){
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 return obj; //一定要返回，否则打印undefined:undefined
 }
 var person1 = new createPerson('Young',18);
 console.log(person1.name + ':' + person1.age);

利点:

ファクトリーパターンは、複数の類似したオブジェクトを作成する問題を解決できます

欠点:
オブジェクト認識問題 (オブジェクトのタイプを決定する方法) は解決しません

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

function Person(name,age){
 this.name = name;
 this.age = age;
 }
 var person1 = new Person('Young',18);
 console.log(person1.name + ':' + person1.age);

メリットとデメリットについて話す前に、彼女自身について少し話させてください

コンストラクターを関数として使用する

function Person(name,age){
 this.name=name;
 this.age=age;
 this.sayName=function(){
 return this.name;
 }
 }
 
 //当做构造函数使用
 var person1 = new Person('Young', 18);
 person1.sayName();
 console.log(person1.name + ':' + person1.age);
 
 //当做普通函数调用
 Person('Wind', 18);
 console.log(window.sayName());
 
 //在另一个作用域中调用
 var obj = new Object();
 Person.call(obj, 'bird', 100);
 console.log(obj.sayName());

コンストラクターのメリットとデメリット

利点:
インスタンスを特定の型として識別できます。
欠点:
各メソッドは各インスタンスで再作成する必要があります。もちろん、次のように変更することもできます。

function Person(name, age){
 this.name = name;
 this.age = age;
 this.sayName = sayName;
 }
 function sayName(){
 return this.name;
 }

は

グローバル関数

を呼び出すように変更されるため、カプセル化はまったく行われません。 。 。次の
プロトタイプ パターンはこの欠点を補うことができますプロトタイプ パターン

function Person(){
 
 }
 Person.prototype.name = 'Young';
 Person.prototype.age = 18;
 Person.prototype.sayName = function(){
 return this.name;
 }
 
 var person1 = new Person();
 console.log(person1.sayName());
 var person2 = new Person();
 console.log(person1.sayName());
 alert(person1.sayName === person2.sayName);
 //person1和person2访问的是同一组属性的同一个sayName()函数

プロトタイプに格納されている値にはオブジェクト インスタンスを通じてアクセスできますが、プロトタイプ内の値をインスタンスを通じて上書きすることはできませんobject

function Person(){
 
 }
 Person.prototype.name='Young';
 Person.prototype.age=18;
 Person.prototype.sayName=function(){
 return this.name;
 }
 
 var person1=new Person();
 var person2=new Person();
 person1.name='Wind';
 
 console.log(person1.sayName());//Wind
 console.log(person2.sayName());//Young
 alert(person1.sayName==person2.sayName);//true

person1.sayName

を呼び出すと、パーサーはまずインスタンス person1 に

sayName

の属性があるかどうかを判断し、持っていない場合は独自の属性を呼び出します。プロトタイプ内の属性。

function Person(){
 
 }
 Person.prototype.name='Young';
 Person.prototype.age=18;
 Person.prototype.sayName=function(){
 return this.name;
 }
 
 var person1=new Person();
 var person2=new Person();
 
 person1.name='Wind';
 console.log(person1.sayName());//Wind
 console.log(person2.sayName());//Young
 
 delete person1.name;
 console.log(person1.sayName());//Young
 console.log(person2.sayName());//Young

プロパティがプロトタイプに存在するかインスタンスに存在するかを検出するには、

hasOwnPropertyType

メソッドを使用します。このメソッドは、インスタンスでは true、プロトタイプでは false です。

列挙型オブジェクトのインスタンス属性は

Object.keys()

メソッドを使用します

function Person(){
 
 }
 Person.prototype.name='Young';
 Person.prototype.age=18;
 Person.prototype.sayName=function(){
 return this.name;
 }
 
 var keys=Object.keys(Person.prototype);
 console.log(keys);//["name", "age", "sayName"]

プロトタイプパターンの利点と欠点

利点:
各インスタンスですべてのメソッドを繰り返す必要はありません
欠点: ry プロトタイプモードを使用する人はほとんどいません一人で。 。問題の詳細は

function Person(){
 
 }
 Person.prototype={
 constructor:Person,
 name:'Young',
 age:18,
 friends:['Big','Pig'],
 sayName:function(){
 return this.name;
 }
 };
 var p1=new Person();
 var p2=new Person();
 p1.friends.push('Mon');
 console.log(p1.friends);//["Big", "Pig", "Mon"]
 console.log(p2.friends);//["Big", "Pig", "Mon"]

一般的にインスタンスには独自の属性があり、それをここ

Person.prototype

に入れているからこそ、p1の修正でプロトタイプを含めたインスタンス全体が修正されたことになります。コンストラクター パターンとプロトタイプ パターンを組み合わせて使用​​できます。

コンストラクター パターンとプロトタイプ パターンの併用

function Person(name,age){
 this.name=name;
 this.age=age;
 this.friends=['Big','Pig'];
 }
 Person.prototype={
 sayName:function(){
 return this.name;
 }
 };
 var p1=new Person('Young',18);
 var p2=new Person('Wind',78);
 p1.friends.push('Raganya');
 console.log(p1.friends);//["Big", "Pig", "Raganya"]
 console.log(p2.friends);//["Big", "Pig"]
 console.log(p1.friends==p2.friends);//false
 console.log(p1.sayName==p2.sayName);//true

このパターンは、現在、カスタム タイプを作成する最も広く使用され、認識されている方法です。参照型を定義するために使用されるデフォルトのモードです。

概要

以上がJavaScript でオブジェクトを作成する 4 つの方法を分析するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。