ホームページ > ウェブフロントエンド > jsチュートリアル > プリミティブ メソッドとファクトリ メソッドを使用して JavaScript オブジェクト インスタンスを作成するコードの詳細な説明

プリミティブ メソッドとファクトリ メソッドを使用して JavaScript オブジェクト インスタンスを作成するコードの詳細な説明

伊谢尔伦
リリース: 2017-07-24 15:28:05
オリジナル
1305 人が閲覧しました

JS にはクラスの概念はありませんが、JS の文法機能を使用してクラスの概念でオブジェクトを作成できます。

オリジナルメソッド

<script type="text/javascript"> 
var obj = new Object(); 
obj.name = "Koji"; //为对象添加属性 
obj.age = 21; 
obj.showName = function(){ //为对象添加方法 
alert(this.name); 
} 
obj.showAge = function(){ 
alert(this.age); 
} 

obj.showName(); //Koji 
obj.showAge(); //21 

</script>
ログイン後にコピー

上記のメソッドは、newキーワードによりオブジェクトを生成し、動的言語であるJSの特性に合わせてプロパティやメソッドを追加してオブジェクトを構築します。これはメソッドを呼び出すオブジェクトです。このアプローチの問題は、オブジェクトを複数回作成する必要がある場合、コードを複数回繰り返す必要があり、コードの再利用に役立たないことです。

ファクトリメソッド

<script type="text/javascript"> 
function createObj(){ 
var obj = new Object(); //创建对象 

obj.name = "Koji"; 
obj.age = 21; 
obj.showName = function(){ 
alert(this.name); 
} 
obj.showAge = function(){ 
alert(this.age); 
} 

return obj; //返回对象 
} 

var obj1 = createObj(); 
var obj2 = createObj(); 

obj1.showName(); //Koji 
obj2.showAge(); //21 

</script>
ログイン後にコピー

このメソッドはコードの再利用率を向上させます。また、ファクトリメソッドを変更してパラメータ値を渡すこともできます。

<script type="text/javascript"> 
function createObj(name, age){ //构造对象时可以传入初始化参数 
var obj = new Object(); //创建对象 

obj.name = name; 
obj.age = age; 
obj.showName = function(){ 
alert(this.name); 
} 
obj.showAge = function(){ 
alert(this.age); 
} 

return obj; //返回对象 
} 

var obj1 = createObj("Koji", 22); 
var obj2 = createObj("Luo", 21); 

obj1.showName(); //Koji 
obj1.showAge(); //22 
obj2.showName(); //Luo 
obj2.showAge(); //21 

</script>
ログイン後にコピー

上記の方法はコードの再利用率を向上させることができますが、オブジェクト指向におけるクラスの概念と比較すると大きな欠陥があります。オブジェクト指向では、オブジェクトのプロパティはプライベートである一方、オブジェクトのメソッドは共有されることが強調されます。上記のファクトリ メソッドがオブジェクトを作成するときは、オブジェクトごとに独自のプライベート メソッドを作成する必要があります。同時に、各オブジェクトに対して論理的に同一のメソッドを作成するとメモリが無駄に消費されます。改善点は以下の通りです

<span style="font-size:14px;">
<script type="text/javascript"> 

function createObj(name, age){ 
var obj = new Object(); //创建对象 

obj.name = name; 
obj.age = age; 
obj.showName = showName; 
obj.showAge = showAge; 

return obj; //返回对象 
} 

function showName(){ //函数也是一个对象 
alert(this.name); 
} 

function showAge(){ 
alert(this.age); 
} 

var obj1 = createObj("Koji", 22); 
var obj2 = createObj("Luo", 21); 

obj1.showName(); //Koji 
obj1.showAge(); //22 
obj2.showName(); //Luo 
obj2.showAge(); //21 

</script></span>
ログイン後にコピー

上記は、2 つの関数オブジェクトを定義することで、異なるオブジェクトが関数オブジェクトを保持するというプライベートな問題を解決します。これで、すべてのオブジェクト メソッドが上記の 2 つの関数への参照を保持します。

以上がプリミティブ メソッドとファクトリ メソッドを使用して JavaScript オブジェクト インスタンスを作成するコードの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート