JavaScript でオブジェクトを作成する 4 つの方法を分析する-jsチュートリアル-php.cn

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

怪我咯

リリース： 2017-03-30 10:03:15

オリジナル

1141 人が閲覧しました

はじめに

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

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

ログイン後にコピー

利点:

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

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

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

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

ログイン後にコピー

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

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

function Person(name,age){
 this.name=name;
 this.age=age;
 this.sayName=function(){
 return this.name;
 }
 }
 
 //当做构造函数使用
 var person1 = new Person(&#39;Young&#39;, 18);
 person1.sayName();
 console.log(person1.name + &#39;:&#39; + person1.age);
 
 //当做普通函数调用
 Person(&#39;Wind&#39;, 18);
 console.log(window.sayName());
 
 //在另一个作用域中调用
 var obj = new Object();
 Person.call(obj, &#39;bird&#39;, 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 = &#39;Young&#39;;
 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=&#39;Young&#39;;
 Person.prototype.age=18;
 Person.prototype.sayName=function(){
 return this.name;
 }
 
 var person1=new Person();
 var person2=new Person();
 person1.name=&#39;Wind&#39;;
 
 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=&#39;Young&#39;;
 Person.prototype.age=18;
 Person.prototype.sayName=function(){
 return this.name;
 }
 
 var person1=new Person();
 var person2=new Person();
 
 person1.name=&#39;Wind&#39;;
 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=&#39;Young&#39;;
 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:&#39;Young&#39;,
 age:18,
 friends:[&#39;Big&#39;,&#39;Pig&#39;],
 sayName:function(){
 return this.name;
 }
 };
 var p1=new Person();
 var p2=new Person();
 p1.friends.push(&#39;Mon&#39;);
 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=[&#39;Big&#39;,&#39;Pig&#39;];
 }
 Person.prototype={
 sayName:function(){
 return this.name;
 }
 };
 var p1=new Person(&#39;Young&#39;,18);
 var p2=new Person(&#39;Wind&#39;,78);
 p1.friends.push(&#39;Raganya&#39;);
 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 サイトの他の関連記事を参照してください。