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

JavaScriptのオブジェクトコンストラクターにメソッドを追加する方法

JavaScriptでは、通常のオブジェクトにメソッドを追加する場合と、オブジェクトコンストラクターにメソッドを追加する場合とでは、扱い方が大きく異なります。通常のオブジェクトであれば、生成後にドット記法などを使って自由にメソッドを追加できますが、コンストラクターから生成したインスタンスに対しては、そのような単純な方法でメソッドを追加することはできません。


オブジェクトコンストラクターにメソッドを持たせたい場合は、コンストラクター関数の内部でメソッドを定義する必要があります。これは、new演算子によってインスタンスが生成される際にコンストラクター内部の処理が実行され、そのタイミングでプロパティやメソッドが各インスタンスに割り当てられるためです。


コード例

次の例では、Businessというコンストラクター関数の中にname()メソッドを定義しています。コンストラクター内部でメソッドを追加しているため、生成されたインスタンスから正しく値を取得できます。


<html>
<body>
<script>
    function Business(name, property, age, designation) {
        this.Name = name;
        this.prop = property;
        this.age = age;
        this.designation = designation;
        this.name = function() {
            return this.Name
        };
    }
    var person1 = new Business("Trump", "$28.05billion", "73", "President");
    document.write(person1.name());
</script>
</body>
</html>

実行結果

Trump

上記のコードでは、person1.name()を呼び出すことで、コンストラクターに渡された名前「Trump」が出力されます。このように、メソッドをコンストラクター内に定義しておけば、各インスタンスが自分自身のプロパティを参照できるようになります。


補足：prototypeを使った効率的なメソッド定義

なお、コンストラクター内でメソッドを定義すると、インスタンスごとに関数のコピーが作成されるため、大量のインスタンスを扱う場合はメモリの面で非効率になることがあります。そのようなケースでは、以下のようにprototypeを使ってメソッドを共有する方法が一般的です。


function Business(name, property, age, designation) {
    this.Name = name;
    this.prop = property;
    this.age = age;
    this.designation = designation;
}

Business.prototype.name = function() {
    return this.Name;
};

var person1 = new Business("Trump", "$28.05billion", "73", "President");
document.write(person1.name()); // Trump

prototypeに定義されたメソッドはすべてのインスタンス間で共有されるため、メモリ使用量を抑えながら同じ機能を提供できます。現代のJavaScriptではclass構文を利用する方法もありますが、その内部的な仕組みはコンストラクター関数と共通しています。

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

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

  2. JavaScriptのみで各li要素に個別のクラス名を追加する方法

    JavaScriptでli要素にクラスを追加するには、forEach()とclassList.add()を組み合わせて使用します。jQueryなどのライブラリに頼らず、純粋なJavaScript（バニラJS）だけで各要素に個別のクラスを付与できるのがポイントです。基本的な考え方querySelectorAll()で対象の要素をすべて取得し、forEach()で1つずつループ処理を行います。ループのインデックス番号（i）を条件分岐に使うことで、特定の要素だけに異なるクラスを追加することも可能です。サンプルコード以下がそのコードです −<!DOCTYPE html> <