JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのオブジェクトコンストラクターにプロパティを追加する正しい方法

オブジェクトコンストラクターにプロパティを追加する方法は、通常のオブジェクトの場合とは異なります。通常のオブジェクトであれば、コードのどこからでも自由にプロパティを追加できますが、オブジェクトコンストラクターの場合は、コンストラクターの外側ではなくコンストラクター内部にプロパティを定義する必要があります。

例1：コンストラクターの外側にプロパティを追加した場合

以下の例では、通常のオブジェクトと同じように、コンストラクターの外側にプロパティを追加しています。ここではオブジェクトコンストラクターを使用しているため、プロパティはコンストラクター内に定義しなければならず、その結果として出力には undefined が表示されます。

<html>
<body>
<p id = "prop"></p>
<script>
    function Business(name, property, age, designation) {
       this.Name = name;
       this.prop = property;
       this.age = age;
       this.designation = designation;
    }
    Business.language = "chinese";
    var person1 = new Business("Trump", "$28.05billion", "73", "President");
    var person2 = new Business("Jackma", "$35.6 billion", "54", "entrepeneur");
    document.write(person2.language);
</script>
</body>
</html>

出力結果

undefined

このように、コンストラクター関数そのものに直接代入したプロパティ（静的プロパティ）は、new キーワードで生成されたインスタンスからは参照できません。そのため person2.language の値は undefined となります。

例2：コンストラクターの内側にプロパティを定義した場合

次の例では、「language」というプロパティをコンストラクターの内部で宣言しています。この場合、各インスタンスがプロパティを正しく受け継ぐため、undefined などの不正な値ではなく、正常な結果が出力されます。

<html>
<body>
<p id = "prop"></p>
<script>
    function Business(name, property, age, designation) {
       this.Name = name;
       this.prop = property;
       this.age = age;
       this.designation = designation;
       this.language = "chinese";
    }
    var person1 = new Business("Trump", "$28.05billion", "73", "President");
    var person2 = new Business("Jackma", "$35.6 billion", "54", "entrepeneur");
    document.write(person2.language);
</script>
</body>
</html>

出力結果

chinese

補足：prototypeを使った効率的なプロパティ追加

すべてのインスタンスで共通の値を持つプロパティを追加したい場合は、コンストラクター内での宣言のほかに、prototype を利用する方法もあります。

Business.prototype.language = "chinese";

この方法であれば、コンストラクター関数を変更することなく、既存のすべてのインスタンスからプロパティを参照できるようになります。メモリの節約にもつながるため、実務では広く使われている手法です。

まとめ

  • 通常のオブジェクト：コードのどこからでもプロパティを追加可能。
  • オブジェクトコンストラクター：インスタンスから参照できるプロパティはコンストラクター内部（または prototype）で定義する必要がある。
  • コンストラクター関数に直接代入したプロパティは静的プロパティとなり、インスタンスからは参照できない。
  1. JavaScriptでオブジェクトに特定のプロパティが存在するか確認する方法

    JavaScriptでオブジェクトのプロパティ存在を確認する方法 JavaScriptでは、オブジェクトに特定のプロパティが存在するかどうかを確認したい場面がよくあります。最も基本的な方法は、すべてのオブジェクトが持つhasOwnProperty()メソッドを使用することです。このメソッドは、指定したプロパティがオブジェクト自身に直接定義されている場合にtrueを返し、存在しない場合にはfalseを返します。 hasOwnProperty()メソッドの構文 object.hasOwnProperty(propertyName) propertyName： 存在を確認したいプロパティ名（文字列

  2. JavaScriptで配列内オブジェクトのプロパティ名を置き換える方法

    JavaScriptでオブジェクト配列のプロパティ名を置き換える方法 JavaScriptでは、map()メソッドを活用することで、配列に含まれる各オブジェクトのプロパティ名を別の名前に簡単に置き換えることができます。map()は元の配列を変更せずに新しい配列を生成するため、安全かつ効率的なデータ変換処理に適しています。 以下は、オブジェクト配列のプロパティ名 name を fullName に置き換えるサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta