2

Javascript でオブジェクトをインスタンス化する場合、次のシナリオを有効にしたいと考えています。

  • オブジェクトはパラメータなしでインスタンス化でき、デフォルトのプロパティ値で作成されます
  • オブジェクトは、オブジェクト プロパティの初期値を設定するパラメーターでインスタンス化できます。

解決策は次のとおりです。

  • オブジェクトで定義されていないプロパティを割り当てない
  • 任意の数のプロパティを設定できるようにする (なし、一部、またはすべて)
  • スクリプトで定義された任意のオブジェクトに簡単に適用できます。つまり、どのプロパティを設定できるかについての事前知識はありません。

jQuery を使用できますが、純粋な JS ソリューションは大歓迎です。

次のオブジェクト コンストラクターを使用します。

function User() {
    this.name = null;
    this.email = null;
    this.password = null;
}

このソリューションにより、次のことを達成できるはずです。

new User();
// User { name: null, email: null, password: null }

new User(<parameter(s) that specify a value for name, email and password>);
// User { name: "passed value", email: "passed value", password: "passed value" }

new User(<parameter that specifies a value for name>);
// User { name: "passed value", email: null, password: null }

new User(<parameter(s) that specify values for name and non-existent property age>);
// User { name: "passed value", email: null, password: null }
4

2 に答える 2

0

まず、オブジェクト コンストラクターがパラメーターを取得できるようにします。

function User(params) {
...

任意の数の引数を指定できるようにするために、paramsパラメーターはオブジェクト リテラルを受け入れます。

new User({name: 'name 1', id: 1});

次に、オブジェクトからオブジェクトへparamsのプロパティの割り当てを処理するジェネリック関数にオブジェクトを渡します。paramstarget

function setObjectProperties(params, target) {
}

関数は、setObjectPropertiesデータが正しく渡されたことを確認する必要があります。paramsとの両方targetが定義されているかどうかをチェックします。

function setObjectProperties(params, target) {
    if (params !== undefined && target !== undefined) {

    }
}

作業するものがあると確信したら、パラメーターを反復処理してオブジェクトのプロパティに割り当てます。

function setObjectProperties(params, target) {
    if (params !== undefined && target !== undefined) {
        $.each(params, function (i, property) {
            this[i] = property;
        }, target);
    }
}

$.eachプロトタイプなどのすべてのオブジェクト プロパティを反復する副作用なしに、オブジェクト プロパティを反復するjQuery の関数を使用します。これは機能しますthisが、関数のコールバック クロージャ内で再定義される副作用に対処する必要があることを意味し$.eachます。元のオブジェクトが何であったかはわかりません。

ただし、jQuery の$.proxy関数は、使用したいものを指定しながら関数を呼び出せるように設計されていますthis。

function setObjectProperties(params, target) {
    if (params !== undefined && target !== undefined) {
        $.each(params, $.proxy(function (key, value) {
                this[key] = value;
        }, target));
    }
}

ここでは、以下に示すように、オブジェクト コンストラクター内thisで設定されるターゲット パラメーターの値に設定するよう jQuery に指示します。this

function User(params) {
    this.name = null;
    this.email = null;
    this.password = null;

    setObjectProperties(params, this);
}

1 つの問題がまだ残っています。渡された値を割り当てることができるかどうかを確認するために、オブジェクトで宣言されたプロパティをチェックする必要があります。

function setObjectProperties(params, target) {
    if (params !== undefined && target !== undefined) {
        $.each(params, $.proxy(function (key, value) {
            if (this.hasOwnProperty(key)) {
                this[key] = value;
            }
        }, target));
    }
}

完全で最終的なコードは次のとおりです。

function setObjectProperties(params, target) {
    if (params !== undefined && target !== undefined) {
        $.each(params, $.proxy(function (key, value) {
            if (this.hasOwnProperty(key)) {
                this[key] = value;
            }
        }, target));
    }
}

function User(params) {
    this.name = null;
    this.email = null;
    this.password = null;

    setObjectProperties(params, this);
}

user1 = new User();
// User { name: null, email: null, password: null }

user2 = new User({ name: 'First Last' });
// User { name: "First Last", email: null, password: null }

user3 = new User({ name: 'First Last', age: '400' });
// User { name: "First Last", email: null, password: null }
于 2013-06-28T13:05:07.803 に答える